前言
日益复杂的前端页面使得前端性能优化越来越重要。
正文
1. 代码层优化
1.1 HTML优化
1.1.1 DOM优化
- 优化节点修改:使用
cloneNode
,克隆节点后修改节点,最后使用relpace替换原节点。 - 优化节点添加:创建
DocumentFragment
,一次添加新节点到DocumentFragment
。最后将DocumentFragment
挂载到父节点上。 - 优化css样式:动态更改css样式时优先使用更改
className
。或者使用style.cssText
一次性赋值css。 - 减少页面中的DOM元素数量,可以通过
document.getElementsByTagName( '*' ).length
获取页面中所有元素的数量 - 优化DOM操作:减少reflow和repaint次数,尤其是reflow。
- 减少DOM访问次数。多次访问时使用变量进行缓存
- 修改DOM样式时可以先将DOM
display:none;
再操作元素。
1.1.2 script标签引入
- 将
script
放在body
最后,防止javaScript
阻塞渲染 - 尝试使用
defer
方式异步加载script
- 使用CDN
1.1.3 CSS优化
- 优先渲染主体部分。重构HTML和CSS布局。比如使用双飞翼布局、圣杯布局
1.1.4 javaScript优化
- 使用前端缓存:
localStorage
,sessionStroage
等 - 使用web workers实现多线程
1.1.5 HTML
- 使用骨架屏
- 使用
lazy-load
加载图片 - 对大数据列表使用虚拟滚动的方式,减少DOM元素
1.2 CSS优化
- 避免使用通配符 *
- css选择器层级不要过深;后代选择器开销最高,应将选择器深度降到最低。
- 尽量避免使用标签选择器:css选择器是从右往左匹配,例如:
#app .container p{}
;会先匹配所有的p
标签。再匹配.container
,最后匹配#app
。 直接给p
标签添加class
更容易匹配,提升css
构建效率 - 避免在HTML中写style
- 使用link代替@import
1.3 javaScript代码优化
- 合理使用闭包
- 使用事件委托
- 及时销毁
setTimeout
,setInterval
- 合理使用全局变量,适时释放不必要的内存
- 使用
switch
语句代替else-if
- 使用节流和防抖
1.4 动画优化
- 尽量使用css3动画
- 使用requestAnimationFrame代替setTimeout
- 使用GPU加速
2. 构建工具优化
2.1 减少打包时间
- 优化loader
- 合理使用include,exclude
- 使用缓存:
loader: 'babel-loader?cacheDirectory=true'
- 多进行打包:happyPack
- 将不长更改的库提前打包使用DllPlugin
2.2 减小打包体积
- js代码压缩
- css压缩
- splitChunks分隔代码块
- 图片压缩
- 小图片转换base64
- ScopeHoisting
- TreeShaking
- 按需加载:
()=> import('index.js')
这里单独整理一篇文章 使用babel和webpack优化项目
3. http优化
3.1 DNS 和 TCP/IP
使用link标签预加载预解析
- dns-prefetch:
<link rel="dns-prefetch" href="https://baidu.com/" >
;提前进行dns预解析。 - preconnect:
<link rel="preconnect" href="https://baidu.com">
;提前建立tcp连接;https则建立TLS连接 - prefetch:
<link rel="prefetch" href="https://baidu.com/a.png">
;浏览器空闲时下载该资源 - prerender:
<link rel="prerender" href="https://baidu.com.com">
;提前渲染。浏览器会提前完成所有的资源加载,执行,渲染并保存在内存里。十分消耗浏览器资源,谨慎使用 - preload:
<link rel="preload" href="https://baidu.com/index.css">
;本质上是影响资源的加载顺序,把可能后置下载的资源前置下载。
3.2 http请求
- 优先使用keep-alive,保持长连接。
- 减少不必要的http请求,使用雪碧图
- 使用base64转码图片。减少http请求
- 开启gzip压缩
- 将静态资源单独部署一个服务器,减少请求静态资源时携带cookie
3.3 http缓存
- 合理使用http缓存机制,强缓存和协商缓存并用。
- spa应用一般将index.html,取消强缓存cacheControl: no-store 这里单独整理一篇文章 http缓存机制
4. 图片资源优化
- jpg:有损压缩,体积较小,一般用于大图背景或者轮播图
- png:无损压缩,体积大,质量高,可透明。一般用于logo
- svg:矢量图,体积小,放大缩小不失真
- base64:一般用于页面小的图标
- webp:支持透明,支持动态图片,支持有损压缩或无损压缩,但是兼容性较差
关注公众号
喜欢的同学可以关注公众号