今天介绍前端性能优化，采用的方法是 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（关键渲染路径）。

以上就是我对前端优化的一点认识，当然还有更多层面的优化，例如：代码运行方面、代码编译、安全等方面。希望同学们补充、或者有不对的地方，提出意见。