网络层面
- DNS预解析
<` `link` `rel="dns-prefetch" href="//www.zhix.net"> - 开启Gzip压缩。nginx配置Gzip on；nodejs使用koa-compress中间件。
- 使用CDN
- 浏览器缓存，强缓存、协商缓存
- 雪碧图，多个小图标放到一个图片里使用background-position。或者webpack的url-loader将小的图片使用base64的方式
工程构建方面（webpack打包方面）
- 代码进行压缩，生产模式是直接打开的。
- webpack splitChunk，首页用不到的拆分出去，提高首页加载速度。第三方库代码单独打包可以有效利用缓存。
- Tree-shaking，不打包没有引用的代码，生产模式默认开启。
- 模块预加载prefetch，首页不用但之后需要使用并且比较大的模块
代码层面
- 按路由动态加载，组件通过import()动态导入。
- 懒加载：大量图片展示的页面，模板只加载可视区内的图片。
- 减少重排重绘：比如使用DocumentFragement不频繁修改Dom
- 事件委托：事件委托利用了事件冒泡，父节点监听。比如list每一项点击事件，react的合成事件机制。
- 防抖节流：按钮点击请求后端接口使用防抖，move事件节流
- vue中不需要响应式的数据定义在data外或者使用Object.freeze
- react里shouldComponentUpdate和pureComponent的使用减少渲染
- vue和react渲染列表合理使用key值，一般lint都有检测，使用后端id不使用index和随机值。
- 虚拟列表：大量的数据渲染只渲染可视区部分
- 大量计算逻辑的react使用useMemo、vue使用compounted。针对使用pureComponent的组件props传函数可以使用useCallback。
性能评测工具
netWork
整体图：可以看瀑布图
加载内容和渲染时间：
每个请求具体时间：
关注点：
- Queueing 排队时间
- Connection：创建TCP链接时间
- Request sent：发送请求时间
- Waiting(TTFB)：等待后端响应时间
- Content Download：资源下载时间
lighthouse
Lighthouse分析web应用程序和web页面，收集关于开发人员最佳实践的现代性能指标和见解，让开发人员根据生成的评估页面，来进行网站优化和完善，提高用户体验。
RAIL 性能模型
RAIL 是 response （响应）、 animation（动画）、idle（浏览器空置状态）和 load（加载）。
Response: 在100ms内响应用户的操作。虽说是100ms，但预算只有50ms，因为浏览器内部还有很多工作需要预留时间。
- 鼠标悬浮后展示功能，如果是有网络请求也要加loading动效。
Animation: 在使用动画时，需要保证有60FPS，换算下来也就是16ms处理1帧（1000ms/60FPS）才不会让用户感觉到卡顿。同样的，浏览器大概需要花费6ms来渲染1帧，因此只有10ms以内的时间。
- 动画、滚动页面、拖拽元素时保证FPS。
Idle: 最大化利用空闲时间，以便于可以在50ms内响应用户的操作。
- 案例是懒加载，react的fiber模型。
Load: 3g网络的情况下，首次加载需要在5s之内加载网站并可以让用户进行交互。而在后续的加载（有缓存的情况）中，则是2s。
