1. 关于变量、函数提升、构造函数
function Foo(){ getName = function(){alert(1)} //当此函数执行时,覆盖全局getName return this; } Foo.getName = function(){alert(2)} Foo.prototype.getName = function(){alert(3)} var getName = function(){alert(4)} function getName(){alert(5)} //变量提升被上面的赋值覆盖 //写出下列输出结果 Foo.getName() // 2 getName() // 4 Foo().getName() // 1 getName() //1 new Foo.getName() // 2 执行函数并创建一个实例 new Foo().getName() // 3 执行Foo实例的方法 -->( (new Foo()).getName )() new new Foo().getName() // 3 同上 不过创建了一个Foo.prototype.getName实例
2. 节流与防抖
/* 节流: 函数在规定的执行周期类 只有第一次触发的函数能被执行 应用场景:需要频繁触发的函数 ,处于优化型角度 @param:fn 要被执行的函数 @param:delay 执行的时间周期 */ function throttle(fn,delay){ var lastTime = 0 //上一次函数执行的时间 return function(){ var nowTime = Date.now() //记录此刻的时间 if(nowTime - lastTime > delay){ fn() nowTime = lastTime } } /* 防抖: 函数在规定的执行周期类 只有第最后一次触发的函数能被执行 */ function debounce(fn,delay){ var timer = null return function(){ clearTimeout(timer) timer = setTimeout(function(){ fn.apply(this) },delay) } }
3. 实现跨域方式
//1.jsonp,利用script标签src实现跨域,仅支持get请求 //注意:服务器返回的响应得是js代码(script才能识别) function fn(data){ console.log(data) } //创建script标签 const script = document.createElement(‘script‘) //设置src属性:请求的服务器地址 script.src = ‘http://localhost:3000/jsonp-server‘ document.body.appendChild(script) /* 服务器端: app.all(request,response){ //要返回的数据 const data ={ a:1, b:2 } //将数据转为字符串 const str = JSON.stringfy(data) //返回数据 response.end(`fn(${str})`) } */
4.从url地址到最终页面渲染,经历了哪些阶段?
1)DNS解析:将域名地址解析为ip地址
-- 浏览器DNS缓存
-- 系统DNS缓存
-- 路由器DNS缓存
-- 网络运营商DNS缓存
-- 递归搜索:blog.baidu.com
-- .com域名下查找DNS解析
-- .baidu域名下查找DNS解析
-- .blog域名下查找DNS解析
-- 如果以上都找不到,出错
2)TCP连接,TCP三次握手
-- 第一次:浏览器发起,告诉服务器我要发送请求了
-- 第二次:服务器发起,告诉浏览器我准备接收了,你发吧
-- 第三次:浏览器发起,告诉服务器我马上就发,准备接收
3)发送请求
-- 请求报文,HTTP请求报文
4)接收响应
-- 响应报文
5)渲染页面
-- 遇见HTML标签,浏览器调用HTML解析器解析成Token并构建成dom树
-- 遇见style/link标签,浏览器调用CSS解析器,处理css标记并构建cssom树
-- 遇见script标签,调用JavaScript解析器,处理script代码(绑定事件,修改dom树/cssom树)
-- 将dom树与cssom树合并为一棵渲染树
-- 根据渲染树来计算布局,计算每个节点的几何信息(布局)
-- 将各个节点颜色绘制到屏幕上(渲染)
注意:这五个步骤一定按照顺序执行,如果dom树或cssom树被修改了,可能会执行多次布局和渲染。往往页面会执行多次这些步骤
6)断开连接,TCP四次握手
-- 第一次:浏览器发起,告诉服务器我的请求发送完了
-- 第二次:服务器发起,告诉浏览器你的请求我已经接受完了
-- 第三次:服务器发起,告诉浏览器我的响应发送完了,你准备关闭吧
-- 第四次:浏览器发起,你的响应我已经接收完了,你关闭吧