前端优化是面试中高频问题，面试官可以通过这个问题考察面试者的前端功底。对于一个工作几年的前端工程师来说，做的事情无时无刻不体现性能，比如说打包项目的时候，学某个知识的时候为了性能这么去做，在学 http 的时候为了性能，应用某个技术的时候为了体验更流畅。
接下来我分项目打包构建阶段、资源加载阶段、页面展示阶段、使用体验流畅阶段 分四个阶段总结如何提升性能。
打包构建阶段
开发的过程中用到的构建工具，构建的时候需要快，不然写完代码后编译个 5 分钟，再改动个代码打包个 5 分钟，这也太慢了。
- 并发构建
- 打包的时候使用插件，多进程进行
- 过滤不相关的目录
- 使用缓存
资源加载阶段
打开一个网页，资源的下载速度要快。
- 资源压缩
- 使用 Webpack 去做资源的压缩
- 路由懒加载
- 当路由访问的时候才加载对应的组件，把组件按组分块。
- 图片懒加载
- 访问图片的时候按需加载
- 文件越少越好
- 等同于请求越少越好，资源的合并
- 资源距离越近越好
- 把静态资源放在 cdn 上
- 图片压缩
- 目前常用的是 svg 图标，需要对 svg 进行合并。
页面展示阶段
资源下载后，需要渲染的速度要快。
- css 在上，js 在下
- 不重要的资源使用 async 和 defer 属性异步加载
使用流畅阶段
渲染之后，用户会有一些操作，滚动页面、可见的动画，希望页面流畅、不卡顿。
