前端性能优化

Hongxu 6月 17, 2019

前端性能优化

【前言】
之前面试一直被问到一个问题就是前端有哪些性能优化的点，但是每次回答自己都觉得不满意 ( 1. 回答不完整，有所遗漏 2. 回答没条理，想到哪就说到哪 )
故开此一篇梳理一下。

具体优化方向可以根据浏览器 performance api 结合 Chrome DevelopTool Performance 面板进行分析

这里就介绍一些通用的优化技巧

网络层

减少不必要的网络请求造成的延迟，等待等问题

1. 静态资源部署到 CDN (Content Delivery Network)

2. DNS Prefetch

由于浏览器对单个域名的最大并发连接数有一定的限制（HTTP/1.0 和 HTTP/1.1）所以有的网站会对资源的域名做拆分以达到最大的请求数优化，这就导致需要对这些不同的域名需要做多次 DNS 解析。DNS 请求需要的带宽非常小，但是延迟却有点高，这点在手机网络上特别明显。预读取 DNS 能让延迟明显减少一些，例如用户点击链接时。在某些情况下，延迟能减少一秒钟。

dns-prefetch 可以让浏览器对相应的域名做预解析处理，提升加载速度。

打开和关闭 DNS Prefetch

<meta http-equiv="x-dns-prefetch-control" content="on">
<meta http-equiv="x-dns-prefetch-control" content="off">

强制查询特定主机名

<link rel="dns-prefetch" href="//www.example.com">

同类的标签属性还有 Preload, Prefetch

3. 合理设置缓存

因为缓存的问题比较广泛，这里只提一下，后续更新

4. 减少 HTTP 请求

合并 js/css
雪碧图
base 64 图片
iconfont
延时加载
避免空 href 和 src

5. 减少资源体积

gzip 压缩
html/css/js 压缩
图片压缩
图片服务器动态响应

6. 减少页面重定向

7. 域名切分

如 #2 描述但是只限 HTTP/1.0 HTTP/1.1 下有意义， HTTP/2.0 后反而会影响页面加载速度

浏览器解析渲染

1. 合理的 HTML 结构

css 头部加载，js放在尾部
避免内联样式
避免使用 @import 加载 css

2. 合理使用异步脚本加载和动态脚本加载

3. 触发 GPU 渲染加速

代码方面

1. DOM 操作优化（访问 DOM 时耗性能以及避免重排）

避免频繁操作 DOM
用 className 代替内联样式修改
先设置元素为 display：none； 然后进行页面布局等操作；设置完成后将元素设置为 display：block； 这样的话就只引发两次重绘和重排
不要经常访问浏览器的 flush 队列属性；如果一定要访问，可以利用缓存。将访问的值存储起来，接下来使用就不会再引发回流
将需要多次重排的元素 position 属性设为 absolute 或 fixed，元素脱离了文档流，它的变化不会影响到其他元素
如果需要创建多个 DOM 节点，可以使用 DocumentFragment 创建完后一次性的加入 document
避免强制同步布局和布局抖动
尽量不要使用 table 布局
尽量使用 css 动画
使用 requestAnimationFrame 代替 setInterval、setTimeout 操作
适当使用 canvas
尽量减少 css 表达式的使用

前端性能优化

网络层

1. 静态资源部署到 CDN (Content Delivery Network)

2. DNS Prefetch

3. 合理设置缓存

4. 减少 HTTP 请求

5. 减少资源体积

6. 减少页面重定向

7. 域名切分

浏览器解析渲染

1. 合理的 HTML 结构

2. 合理使用异步脚本加载和动态脚本加载

3. 触发 GPU 渲染加速

代码方面

1. DOM 操作优化（访问 DOM 时耗性能以及避免重排）

2. 使用事件委托

3. 使用局部变量

4. 避免长作用域链

5. 高效存储数据

Q&A

参考文档