Web前端性能优化概述

此文用于快速回顾,不适合用来入门。如果想做一个系统性的归纳总结、以便查询,可以参考以下概述。

性能优化的指导思想:

  • 先从辅助工具入手 并且 先从性能瓶颈入手
    • 现在的辅助工具强大到会提示你如何进行优化,你可以参考着来一项一项做就行了
    • 很多性能优化的手段是相互矛盾的,所以要抓住瓶颈和重点,舍弃掉收效不明显的手段
    • 性能优化是一项庞大的工作量,出于对工期的考虑,建议抓住瓶颈和重点
  • 不要过早优化
    • 很多性能优化的手段是相互矛盾的,在编写新功能阶段过早优化可能会造成返工和工作时间的浪费
    • 返工的过程又可能引入bug
  • 不要为了优化而优化:在迭代中,等到测试人员或者用户对性能不满意,才去优化
    • 如果你的网站性能,优化到能令用户满意,就不用无端作死追求极致的性能
    • 性能优化难有终点和尽头,尤其是多人协作项目,如果追求极致优化通常会引入隐性的问题和bug

性能优化概述

刚刚提到“先从辅助工具入手,先从性能瓶颈入手”,这才是工作中性能优化的思路。

而如果是面试找思路回答这个问题,或者想做一个系统性的归纳总结、以便查询,可以参考以下概述:

(下面列表的5个根节点其实就是5个大的方向)

  • 资源预加载
    • w3c Resource Hints:dns预解析、TCP预连接、资源预加载。有一些标签属性已经可以很好的做到这些,如 dns-prefetch & preconnect & preload & prefetch & prerender(慎用)。
    • 其他preload的方案或者xxx-loadable库,比如已经快过时的react-loadable库可以在懒加载时预加载。
  • 减小网络传输文件体积
    • gzip
    • webpack打包策略 BundleAnalyzerPlugin 或者执行vue ui来分析
      • 抽离公共模块
      • 专门把js库放到cdn上,然后引用,这样就不用打包这部分了 【不一定有效,毕竟通常库都是按需引入的】
    • 按需引入模块
      • 利用webpack按需引入
    • 取代Cookies + Cookie free (减小http包体积)
    • js、css打包压缩
    • 减少字体体积
    • 压缩html
    • 图片格式和压缩
      • 雪碧图(更新起来麻烦,以前才流行):减少http请求次数。webpack-spritesmith
      • picture标签和srcset
      • (图片格式选择:)
        • CSS代替图片(减少dom):image-background和border-image等
        • 色彩丰富的小图用png(支持透明)
        • 大图(背景图、轮播图)要用jpg:体积小,不支持透明
        • webp 但兼容性不是那么好,需要调研一下
          • 微信基本用的是webp
        • svg:矢量图体积小,因为是标签需额外的计算,只不过不用网络请求:比如icon-font
        • base64:在webpack打包的时候file-loader自动把小图转成base64
  • 减少网络传输数量和次数
    • http缓存,合理设置客户端缓存时间、利用好强缓存协商缓存
    • 数据缓存
      • (cookie localstroage, sessionStroage等本地存储)
      • 如果频率比较高的话改用redis存图片
    • 页面懒加载和图片懒加载
      • vue-lazyload
      • 图片异步懒加载
    • 避免空的src和href
    • http keep-alive(也称为“长连接”)
    • 利用文件打包来控制个数和大小和按使用频率分包
      • 比如dllPlugin 【大后期】
        • 一般是项目的大后期才用得到,收益是减小打包时间和精细化按使用频率分包提高对缓存的利用
        • 而一开始建项目可以用它来处理vue和react这种代码变动频率较低的大包
  • 减少途经的服务器数量和网络路径长度
    • cdn
      • 域名分片:即域名发散。规避浏览器对一个域名的并发数限制
      • 域名收敛:http2多路复用,多个http间复用tcp
      • 动静分离:index.html部署在自己服务器,静态资源借助cdn。同时可以实现静态资源cookie-free
  • 少执行代码 和 缩短代码执行时间
    • --------- 【 浏览器宏观层面: 】 ---------
    • 处理阻塞css、js,异步加载组件或css、js
      • (css)critical和其webpack插件
    • 首屏临时显示各种的loading提示 或者懒加载
      • 无限滚动懒加载列表
      • 骨架屏:vue-skeleton-webpack-plugin
      • 首屏简单loading动画
      • NProgress 顶部加载进度条
    • 减少DOM显示数
      • (一个长度10000的商品列表,怎么显示)(移动设备内存存储数据过多dom也会崩掉)
      • 虚拟列表
        • (其实就保留三屏的列表,自制组件库scoll组件也面临这个性能问题)
        • vue-virtual-scroller和react-virtualized等等
    • 减少dom操作的次数
    • 减少重排重绘 (和避免强制重排强制重绘)
    • 事件委托
    • web workers分担主线程的“任务”
    • 提高css选择器的效率
    • 慎重选择高性能消耗的css样式
      • box-shadows
      • border-radius
      • transparency
      • transforms
      • CSS filters(性能杀手)
    • --------- 【 代码逻辑层面: 】 ---------
    • 防抖节流
    • 算法优化
      • 排序算法的优化等等
    • 基于框架运行机制的优化:vue react:组件重新渲染机制等等
文章目录
  1. 性能优化的指导思想:
  2. 性能优化概述