关于前端性能问题，我们可以大体上分三类进行说明。

1. 网络请求，资源加载问题

在我们日常开发中，最常遇到的就是网络请求慢带来的页面性能问题。

静态资源问题，需要从构建、打包、部署角度出发，减小资源大小，合理利用缓存，CDN 多点内容分发。

数据接口问题，需要我们前端人员及时找中后台开发进行协商，更合理的调用数据接口。

• 静态资源采用 CDN 加速
• 首屏加载，非必要资源懒加载，第三方模块按需加载，tree shaking
• 资源加载过程中，友好提示，骨架屏等措施
• 数据量大时，切片加载
• 多个数据接口合并，合理使用同步异步接口顺序
• 项目打包，减小单文件的大小，通常小于 500kb，视情况做调整
• 资源压缩，合理拆分与合并
• 所用域名尽可能统一，减少 DNS 解析，一个域名一次最多发出 6 个请求，PC 端 2-4 个，移动端最好 2 个，因为移动端的 DNS 解析比较慢

2. 浏览器渲染，交互问题

这类的问题，主流框架层次已经帮我们优化很多了

• 虚拟 DOM，减少频繁直接操作 DOM 的开销
• 核心样式提前加载，减少浏览器回流重排
• 交互事件集中处理，避免冗余事件的触发调用

3. 规范编码，编码技巧问题

• vue 中，处理大数据量表格数据时，可使用 Object.freeze() 进行优化，由于每次更新数据都是全量替换，因此我们没必要对每个数据的属性进行依赖追踪，采用 Object.freeze()可以冻结该数组对象，防止 vue 对其进行响应式改造。
• 及时销毁，当我们声明了一些定时器、监听器、DOM 对象时，应在合适的时机进行销毁操作，减少资源的占用
• 合理使用数组函数，减少遍历次数，注意哪些是改变原数组的，哪些又会生成新的数组

代码规范，风格统一，简洁大方

• 通用的 css,js 合并，小文件合并，减少请求并发数，同时也要注意拆分过大文件
• style 要合理运用，优先考虑可维护性

利用 Google 开发者工具的 Coverage 查看无用的代码

用 CSS 替换图片

img {
    -webkit-filter: grayscale(100%);
    /* old safari */
    filter: grayscale(100%);
}

精灵图的使用

gzip 压缩

减少 HTTP 请求次数，DNS 查询次数

加载顺序

• 将 CSS 放在 HEAD 中
• 将外部脚本置底

HTTP 缓存过期时间

• 不同文件使用不同的缓存策略