前端性能优化

Author Avatar
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 属性设为 absolutefixed,元素脱离了文档流,它的变化不会影响到其他元素
  • 如果需要创建多个 DOM 节点,可以使用 DocumentFragment 创建完后一次性的加入 document
  • 避免强制同步布局和布局抖动
  • 尽量不要使用 table 布局
  • 尽量使用 css 动画
  • 使用 requestAnimationFrame 代替 setIntervalsetTimeout 操作
  • 适当使用 canvas
  • 尽量减少 css 表达式的使用
2. 使用事件委托
3. 使用局部变量
4. 避免长作用域链
5. 高效存储数据

Q&A

  • 浏览器缓存
  • Performance

参考文档

Resource Hints
MDN DNS 预读取