Web前端性能优化概述

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

性能优化的指导思想：

先从辅助工具入手
- 现在的辅助工具强大到会提示你如何进行优化，你可以参考着来一项一项做就行了
先从性能瓶颈入手
- 很多性能优化的手段是相互矛盾的，所以要抓住瓶颈和重点，舍弃掉收益不明显的手段
- 性能优化是一项庞大的工作量，出于对工期的考虑，建议抓住瓶颈和重点
不要过早优化
- 很多性能优化的手段是相互矛盾的，在编写新功能阶段过早优化可能会造成返工和工作时间的浪费
- 返工的过程又可能引入bug
不要为了优化而优化：在迭代中，等到测试人员或者用户对性能不满意，才去优化
- 如果你的网站性能，优化到能令用户满意，就不用无端作死追求极致的性能
- 性能优化难有终点和尽头，尤其是多人协作项目，如果追求极致优化通常会引入隐性的问题和bug
基于业务场景数量关系：在纯技术角度的性能优化达到瓶颈之后，尝试基于业务进行性能优化。
- 即，根据监控系统的数据分析，xxx量（比如展示商品数量）和 xxx性能指标（比如首屏渲染耗时）之间的关系，看看有没有飙升或者升到一个不合理的范围。

性能优化概述

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

而如果是面试找思路回答“性能优化”这个问题，或者想做一个系统性的归纳总结、以便查询，可以参考以下概述：(划分的思路还算比较“正交”)

资源预加载
减少网络传输数量和次数
减小网络传输文件体积
减少途经的服务器数量和网络路径长度
少执行代码和缩短代码执行时间

(下面列表的5个根节点其实就是这5个大的方向。详细展开如下：)

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