前端性能优化10个方面

Posted 消逝的回憶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端性能优化10个方面相关的知识,希望对你有一定的参考价值。

前端性能优化10个方面

转载文章:前端性能优化10个方面 作者:等风来 博客园
1.加载优化
  1. 压缩合并
  2. 代码分割(code spliting),可以基于路由或动态加载
  3. 第三方模块放在CDN
  4. 大模块异步加载,例如: Echarts,可以使用require.ensure,在加载成功后,在显示对应图表
  5. 小模块适度合并,将一些零散的小模块合并一起加载,速度较快
  6. 可以使用pefetch预加载,在分步场景中非常适合
2.图片优化
  1. 小图使用雪碧图,iconFont,base64内联
  2. 图片使用懒加载
  3. webp代替其他格式
  4. 图片一定要压缩
  5. 可以使用的img的srcset,根据不同分辨率显示不同尺寸图片,这样既保证显示效果,又能节省带宽,提高加载速度
3. css优化
  1. css写在头部
  2. 避免css表达式
  3. 移除空置的css规则
  4. 避免行内style样式
4.js优化
  1. js写在body底部
  2. js用defer放在头部,提前加载时间,又不阻塞dom解析
  3. script标签添加crossorigin,方便错误收集
5.渲染优化
  1. 尽量减少reflow和repaint,涉及到样式,尺寸,节点增减的操作,都会触发reflow和repaint。

    1.1 用变量缓存dom样式,不要频繁读取
    1.2 通过DocumentFragment或innerhtml批量操作dom
    1.3 dom隐藏,或复制到内存中,类似virtual dom,进行修改,完成后再替换回去
    1.4 动画元素一定要absolute,脱离文档流,不影响其他元素。动画不要用left,top等操作,要使用transform和opacity,同时开启渲染层(will-change或translate3d(0,0,0))
    1.5 动画尽量用requestAnimationFrame,不要用定时器
    1.6 移动端硬件加速,触发GPU渲染,还是translate3d(0,0,0)

  2. 尽量用css动画代替js动画,canvas动画代替js动画
  3. 初始渲染,可以使用骨架屏或loading,提升体验
  4. PWA,可以本地缓存资源,提升体验
  5. 频繁触发的事件,防抖、节流,例如:scroll,input等
  6. 长列表,使用分页或滚动加载,虚拟列表,移除屏外dom
6.首屏优化

原则:显示快,滚动流畅,懒加载,懒执行,渐进展现

  1. 代码分离,将首屏不需要的代码分离出去
  2. 服务端渲染或预渲染,加载完html直接渲染,减少白屏时间
  3. DNS prefetch,使用dns-prefetch减少dns查询时间,PC端域名发散,移动端域名收敛
  4. 减少关键路径css,可以将关键的css内联,这样可以减少加载和渲染时间
7.打包优化

主要是webpack优化

  1. 拆包 externals dllPlugin
  2. 提取公共包 commonChunkPlugin或splitChunks
  3. 缩小范围 各种loader配置include和exclude,noParse跳过文件
  4. 开启缓存 各种loader开启cache
  5. 多线程加速 happypack或thead-loader
  6. tree-shaking ES模块分析,移除死代码
  7. Scope Hoisting ES6模块分析,将多个模块合并到一个函数里,减少内存占用,减小体积,提示运行速度
  8. webpack长缓存优化

    8.1 js文件使用chunkhash,不使用hash

    8.2 css文件使用contenthash,不使用chunkhash,不受js变化影响

    8.3 提取vendor,公共库不受业务模块变化影响

    8.4 内联webpack runtime到页面,chunkId变化不影响vendor

    8.5 保证module Id稳定,不使用数字作为模块id,改用文件内容的hash值,使用HashedModuleIdsPlugin,模块的新增或删除,会导致其后面的所有模块id重新排序,为避免这个问题

    8.6 保证chunkhash稳定,使用webpack-chunk-hash,替代webpack自己的hash算法。webpack自己的hash算法,对于同一个文件,在不同开发环境下,会计算出不用的hash值,不能满足跨平台需求。

8.vue优化
  1. 路由懒加载组件
  2. keep-alive缓存组件,保持原显示状态
  3. 列表项添加key,保证唯一
  4. 列表项绑定事件,使用事件代理(v-for)
  5. v-if和v-for不要用在一个标签上,它会在每个项上进行v-if判断

9. react优化

  1. 路由组件懒加载,使用react-loadable
  2. 类组件添加shouldComponent或PureComponent
  3. 函数组件添加React.memo
  4. 列表项添加key,保证唯一
  5. 函数组件使用hook优化,useMemo,useCallback

10. SEO优化

  1. 添加各种meta信息
  2. 预渲染
  3. 服务端渲染

以上是关于前端性能优化10个方面的主要内容,如果未能解决你的问题,请参考以下文章

前端性能优化

前端Vue项目打包性能优化方案

前端开发代码结构及性能优化大总结

前端性能优化:细说JavaScript的加载与执行

前端性能优化方面建议

打个总结:Web性能优化