前端优化原理篇（生命周期）

1， 性能评估模型

对于前端的性能的评判 主要是以下四个方面：

2，性能测量工具

1，浏览器的performarce功能
指路可看链接
2，lighthouse工具

3，生命周期

网站 页面的整个生命周期，通俗的讲，就是从我们在浏览器的地址栏中输入一个url后，到整个页面渲染出来的过程，这个过程包括 域名解析，建立tcp连接，前后端通过http通话，压缩与解压缩，以及前端的关键渲染路径。
关于前端的知识，我们将页面的生命周期划分为一下几个阶段：

• 浏览器接收到url，到网络请求线程的开启
• 一个完整的http请求并转到后端
• 前后端之间的http请求交互和涉及的缓存机制
• 浏览器接收到的数据包后的关键渲染路径
• js引擎的解析过程

3.1 网络请求线程开启

输入url到开启网络请求线程，这个阶段是在浏览器内部完成的。

首先是对url进行解析：
url结构: protocol://Host:Post/path?Query#Fargment

• protocal: 协议头。说明浏览器要如何处理打开的文件
• Host: 主机域名或者是ip地址，就是所访问的资源在互联网上的地址
• port：端口号，请求程序和响应程序之间连接的标识
• path: 目录路径， 请求的目录或者是文件名
• query: 查询的参数，请求所传递的参数
• fragment: 片段，通常作为前端路由或者是锚点
• 解析完url之后，浏览器就会新建一个网络请求线程去下载所需要的资源。

3.2 建立http请求

这部分的内容主要分为两部分，一个是DNS解析，一个是通信链路的建立。

通俗的讲就是首先发出请求的客户端浏览器应该要知道要访问的服务器的地址，然后建立通往该服务地址的路径

1， DNS解析

主要是将域名解析成ip地址

主要的流程如下：

会以递归的方式去浏览器缓存，系统自身缓存，hosts文件中去查找有没有对应的IP地址。

如果都没有，就会去本地域名服务器上去查找，如果本地域名服务器没有对应的IP地址，那本地域名服务器会以迭代的方式去根域名服务器，com顶级域名服务器，权限域名服务器中去查找。

如果没找到，就会返回失败的代码。

2，建立连接

当解析得到ip地址之后，就可以建立连接进行资源的请求与响应，主要走的是TCP/IP的一个网络模型。
当使用本地主机有网络时，数据链路和网络层就已经打通了。
接下来将向目标主机，发送hettp请求，需要传输层建立端到端的一个连接。传输层一般是TCP/UDP的协议，这里使用TCP举例子。
TCP协议要走三次握手这个流程，走完之后才算连接成功。

3.3 前后端的交互

当tcp连接好之后，可以通过http协议进行前后端的通信，但在实际的访问中，并不是浏览器和ip地址直接的通信，而是会在中间加上反向代理服务器。

常见的反向代理，我们一般是使用nginx。

当本地主机发送到反向代理请求之后，反向代理会处理一下流程：

首先会有一层的验证环节，若是验证失败，就会返回失败的代码。

通过验证之后，就会进行后端代码程序，进行数据库查询等。

完成计算之后，后端就会以一个http响应数据包的形式发送会请求的前端，结束本次请求。

3.4 关键渲染路径

当浏览器获得html，css，js文件如何将其渲染到页面上面。

浏览器通过解析html，构建DOM，解析css， 构建CSSOM

构建完两个对象模型之后，将这两个对象模型合并为渲染树，渲染树只包含渲染可见的节点。

当首屏渲染完之后，用户在和网站交互过程中，有可能通过js代码提供用户操作接口更改渲染树的结构，一旦DOM结构发生了变化，这个渲染活成就会重新渲染一遍。

因此对于关键渲染路径的优化影响不仅仅是首屏性能还有交互性能。