今天介绍前端性能优化，采用的方法是 CRP（关键渲染路径），也就是在关键点上做优化。
首先，抛出一个问题，当我们在浏览器输入一个地址，到页面渲染成功，发生了什么？
这个问题的答案百度一下，到处都是。在此，我说一下我的理解：
这个过程总共有7个过程完成
一、URL解析
二、DNS解析
三、TCP三次握手，建立客户端与服务端的连接通道
四、发送HTTP请求
五、服务器处理和响应
六、TCP的四次挥手，关闭客户端和服务端的连接通道
七、浏览器解析渲染
对于我们前端来说，优化的重点放在 DNS解析、与浏览器解析上，外加缓存。
关键路径一浏览器解析过程：
1、生成DOM树 //标签语义化、避免多级嵌套（最佳不超过四层）
2、生成CSSOM树 //css解析过程是从右到左解析，所以避免多层级嵌套（尤其是在使用sass 或 less 过程中）
3、将DOM树与CSSOM树融合成渲染树
4、通过布局计算 回流....完成页面渲染
这个过程中，有一些需要注意的点: 一、HTML与CSS都是阻碍页面渲染的东西，二、引入CSS的方法有link 与 @import ，前者是通过异步的方式请求资源，后者是通过同步的方式请求资源。在开发过程中，应该减少@import 的使用。在遇到样式极少的情况下，建议直接写在页面顶部<style></style>里面。三、js加载，为了让页面加载速度更快，在页面中遇到<script> 标签的 ，如果加载的这个js文件有依赖 可以加关键字async （ < script async>）,如果没有依赖加关键字 defer ( < script defer>),在开发过程中，大部分请情况下加 defer 。四、页面渲染一次必然有一次回流和重绘，所以为了减少页面回流，应该少操作DOM。
以上说的这几点，利用框架 vue 或者react 开发，是可以避免的。
关键路径二：网络交互层面上的优化：
1、DNS方面的优化
每一次DNS解析时间预计20-120毫秒 / 减少DNS请求次数 / DNS预解析(下图淘宝为例)
2、减少HTTP请求次数和请求资源大小
资源合并压缩 / 使用字体图标 / 数据延迟分批加载 / CDN资源 ......
3、利用好缓存资源
如果第一次请求了，以后重新加载页面，直接读取缓存。
常用缓存有 内存缓存 和 硬盘缓存
使用情况： 打开网页输入地址，直接查找硬盘缓存；
F5刷新，优先查找内存缓存，然后查找硬盘缓存；
强制刷新：全部服务器请求资源。
在这一方面， 更多的操作是服务端来配置一些参数，与前端关联性不大。
在之后面试过程中，如果提及到前端优化的问题，就可以从这些点分别去阐述，思想： CRP（关键渲染路径）。
以上就是我对前端优化的一点认识，当然还有更多层面的优化，例如：代码运行方面、代码编译、安全等方面。希望同学们补充、或者有不对的地方，提出意见。
