前端性能优化总结
一、前言
做成一件事并不难，难的是做好一件事。前端性能优化也是同样的道理，性能是前端编码规范、网络层面、辅助工具等相互作用的结果，这是一个兼顾广度和深度的问题，优化好了可以加快首屏加载速度提高用户留存率，节省服务器资源降低成本等，也是区分初高级前端工程师的重要标准。
二、优化目的与原则
1. 目的
- 让页面加载的更快
- 对用户操作响应更及时，为用户带来更好的使用体验
- 减少请求，降低服务器负荷，节省资源
2. 原则
- 优化要有理有据，不能凭空猜测
- 深入理解业务
三、页面及网络层优化
1. 前端编码规范化
这是平时工作注意好一些代码规范即可带来的性能优化，比如css放头部， js放在尾部等，是时间成本最低的性能优化方法。编码规范也涉及很多方面，html、css、js、Vue.js、React.js还有ESLint规范等，具体可查看：https://guide.aotu.io/index.html
2.网络层优化
(1) 连接重用：
Http/1.0每次请求都需要建立新的TCP连接，连接不能复用。Http/1.1新的请求可以在上次建立的tcp连接之上发送，连接可以复用，减少重复进行tcp三次握手，四次挥手的开销，提高效率。主要的思路是在发送http的请求头中设置Connection: keep-alive，当前的url与上一次下载的url之间进行对比，如果host相同的话，则用上一次的socket_id。否则关闭上一次的socket，重新连接服务器，获取新的socket。所以，url的文件，需要进行排序，将同一个站点的url放在一起即可。
(2) 内容合并、压缩：
JS、CSS 文件合并、服务器开启 gzip、雪碧图，通常需要借助一些工具，比如webpack进行打包，以及在线雪碧图生成器
(3) 缓存：
设置http请求头Cache-Control、ETag、Expires、Last-Modified等字段进行协商缓存、强制缓存等操作
(4) 使用CDN：
全称: Content Delivery Network或Content Ddistribute Network，即内容分发网络，能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。各个库比如Boostrap、Vue.js均有 CDN 链接
(5) 使用DNS prefech
使浏览器试图在用户访问链接之前解析域名,在head中添加对应属性即可，如下
(6) 多域名部署，动静分离
将 HTML、API 接口，静态资源等部署在不同的域名
(7) 使用 Http2
作用：二进制分帧、多路复用连接、服务端推送、头部压缩
(8) 借助Native 存储
这种方式不言而喻,就是把内容传递给native层,通过原生API存储，详见从零学React Native之05混合开发
3. JS 优化
(1) 局部变量
定义时若变量是一个对象，循环时需要频繁使用其一个属性，可再定义一个局部变量存储
(2) passive 事件修饰符
- 流水线的执行方式，后面的工作必须等待前面工作执行完成才能处理，无法将相互独立的工作并行处理。
- 内核线程负责的工作太多且耗时，一旦遇上内核在执行耗时较长的工作，用户的输入事件将无法立即得到响应。
很多移动端的页面都会监听 touchstart 等 touch 事件，由于 touchstart 事件对象的 cancelable 属性为 true，也就是说它的默认行为可以被监听器通过 preventDefault() 方法阻止，那它的默认行为是什么呢，通常来说就是滚动当前页面（还可能是缩放页面），如果它的默认行为被阻止了，页面就必须静止不动。但浏览器无法预先知道一个监听器会不会调用 preventDefault()，它能做的只有等监听器执行完后再去执行默认行为，而监听器执行是要耗时的，有些甚至耗时很明显，这样就会导致页面卡顿。视频里也说了，即便监听器是个空函数，也会产生一定的卡顿，毕竟空函数的执行也会耗时。有 80% 的滚动事件监听器是不会阻止默认行为的，也就是说大部分情况下，浏览器是白等了。所以，passive 监听器诞生了，passive 的意思是“顺从的”，表示它不会对事件的默认行为说 no，浏览器知道了一个监听器是 passive 的，它就可以在两个线程里同时执行监听器中的 JavaScript 代码和浏览器的默认行为了。passive设置为true可以大幅提高移动端的滑动流畅度
document.addEventListener(type, listener, {
capture: false, // 等价于以前的 useCapture 参数
passive: false, // Firefox 和 Chrome 已经实现
once: false // 表明该监听器是一次性的，执行一次后就被自动 removeEventListener 掉，还没有浏览器实现它
})(3) 开启多线程
使用Web Worker为JS创造多线程环境，主线程创建Worker线程，将一些计算密集型或高延迟的任务分配给后者运行
(4) Web Assembly
Web Assembly特别适合那些需要非常高性能的Web产品，提供了一种转换机制，把高级语言（C、C++、Go）编译为Web Assembly字节码，以便在浏览器中运行，能够大幅提高运行效率。 使用WebAssembly对浏览器API进行任何调用时，目前还需要JS进行交互，用JS作为入口。未来WebAssembly可能被浏览器内置支持，并使其能够直接调用DOM，Web Workers或其他浏览器API等
注意事项：同源限制、DOM 限制、不能读取本地文件、使用消息通信、不能使用alert、confirm、prompt
(5) 跨域接口优化
设置了Access-Control-Allow-Origin后，简单请求可以一次完成，复杂请求会多一次OPTIONS操作 1、人为设置了对CORS 安全的首部字段集合之外的其他首部字段。该集合为： –Accept –Accept-Language –Content-Language –Content-Type –DPR –Downlink –Save-Data –Viewport-Width –Width 2、请求头Content-Type 的值不属于下列之一: –application/x-www-form-urlencoded –multipart/form-data –text/plain
(6) Canvas 优化
- 避免浮点数的坐标点，用整数取而代之
- 在离屏canvas上预渲染相似的图形或重复的对象
- 不要在用drawImage时缩放图像
- 使用多层画布去画一个复杂的场景
- 用CSS设置大的背景图
- 不需要透明度时关闭alpha通道
- 渲染画布中的不同点，而非整个新状态
- 谨慎使用大型物理库
4.CSS 优化
(1) 选择器优化
注意优先级，慎用!important，样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。
写法注意点：
- id选择器肯定是最快，但是不要在ID选择器使用的同时再使用标签或类选择器了
- 不要使用类选择器时用标签选择器
特别是
for循环中js编写html代码时直接定义样式类名到所需要作用的元素，之后尽量用一个选择器写样式，可以大幅提高渲染效率
- 如果明确dom结构，优先使用子选择器，减少后代选择器使用
- 使用类选择器替代后代选择器和子选择器
- 避免使用通配符选择器（*）和属性选择器
(2) 谨慎使用 CSS3 特性
CSS3一些新特性能带来酷炫的视觉效果，但对设备性能有一定要求
- border-radius
- gradient
- box-shadow
- box-reflect
- text-stroke，text-fill
5. 常用优化辅助工具
(1) Performance API
Performance API用于精确度量浏览器的性能表现，它能提供微秒级的时间。
- performance.timing
- performance.now
- performance.mark
- performance.measure
- performance.getEntries
计算setTimeout设置1s延迟执行的实际时间
(2) chrome 的Performance 面板、Network面板、Audit面板
(3) PWA
Progressive Web App，由Google 在2016年提出。PWA并不是单指某一项技术，可以把它理解成是一种思想和概念，目的就是对标原生app，将Web应用通过一系列的技术去优化它，提升其安全，性能，流畅性，用户体验等各方面指标，最后达到像在用app一样的感觉。
