每一位前端开发同学在面试的时候，都会有50%的几率会被问：你是如何做前端性能优化的？
下面说一说我是怎么回答的？
储备知识
- webpack打包
- 服务端渲染
- http缓存
- 浏览器本地缓存
下面我会以第一人称的角度，配合文本排版进行回答
面试官：你是如何做性能优化
我：针对前端性能优化，我做过一些总结，一共有三点：
- 第一次访问时的优化（把第一次的加载速度变快）；
- 第n次访问时的优化（把已经访问过的资源缓存）；
- 让用户感觉很快，很流畅（通过交互手段优化体验）；
第一次访问优化的方式有哪些？
我：第一次访问的时我们优化的主要目的是【加快渲染的速度】、一般我们会使用webpack将资源较大的文件进行压缩或者拆分，压缩一般可以使用uglifyjs去压缩js文件，使文件体积变小;
我：如果此时文件依然很大，我们也可以使用webpack插件来拆分第三方库（不需要记住名字，知道有相关插件即可）
我： 至于图片、图标等资源同样可以在webpack中进行配置，将一定大小的文件转换成base64、或者使用阿里的字体图标库进行图标的渲染
如果想做SEO的优化，也可以采用服务端渲染的方式来加快首屏渲染的速度；
- 通过webpack进行资源压缩
- 通过webpack进行资源拆分
- 图片/图标资源的处理
- 服务端渲染
资源的压缩与拆分
1. 使用webpack插件压缩（html、js、css）资源
- 压缩html的方式：HtmlWebpackPlugin
- 压缩js的方式：uglifyjs-webpack-plugin
- 压缩css的方式：optimize-css-assets-webpack-plugin
- 除了使用插件以外也可以在服务端开启GZIP进行资源压缩
2. 如何进行资源拆分？
- 通过webpack插件：CommonsChunkPlugin、Dllplugin 、DllReferencePlugin、SplitChunksPlugin（webpack4内置） 进行压缩
- 路由的异步加载 import(/* webpackChunkName:${name} */ $ {path})
3. 图片/图标资源的处理
- 通过webpack将一定大小范围内的图片处理成base64
- 图标类的图片，可使用阿里的iconfont处理为字体图标
- 雪碧图（比较老的方法，不建议了）
4. 服务端渲染
- 无需等待页面加载js，直接将服务端渲染好的页面返回
- SEO优化
第n次访问优化的方式有哪些？
我：一般情况下，访问过的页面/资源，想要在后面访问时加快访问速度，可以想到的方式是利用缓存或本地存储;
我：前端本身我们可以通过不同的业务逻辑利用localStorage或sessionStorage 就可以了
我：如何涉及到服务端，我们也可以采用http的缓存，一般有两种方式，一个是强缓存、另一个是协商缓存，强缓存的优先级高于协商缓存，我们可以通过相关key去设置缓存时间（那么多属性不一定记得住，但一定要知道有这个东西）
除了本地存储和http缓存，也可以尝试采用indexDB去做前端的数据存储
除了indexBD，Service workers也可以作为缓存方案
-
浏览器本地缓存
-
http缓存
-
indexDB
-
Service workers
帮助大家的传送门：
如何让用户感觉很快
我：让用户感觉很快，顾名思义，就是并没有实际上的提升速度，而是优化了用户体验，我可以采用骨架屏、懒加载、合理loading，防抖、节流（减少不必要的请求）等方式让用户的等待变得舒服
- 骨架屏、懒加载
- loading优化
- 防抖、节流
- 等等等
以上就是我个人在面试中回答性能优化问题的是常用回答方式，通过以上的回答，也可以衍生出webpack的相关问题、http缓存的相关问题，http/https相关问题，闭包问题等