共计 1672 个字符，预计需要花费 5 分钟才能阅读完成。
前言
性能优化无非就是让页面的打开速度更快一些，以得到更好的用户体验。前端在这方面可以做到的有两方面，页面级别的优化，比如减少 Http 请求次数、加快资源的加载速度；二是代码级别的优化，页面重新渲染一次会经过浏览器的重排（reflow）和重绘(repaint)，这两部操作是非常耗时的，本文将根据这两方面的优化途径，大致总结一下。
页面级别优化
1. 减少 HTTP 请求数
首先，每个请求都是有成本的，既包含时间成本也包含资源成本。一个完整的请求都需要经过 DNS 寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个“漫长”而复杂的过程。时间成本就是用户需要看到或者“感受”到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。另外，由于浏览器进行并发请求的请求数是有上限的 (具体参见此处)，因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象，即使可能用户能看到的第一屏的资源都已经请求完了，但是浏览器的进度条会一直存在。
减少 http 请求次数的主要方法：
设置 HTTP 缓存
http 缓存是 web 性能优化中非常重要的一种手段，把一些常用资源在首次加载时缓存到浏览器本地，再次加载时可大大减少请求次数，缓存的资源越多，性能当然越好。
缓存的规则主要有两种，强制缓存和对比协商缓存，两种缓存分别通过 Http 报文头部不同的字段进行控制。
具体缓存规则参照这里 或者 这里。
资源合并压缩
CSS、Javascript、Image 都可以用相应的工具 (Webpack) 进行压缩，压缩后往往能省下不少空间。
CSS Sprites
合并 CSS 图片，减少请求数的又一个好办法。
懒加载
这条策略实际上并不一定能减少 HTTP 请求数，但是却能在某些条件下或者页面刚加载时减少 HTTP 请求数。
2. 把 js 脚本置底加载
js 脚本是很容易形成阻塞，导致资源加载停滞，为了避免这种情况，先加载其他资源，最后加载脚本。
3. inline 脚本异步执行
inline 脚本与外链引用的脚本类似，也有可能会引起阻塞，所以也要将 inline 脚本放到页面底部或者异步方式来加载，例如使用 script 标签的 defer 和 async 属性、使用 setTimeOut。
4. 动态加载 js 模块
5. css 放在 head 中
页面渲染过程还要经历重绘重排，这样做是避免会出现 DOM 加载完之后却没有样式的情况。
代码级别优化
DOM 操作应该是脚本中最耗性能的一类操作，例如增加、修改、删除 DOM 元素或者对 DOM 集合进行操作。
而修改 DOM 会引起网页的重新渲染。
重新渲染，就需要重新生成布局和重新绘制。前者叫做 ” 重排 ”（reflow），后者叫做 ” 重绘 ”（repaint）。
需要注意的是，” 重绘 ” 不一定需要 ” 重排 ”，比如改变某个网页元素的颜色，就只会触发 ” 重绘 ”，不会触发 ” 重排 ”，因为布局没有改变。但是，” 重排 ” 必然导致 ” 重绘 ”，比如改变一个网页元素的位置，就会同时触发 ” 重排 ” 和 ” 重绘 ”，因为布局改变了。
这这两步只是网页生成的最后两部，关于页面的生成过程，主要有五步：
1. HTML 代码转化成 DOM
2. CSS 代码转化成 CSSOM（CSS Object Model）
3. 结合 DOM 和 CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
4. 生成布局（layout），即将所有渲染树的所有节点进行平面合成
5. 将布局绘制（paint）在屏幕上
这五步里面，第一步到第三步都非常快，耗时的是第四步和第五步。
“ 生成布局 ”（flow）和 ” 绘制 ”（paint）这两步，合称为 ” 渲染 ”（render）。
具体技巧参照 http://www.ruanyifeng.com/blo…。
最后
本文主要从页面和代码两个层面分析提高性能的方案，其中还有很多细节和其他技巧，后续慢慢完善补充。
参考链接：https://blog.csdn.net/w2326ic…https://blog.csdn.net/w2326ic…https://www.cnblogs.com/cherr…
