我在面试时是如何回答“前端性能优化”的

每一位前端开发同窗在面试的时候，都会有50%的概率会被问：你是如何作前端性能优化的？
下面说一说我是怎么回答的？

储备知识

• webpack打包
• 服务端渲染
• http缓存
• 浏览器本地缓存

下面我会以第一人称的角度，配合文本排版进行回答

面试官：你是如何作性能优化

我：针对前端性能优化，我作过一些总结，一共有三点：

1. 第一次访问时的优化（把第一次的加载速度变快）；
2. 第n次访问时的优化（把已经访问过的资源缓存）；
3. 让用户感受很快，很流畅（经过交互手段优化体验）；

第一次访问优化的方式有哪些？

我：第一次访问的时咱们优化的主要目的是【加快渲染的速度】、通常咱们会使用webpack将资源较大的文件进行压缩或者拆分，压缩通常能够使用uglifyjs去压缩js文件，使文件体积变小;

我：若是此时文件依然很大，咱们也能够使用webpack插件来拆分第三方库（不须要记住名字，知道有相关插件便可）

我： 至于图片、图标等资源一样能够在webpack中进行配置，将必定大小的文件转换成base6四、或者使用阿里的字体图标库进行图标的渲染

若是想作SEO的优化，也能够采用服务端渲染的方式来加快首屏渲染的速度；

1. 经过webpack进行资源压缩
2. 经过webpack进行资源拆分
3. 图片/图标资源的处理
4. 服务端渲染

资源的压缩与拆分

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

帮助你们的传送门：

localStorage的使用

sessionStorage的使用

完全弄懂强缓存与协商缓存

http面试必会的：强制缓存和协商缓存

IndexedDB

Service worker 的概念和用法

如何让用户感受很快

我：让用户感受很快，顾名思义，就是并无实际上的提高速度，而是优化了用户体验，我能够采用骨架屏、懒加载、合理loading，防抖、节流（减小没必要要的请求）等方式让用户的等待变得舒服

• 骨架屏、懒加载
• loading优化
• 防抖、节流
• 等等等

以上就是我我的在面试中回答性能优化问题的是经常使用回答方式，经过以上的回答，也能够衍生出webpack的相关问题、http缓存的相关问题，http/https相关问题，闭包问题等