本文深入讲解前端开发中的关键技术和优化技巧，包括函数节流与防抖、XSS与CSRF安全防护、事件处理机制、HTTP状态码解读、跨域解决方案、Webpack配置与优化等内容。
JS知识，做复习之用
- 函数节流和防抖: 函数节流是多少秒之内执行一次，防抖是比如input事件输入后多少秒停后执行
// 函数节流
let throttle = function (fn, interval) {
let timer
let firstTime = true
return function () {
let args = arguments
if (firstTime) {
fn.apply(this, args)
firstTime = false
return
}
if (timer) {
return false
}
timer = setTimeout(() => {
clearTimeout(timer)
fn.apply(this, args)
timer = null
}, interval)
}
}
// 防抖
function debounce (fn, interval) {
let timer
return function () {
let args = arguments
let later = function () {
clearTimeout(timer)
fn.apply(this, args)
timer = null
}
clearTimeout(timer)
timer = setTimeout(later, interval)
}
}
window.onresize = debounce(function() {
console.log(123)
}, 500)
复制代码- 什么是xss：跨站脚本漏洞（XSS）是一种将恶意 JavaScript 代码插入到其他Web用户页面里执行以达到攻击目的的漏洞, 跨站脚本攻击又分为 反射型XSS 、存储型XSS 以及 DOM型XSS 。
可能的输入点
1. URL 中的参数
2. HTTP 头中可控的部分
3. Cookie 内容
4. 表单
5. 数据库
6. 配置文件
7. 其它可被用户输入控制的地方
解决 XSS 安全问题最基本的两条原则：
用户输入的内容，过滤其中的特殊字符，如 "，'，<，>，&
输出给用户的内容，对其中包含的特殊字符进行转义，如 < 转为 < > 转为 >
给cookie设置httpOnly属性 脚本无法读取该Cookie,自己也不能用，非根本解决XSS
对url进行encoded
复制代码- 什么是csrf：你这可以这么理解CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账......造成的问题包括：个人隐私泄露以及财产安全。
链接 www.cnblogs.com/hyddd/archi…
例子
银行网站A，它以GET请求来完成银行转账的操作，如：http://www.mybank.com/Transfer.php?toBankId=11&money=1000
<img src=http://www.mybank.com/Transfer.php?toBankId=11&money=1000>
复制代码- 为什么用token做安全验证，因为token别人没法获取到，但是cookie可以，通过xss就可以拿到，执行一段脚本document.cookie就拿到cookie
- sessionStorage：关闭窗口sessionStorage才会消失，刷新数据还在
- cookie与sessionStorage、localStorage的区别
1、cookie可以在浏览器端与服务器端之间通信，是服务器端获取用户信息、保持一种持久客户端状态的关键。而sessionStorage、localStorage
虽然也可以保存会话数据，但是不能与服务器端进行信息交换。
2、cookie的容量比较小4k。而sessionStorage、localStorage 5M有较大的容量
3、试用的浏览器范围不同。由于sessionStorage与localStorage是HTML5标准推出的，所以在IE7以及IE7以下的版本不适用。替代方案是采用IE的userData.(有兴趣可以了解一下)
复制代码- 请说说在hybrid端实现类似原生般流畅的体验，要注意哪些事项？
1.资源加载，采用预加载，优先加载到内存中，做到无缝切换，使用原生loading
2.离线加载静态资源，不走网络请求
3.尽量做到局部更新，动画使用transform，will-change来提高性能
4.使用webkit over scrolling加速滚动条的滚动，去掉user selection，去掉高亮等，手势交互原生实现，复杂交互如日期选择器等调用原生组件
5.遵循APP UI设计规范
6.考虑文件diff更新，或主动后台请示，在某个时刻跟新，两个版本直接的兼容问题
7.APP方法加上安全性的考虑
复制代码- 事件触发的三个阶段
事件触发有三个阶段
document 往事件触发处传播，遇到注册的捕获事件会触发
传播到事件触发处时触发注册的事件
从事件触发处往 document 传播，遇到注册的冒泡事件会触发
事件触发一般来说会按照上面的顺序进行，但是也有特例，如果给一个目标节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。
注册事件
通常我们使用 addEventListener 注册事件，该函数的第三个参数可以是布尔值，也可以是对象。对于布尔值 useCapture 参数来说，该参数默认值为 false 。useCapture 决定了注册的事件是捕获事件还是冒泡事件。对于对象参数来说，可以使用以下几个属性
capture，布尔值，和 useCapture 作用一样
once，布尔值，值为 true 表示该回调只会调用一次，调用后会移除监听
passive，布尔值，表示永远不会调用 preventDefault一般来说，我们只希望事件只触发在目标上，这时候可以使用 stopPropagation 来阻止事件的进一步传播。通常我们认为 stopPropagation 是用来阻止事件冒泡的，其实该函数也可以阻止捕获事件。stopImmediatePropagation 同样也能实现阻止事件，但是还能阻止该事件目标执行别的注册事件。
复制代码- 回流和重绘
重绘和回流是渲染步骤中的一小节，但是这两个步骤对于性能影响很大。
1. 重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
2. 回流是布局或者几何属性需要改变就称为回流。
回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。
所以以下几个动作可能会导致性能问题：
- 改变 window 大小
- 改变字体
- 添加或删除样式
- 文字改变
- 定位或者浮动
- 盒模型
复制代码- 浏览器渲染页面过程与页面优化
链接：segmentfault.com/a/119000001…
由一道面试题引发的思考：
用户输入URL地址
浏览器解析URL解析出主机名
浏览器将主机名转换成服务器ip地址（浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服务器发送查询请求 同时缓存）
浏览器将端口号从URL中解析出来
浏览器建立一条与目标Web服务器的TCP连接（三次握手）
浏览器向服务器发送一条HTTP请求报文
服务器向浏览器返回一条HTTP响应报文
关闭连接 浏览器解析文档
如果文档中有资源 重复6 7 8 动作 直至资源全部加载完毕
页面渲染优化
HTML文档结构层次尽量少，最好不深于六层；
脚本尽量后放，放在前即可；
少量首屏样式内联放在标签内；
样式结构层次尽量简单；
在脚本中尽量减少DOM操作，尽量缓存访问DOM的样式信息，避免过度触发回流；
减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画；
动画尽量使用在绝对定位或固定定位的元素上；
隐藏在屏幕外，或在页面滚动时，尽量停止动画；
尽量缓存DOM查找，查找器尽量简洁；
涉及多域名的网站，可以开启域名预解析
复制代码- 请说一下在JS中this的完整取值规则?
this跟函数在哪里定义没有关系，函数在哪里调用才决定了this到底引用的是啥 2 this机制的四种规则
2.1 默认绑定全局变量,这条规则是最常见的，也是默认的。当函数被单独定义和调用的时候，应用的规则就是绑定全局变量。
2.2 隐式绑定 隐式调用的意思是，函数调用时拥有一个上下文对象，就好像这个函数是属于该对象的一样
2.3 显示绑定 学过bind()\apply()\call()函数的都应该知道，它接收的第一个参数即是上下文对象并将其赋给this。
2.4 new新对象绑定 如果是一个构造函数，那么用new来调用，那么绑定的将是新创建的对象
复制代码- 使用new后函数执行流程
1. 创建一个空对象，作为将要返回的对象实例
2. 将这个空对象的原型，指向构造函数的prototype属性
3. 将这个空对象赋值给函数内部的this关键字
4. 开始执行构造函数内部的代码,如果构造函数内部有return语句，而且return后面跟着一个对象，new命令会返回return语句指定的对象；否则，就会不管return语句，返回this对象。
复制代码- constructor
constructor属性定义的prototype对象上的，意味着可以被所有实例对象继承
class A{}
let a = new A;
a.constructor = A.prototype = A
复制代码- mouseenter和mouseover的区别
mouseenter不支持事件冒泡，mouseover支持事件冒泡
复制代码- current currentTarget区别
current:触发事件的某个具体对象，只会出现在事件流的目标阶段，谁触发谁命中
currentTarget:绑定事件的对象，恒等于this,可能出现在事件流的任意一个阶段中
复制代码- 什么是事件委托
什么是事件委托：利用事件传播机制，（触发当前元素的某一个行为，它父级所以会触发，如果一个容器中有很多个元素都需要绑定点击事件，我们没有必要一个外层容器绑定一个点击事件，在这个方法执行的时候，通过事件源不同来进行不同的操作，事件委托也叫事件代理）
复制代码- js数据类型
1.number;
2.string;
3.boolean;
4.undefined;
5.null;
6.symbol（ES6新增，文章后面有对着新类型的解释）Symbol 生成一个全局唯一的值。
7.Object.（包括Object，Array，Function）
复制代码- async await
函数前面多了一个aync关键字。await关键字只能用在aync定义的函数内。async函数会隐式地返回一个promise，该promise的reosolve值就是函数return的值。(示例中reosolve值就是字符串"done")
复制代码- 正则实现trim()功能
function myTrim(str) {
let reg = /^\s+|\s+$/g;
return str.replace(reg, "");
}
console.log(myTrim(' asdf '));
复制代码- js实现继承
1.使用原型继承（既继承了父类的模板，又继承了父类的原型对象。优点是继承了父类的模板，又继承了父类的原型对象，缺点就是父类实例传参，不是子类实例化传参，不符合常规语言的写法）
2.使用call的方式（继承了父类的模板，不继承了父类的原型对象。优点是方便了子类实例传参，缺点就是不继承了父类的原型对象）
复制代码- http状态语
状态码类别
1XX Informational(信息性状态码)
2XX Success(成功状态码)
3XX Redirection(重定向)
4XX Client Error(客户端错误状态码)
5XX Server Error(服务器错误状态吗)
2XX
200(OK 客户端发过来的数据被正常处理
204(Not Content 正常响应，没有实体
206(Partial Content 范围请求，返回部分数据，响应报文中由Content-Range指定实体内容
3XX 重定向
301(Moved Permanently) 永久重定向
302(Found) 临时重定向，规范要求方法名不变，但是都会改变
303(See Other) 和302类似，但必须用GET方法
304(Not Modified) 状态未改变 配合(If-Match、If-Modified-Since、If-None_Match、If-Range、If-Unmodified-Since)
307(Temporary Redirect) 临时重定向，不该改变请求方法
4XX 客户端错误
400(Bad Request) 请求报文语法错误
401 (unauthorized) 需要认证
403(Forbidden) 服务器拒绝访问对应的资源
404(Not Found) 服务器上无法找到资源
5XX 服务器端错误
500(Internal Server Error)服务器故障
503(Service Unavailable) 服务器处于超负载或正在停机维护
复制代码- 缓存
本地缓存阶段：先在本地查找该资源，如果有发现该资源，而且该资源还没有过期，就使用这一个资源，完全不会发送http请求到服务器；
协商缓存阶段：如果在本地缓存找到对应的资源，但是不知道该资源是否过期或者已经过期，则发一个http请求到服务器,然后服务器判断这个请求，如果请求的资源在服务器上没有改动过，则返回304，让浏览器使用本地找到的那个资源；
缓存失败阶段：当服务器发现请求的资源已经修改过，或者这是一个新的请求(在本来没有找到资源)，服务器则返回该资源的数据，并且返回200， 当然这个是指找到资源的情况下，如果服务器上没有这个资源，则返回404。
复制代码- 跨域
1. jsonp
<script>
function jsonp(data) {
console.log(data)
}
</script>
<script src="http://domain/api?param1=a¶m2=b&callback=jsonp"></script>
function jsonp(url, jsonpCallback, success) {
let script = document.createElement("script");
script.src = url;
script.async = true;
script.type = "text/javascript";
window[jsonpCallback] = function(data) {
success && success(data);
};
document.body.appendChild(script);
}
jsonp(
"http://xxx",
"callback",
function(value) {
console.log(value);
}
);
2. CORS：跨域资源共享
3. postMessage
复制代码- script标签的defer和async
defer和async是script标签的两个属性，用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。
在介绍他们之前，我们有必要先了解一下页面的加载和渲染过程：
1. 浏览器通过HTTP协议请求服务器，获取HMTL文档并开始从上到下解析，构建DOM；
2. 在构建DOM过程中，如果遇到外联的样式声明和脚本声明，则暂停文档解析，创建新的网络连接，并开始下载样式文件和脚本文件；
3. 样式文件下载完成后，构建CSSDOM；脚本文件下载完成后，解释并执行，然后继续解析文档构建DOM
4. 完成文档解析后，将DOM和CSSDOM进行关联和映射，最后将视图渲染到浏览器窗口
在这个过程中，脚本文件的下载和执行是与文档解析同步进行，也就是说，它会阻塞文档的解析，如果控制得不好，在用户体验上就会造成一定程度的影响。
所以我们需要清楚的了解和使用defer和async来控制外部脚本的执行。
在开发中我们可以在script中声明两个不太常见的属性：defer和async，下面分别解释了他们的用法：
defer：用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行。
async：HTML5新增属性，用于异步下载脚本文件，下载完毕立即解释执行代码。
复制代码- Event loop
浏览器的Event loop执行顺序
1. 执行同步代码，这属于宏任务
2. 执行栈为空，查询是否有微任务需要执行
3. 执行所有微任务
4. 必要的话渲染 UI
5. 然后开始下一轮 Event loop，执行宏任务中的异步代码
复制代码- Load 和 DOMContentLoaded 区别
Load 事件触发代表页面中的 DOM，CSS，JS，图片已经全部加载完毕。
DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析，不需要等待 CSS，JS，图片加载。
复制代码- 减少重绘和回流
1. 使用 translate 替代 top
2. 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
3. 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
4. CSS 选择符从右往左匹配查找，避免 DOM 深度过深
复制代码- 如何渲染几万条数据并不卡住界面
这道题考察了如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条都渲染出来，而应该一次渲染部分 DOM，那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次。
复制代码- 优化渲染过程
1. 懒执行：
懒执行就是将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化，对于某些耗时逻辑并不需要在首屏就使用的，就可以使用懒执行。懒执行需要唤醒，一般可以通过定时器或者事件的调用来唤醒。
懒加载：懒加载就是将不关键的资源延后加载。路由，图片懒加载
2. 文件优化：
1. 用css就不用图片
2. 小图使用 base64 格式
3. CSS 文件放在 head 中
4. 服务端开启文件压缩功能
5. 将 script 标签放在 body 底部
6. 执行 JS 代码过长会卡住渲染，对于需要很多时间计算的代码可以考虑使用 Webworker。
3. CDN：1. CDN节点解决了跨运营商和跨地域访问的问题，访问延时大大降低；
2. 大部分请求在CDN边缘节点完成，CDN起到了分流作用，减轻了源站的负载。
4. webpack优化：单独列出来
复制代码- webpack优化
webpack核心概念：
Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。
webpack.config.js：
entry：配置入口文件的地址
output：配置出口文件的地址
module：配置模块,主要用来配置不同文件的加载器
plugins：配置插件
devServer：配置开发服务器
优化
1. 配置别名alias，提高webpack查找速度，在resolve里
2. 把基础模块独立出来打包到单独的动态连接库里，可以采用多页打包的配置
3. Tree Shaking：可以用来剔除JavaScript中用不上的死代码。它依赖静态的ES6模块化语法，例如通过import和export导入导出。webpack4不需要配置
4. 提取公共代码
5. 使用动态导入和懒加载
6. 使用happypack提高打包速度
7. 给打包出来的文件名添加哈希，实现浏览器缓存文件
8. 在loader中加exclude和include
复制代码- babel-preset-env
babel preset将基于你的配置浏览器及运行环境，自动的确定babel插件及polyfills，转译ES2015及此版本以上的语言，注意stage-x 的插件不包括在内。
复制代码- 柯里化的定义
柯里化通常也称部分求值，其含义是给函数分步传递参数，每次传递参数后,部分应用参数，并返回一个更具体的函数接受剩下的参数，中间可嵌套多层这样的接受部分参数函数，逐步缩小函数的适用范围，逐步求解,直至返回最后结果。
函数柯里化就是对高阶函数的降阶处理。
柯里化简单的说,就是把 n 个参数的函数,变成只接受一个参数的 n 个函数
function add (a) {
var sum = 0
sum += a
return function(b) {
return sum += b
}
}
复制代码- tcp和udp区别
1。TCP是面向链接的，虽然说网络的不安全不稳定特性决定了多少次握手都不能保证连接的可靠性，但TCP的三次握手在最低限度上（实际上也很大程度上保证了）保证了连接的可靠性；
而UDP不是面向连接的，UDP传送数据前并不与对方建立连接，对接收到的数据也不发送确认信号，发送端不知道数据是否会正确接收，当然也不用重发，所以说UDP是无连接的、不可靠的一种数据传输协议。
2。也正由于1所说的特点，使得UDP的开销更小数据传输速率更高，因为不必进行收发数据的确认，所以UDP的实时性更好。
复制代码- tcp连接为啥需要3次握手，4次挥手
为什么需要三次握手? 确保双方收发都是正常的
为什么需要四次挥手? 双方数据发送完毕，都认为可以断开
复制代码- https原理
对称加密 + 非对称加密 + CA认证 这三个技术混合在一起
复制代码- 跨域
1.jsonp 需要目标服务器配合一个callback函数。
2.window.name+iframe 需要目标服务器响应window.name。
3.window.location.hash+iframe 同样需要目标服务器作处理。
4.html5的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage，主要侧重于前端通讯。
5.CORS 需要服务器设置header ：Access-Control-Allow-Origin。
6.nginx反向代理 这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求。
复制代码- Event loop
1. 执行同步代码，这属于宏任务
2. 执行栈为空，查询是否有微任务需要执行
3. 执行所有微任务
4. 必要的话渲染 UI
5. 然后开始下一轮 Event loop，执行宏任务中的异步代码
复制代码- css和js都会暂停dom的构建
- 深入理解HTML5标签
<nav>、<article>、<sections>、<aside> 、<footer>、<address>、<figure>、<time>
复制代码- gulp和webpack的异同
gulp: gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），
然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。
webpack: webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，
通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
复制代码- HTTPS和HTTP的区别主要如下：
1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
复制代码- 浏览器捕获异常的方式
try catch
window.onerror
复制代码- localstorage
另外，不同浏览器无法共享localStorage和sessionStorage中的信息。同一浏览器的相同域名和端口的不同页面间可以共享相同的 localStorage，但是不同页面间无法共享sessionStorage的信息。这里需要注意的是，页面仅指顶级窗口，如果一个页面包含多个iframe且他们属于同源页面，那么他们之间是可以共享sessionStorage的。在
复制代码- 微信支付坑
仅有公众号支付和扫码支付需配置支付域名，APP支付、刷卡支付无需配置域名；
所有使用JS API方式发起支付请求的链接地址，都必须在当前页面所配置的支付授权目录之下；
当公众平台接到扫码支付请求时，会回调当前页面所配置的支付回调链接传递订单信息；
支付授权目录最多添加5个
小程序支付无需配置授权目录。
复制代码- Object.defineProperty:
value: 属性对应的值,可以使任意类型的值，默认为undefined
writable：属性的值是否可以被重写。设置为true可以被重写；设置为false，不能被重写。默认为false。
enumerable：此属性是否可以被枚举（使用for...in或Object.keys()）。设置为true可以被枚举；设置为false，不能被枚举。默认为false。
configurable：是否可以删除目标属性或是否可以再次修改属性的特性（writable, configurable, enumerable）。设置为true可以被删除或可以重新设置特性；设置为false，不能被可以被删除或不可以重新设置特性。默认为false。
复制代码- get和post区别
GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。
复制代码- 加密算法
哈希算法：
1. 相同的输入会产生相同的输出
2. 不同的输出会产生不同的输出
3. 任意的输入长度输出长度是相同的
4. 不能从输出推算出输入的值
对称加密：对称的意思就是加密和解密使用的是同一个密钥。
非对称加密：
1. 非对称加密算法需要两个密钥：公开密钥(publickey)和私有密钥(privatekey)
2. 公钥与私钥是一对，如果用公钥对数据进行加密，只有用对应的私钥才能解密,如果私钥加密，只能公钥解密
复制代码- CORS原理
使用 CORS 跨域资源共享，是需要分成 预请求 与 非预请求 处理的。
非预请求，在服务器内，只需要简单设置：'Access-Control-Allow-Origin': '*
预请求，在服务器内，至少要设置三个 响应首部字段：
'Access-Control-Allow-Origin': ?,
'Access-Control-Allow-Methods': ?,
'Access-Control-Allow-Headers': 'Content-Type',
复制代码- JS异步之Async
1、await并不阻塞线程
2、async对异步错误处理是使用try/catch
3、使用Promise.all()可以将多个await操作并行
复制代码- 什么是pm2
强大的进程管理器，进程异常退出时pm2会尝试重启
内置的负载均衡器（使用nodecluster module）
以守护进程运行
0s(不间断)重启
为ubuntu/CentOS 提供启动脚本
关闭不稳定的进程（避免无限死循环）
基于控制台监控
HTTP API
远程控制以及实时监控接口
pm2使用nodecluster构建一个内置的负载均衡器。部署多个app的实例来达到分流的目的以减轻单app处理的压力。
复制代码- 什么是纯函数
一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数
复制代码- for in 和Object.keys()的区别
Object.keys()与for in区别在于不能遍历出原型链上的属性；
for of不支持遍历普通对象，
复制代码- JavaScript常见的内存泄漏原因
全局变量引起的内存泄漏
闭包引起的内存泄漏
dom清空或删除时，事件未清除导致的内存泄漏
复制代码- 定时器为什么是不精确的
因为setInterval的回调函数并不是到时后立即执行,而是等系统计算资源空闲下来后才会执行.而下一次触发时间则是在setInterval回调函数执行完毕之后才开始计时
复制代码- get和post
get请求一般只是向服务器请求数据（这是约定而成的），为了更快完成操作，会在本地缓存数据以便将来再次访问；
而post请求一般用于update/submit更新提交数据，所以此时缓存数据就显得很蠢了；
复制代码- b标签和strong标签的区别
b标签代表粗体
strong代表强调
复制代码- 虚拟DOM好处
js计算肯定要比DOM操作快啊，每次DOM操作都很有可能引起回流(Reflow)和重绘(Repaint)啊
组件的高度抽象化
可以更好的实现 SSR，同构渲染等
框架跨平台
复制代码- var a = {name: "前端开发"}; var b = a; a = null那么b输出什么
{name: "前端开发"}
复制代码- 并发请求资源数上限
并发请求资源数上限6个
复制代码- 性能优化：
一个http请求绝大多数的时间消耗在了建立连接跟等待的时间，优化的方法是减少http请求。
页面内部优化:样式表放在顶部、脚本文件放在底部、避免css表达式、把脚本的样式表放在外部、移除重复脚本
启用缓存:expires/If-Modified-Since、Cache-Control/Etag；前者是HTTP1.0中的缓存方案，后者是HTTP1.1中缓存方案，若http头部中同时出现二者，后者的优先级更高
减少下载量: 减少下载量最有效的方式就是开启gzip压缩
优化网络连接: 使用CDN加速、减少DNS查找、避免重定向
复制代码- 小程序里面开页面最多多少
5层
复制代码- 打包时Hash码是怎么生成的
配置chunkhash
复制代码- 数组方法
不改变原数组，返回新数组
concat, join, slice, map, every, some, filter
改变原数组
forEach, pop, push, reverse, shift, unshift, sort, splice
复制代码- webpack 的 loader 和 plugin
loader 用于加载某些资源文件。 因为webpack 本身只能打包commonjs规范的js文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。 这就需要对应的loader将资源转化，加载进来。从字面意思也能看出，loader是用于加载的，它作用于一个个文件上。
plugin 用于扩展webpack的功能。它直接作用于 webpack，扩展了它的功能。当然loader也时变相的扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域。而plugin的功能更加的丰富，而不仅局限于资源的加载。
loader 用于加载待打包的资源，plugin 用于扩展 webpack。
复制代码- HTTP2.0 与 HTTP1.0的区别
新的二进制格式（Binary Format），HTTP1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认0和1的组合。基于这种考虑HTTP2.0的协议解析决定采用二进制格式，实现方便且健壮。
多路复用（MultiPlexing），即连接共享，即每一个request都是是用作连接共享机制的。一个request对应一个id，这样一个连接上可以有多个request，每个连接的request可以随机的混杂在一起，接收方可以根据request的 id将request再归属到各自不同的服务端请求里面。
header压缩，如上文中所言，对前面提到过HTTP1.x的header带有大量信息，而且每次都要重复发送，HTTP2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，既避免了重复header的传输，又减小了需要传输的大小。
服务端推送（server push），同SPDY一样，HTTP2.0也具有server push功能。目前，有大多数网站已经启用HTTP2.0。
复制代码- cdn缓存
CDN缓存，也叫网关缓存、反向代理缓存。浏览器先向CDN网关发起WEB请求，网关服务器后面对应着一台或多台负载均衡源服务器，会根据它们的负载请求，动态地请求转发到合适的源服务器上。
复制代码- 虚拟dom为啥快
虚拟dom是在内存中维护的dom树，是在实体dom之上的一层抽象。有了这层抽象，不管是查询操作还是修改操作，都是先操作内存中的虚拟dom，在这个过程中可以做很多优化，从而减少对实体dom的操作。举两个例说明，1. 查询一个text标签的值，可以直接从虚拟dom中查找得到，根本不需要查询实体dom。2. 在一次操作中，要修改列表中的两条记录，要修改的元素会先把变更同步到虚拟dom上，然后根据最新的虚拟dom，一次性渲染出最终的实体dom，如果没有虚拟dom，两条记录的修改至少要对应两次对实体dom的操作，显然操作实体dom越频繁，网页速度越慢。
复制代码
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
