本文正在参加「金石计划」
写在前面
这可以说是面试必会被问到的问题，如果你没有被问到，那证明你还没有被邀约面试，哈哈。如果问到了，你只会扯扯懒加载，扯扯雪碧图什么的，那你得好好看看我总结的这个文章，说不定就能在关键的时候帮帮你，当然里面所提及的具体的优化方式方法，还需要自己去实践，毕竟实践才能出真知。还有，优化是建立在你知晓原理的情况下，如果你都不知道原理，你得先补补相关的知识，毕竟问优化相关的问题，就会为了一针见血的试探出你是什么等级的程序员。互联网的寒冬真的很冷，我这种小菜鸡，依然心中有火，加油。
性能优化是什么？
首先，在开发好页面之后，如何让页面更好更快的运行，是区分一个程序员技术和视野的重要指标。所以这方面的一定要花时间去建立去优化的知识。从前端的角度来说，性能优化可以分为两个阶段。一个是页面加载速度，另一个是页面使用的流畅性。
页面加载速度
想要优化页面加载速度，那我们要先知道页面渲染的流程，也就是从URL输入到页面呈现发生了什么，很显然如果我们要进行加载速度的优化，这其中的每一个步骤都需要去思考。那从输入URL到页面呈现主要有这些步骤
网络进程阶段： 浏览器解析->查询缓存->dns查询->建立链接->服务器处理请求->服务器响应数据->客服端收到资源
渲染进程阶段： 解析HTML生成DOM树->计算样式生成Render树->进行布局(布局树)->分层(图层树)->生成绘制指令
合成进程阶段：分块->绘制->光栅化->合成显示
那我常做的优化主要有这几点：
网络阶段：
- 使用http缓存，一般是使用协商缓存；
- 使用预加载的方式，当网络处于空闲的状态，去加载下一个可能访问的资源；
- 打包代码，压缩代码体积；
- 代码分块，减少不必要资源同时加载；
- 如果有很多小图片的话，使用雪碧图或者转成base64编码，减少请求；
- 优化链接，如链路复用、长连接等，不是很懂先。
渲染阶段：
- 避免js阻塞HTML解析
- 减少CSS选择器
- 减少重排重绘
- 懒加载
- 骨架屏
- 服务端渲染
合成阶段：
- 启用GUP加速；那可以使用这些CSS属性；willChange、transform、z-index等
页面使用的流畅性
- 减少不必要的响应式
- 防抖节流
- 虚拟列表(虚拟滚动)
- 懒加载
- 减少重排重绘
最后
这些东西真的很基础，我相信绝大多数人都知道。在此也只是把我知道的做一点总结。以后要是有更好的优化案例，或者方式方法，再进行总结输出。也欢迎看到这个文章的小伙伴，补充和分享自己工作中的优化知识，感激不尽。谢谢
