前端性能优化

204 阅读3分钟

前言

日益复杂的前端页面使得前端性能优化越来越重要。

正文

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样式时可以先将DOMdisplay:none;再操作元素。

1.1.2 script标签引入

  • script放在body最后,防止javaScript阻塞渲染
  • 尝试使用defer方式异步加载script
  • 使用CDN

1.1.3 CSS优化

  • 优先渲染主体部分。重构HTML和CSS布局。比如使用双飞翼布局、圣杯布局

1.1.4 javaScript优化

  • 使用前端缓存:localStoragesessionStroage
  • 使用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:支持透明,支持动态图片,支持有损压缩或无损压缩,但是兼容性较差

关注公众号

喜欢的同学可以关注公众号