浏览器输入url到页面展示出来的全过程

Posted 2023-03-28 cute_ming

基本流程：

1、用户在浏览器中输入url地址

2、浏览器解析域名得到服务器ip地址

浏览器会首先从缓存中找是否存在域名，如果存在就直接取出对应的ip地址，如果没有就开启一个DNS域名解析器。DNS域名解析器会首先访问顶级域名服务器，将对应的ip发给客户端；然后访问根域名解析器，将对应的ip发给客户端；最后访问本地域名服务器，得到最终的ip地址。

3、TCP三次握手建立客户端和服务器的连接

因为HTTP是基于TCP的可靠传输，所以在发送http数据报之前，需要先进行TCP的三次握手建立连接。三次握手过程如下：

第一次握手：客户端--->服务端 ack=1,seq=x（x随机生成）

第二次握手：服务端--->客户端 ACK=1,ack=x+1,seq=y（y随机生成）

第三次握手：客户端--->服务端 ACK=1,ack=y+1,seq=x+1

完成第三次握手时，实际上客户端已经与服务器建立了连接，所以第三次握手的报文已经可以携带数据了。

4、客户端发送HTTP请求获取服务器端的静态资源

5、服务器发送HTTP响应报文给客户端，客户端获取到页面静态资源

6、TCP四次挥手关闭客户端和服务器的连接

数据传输完毕后，TCP会进行四次挥手断开连接，释放资源。四次挥手过程如下：

第一次挥手：客户端--->服务器 FIN=1,ack=1,seq=u 客户端状态变为FIN_WAIT_1

第二次挥手：服务器--->客户端 ACK=1,ack=u+1,seq=v 服务器状态变为CLOSE_WAIT，TCP进入半关闭状态

第三次挥手：服务器--->客户端 FIN=1,ACK=1,ack=u+1,seq=w 服务器状态变为LAST_ACK

第四次挥手：客户端--->服务器 ACK=1,ack=w+1,seq=u+1 客户端状态变为TIME_WAIT，此时TCP未释放，需要等待计时器计时完成后，客户端状态变为CLOSED

7、浏览器解析文档资源并渲染页面

浏览器解析文档资源并渲染页面流程：

（1）解析html资源，构建DOM Tree

（2）解析css资源，构建CSS Rule Tree

（3）JS通过DOM API和CSS OM API来操作DOM Tree和CSS Tree

（4）解析完成后综合DOM Tree和CSS Tree会生成Render Tree，计算每个元素的位置，这个过程就是回流（layout or reflow）

（5）调用操作系统Native GUI的绘制

（6）页面绘制完成

涉及到的其他知识点：

1、Render Tree的生成

DOM Tree和CSS Tree结合会生成Render Tree，是由可视化元素按照其顺序生成的树形结构，非可视化元素是不会出现到渲染树中的。

非可视化元素：head、display：none；（注意：visibility：hidden的元素会出现在渲染树中）

2、回流和重绘

回流（reflow，也叫重排、布局）：某部分的变化影响了布局，浏览器需要重新渲染。（如元素大小、位置的改变）

重绘（repaint）：元素的某一部分发生改变，尺寸、位置没有改变。（字体颜色、背景颜色的改变）

引起回流的几个主要原因：

（1）网页初始化

（2）JS操作DOM树（增加、删除元素等）

（3）某些元素的尺寸改变

（4）CSS属性的改变

浏览器的“dirty”系统：

为了避免页面细小的改变就引起回流和重绘，“dirty”系统会将这些改变操作积攒一批再进行操作，这又叫异步reflow或者增量异步reflow。有些特殊情况不会这么做：resize窗口、改变了页面默认的字体等，这些操作会直接触发回流。

编写代码时如何减少回流和重绘：

（1）修改样式不要逐条修改，定义CSS样式的class，直接修改元素的className

（2）不要将DOM节点的属性值放在循环中当成循环的变量

（3）为动画的HTML元素使用fixed或absolute的position属性，修改它们的CSS就不会触发reflow

（4）把DOM离线后修改，设置display：none或者clone元素到内存中，修改完成再显示回页面

（5）不要使用table布局，一个微小的改变就可能引起整个table的重新布局

3、性能优化

（1）提升HTML的加载速度

- 页面精简，删除不必要的内容，将内嵌的JS和CSS移至外部文件，使用压缩工具等

- 减少文件数量，合并文件，减少请求次数

- 减少域名查询，外部引入的资源尽量少使用不同的域名

- 使用缓存，重用数据

- 优化页面元素的加载顺序

- 使用合法的标签

- 根据浏览器类型选择合适的策略

（2）编写合理的CSS

- DOM的深度尽量浅

- 使用合法的CSS属性

- 不要为ID选择器指定类名或标签名

- 避免使用后代选择器，尽量使用子选择器

- 避免使用通配符

（3）关于JS标签

js标签的加载和执行特点：载入后立即执行，执行时会阻塞页面后续内容

- 将所有的js标签放在页面底部，保证脚本执行前已完成DOM渲染

- 尽可能合并脚本

- 减少内联js的使用

- 注意多个js标签的引入顺序

- 使用defer属性，该属性可以使脚本在文档完全呈现以后再执行

- 使用async属性，可以使当前脚本不必等待其他脚本的执行，也不必阻塞文档的呈现