0


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

基本流程:

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属性,可以使当前脚本不必等待其他脚本的执行,也不必阻塞文档的呈现

标签: 网络协议 tcp http

本文转载自: https://blog.csdn.net/cute_ming/article/details/124364783
版权归原作者 cute_ming 所有, 如有侵权,请联系我们删除。

“浏览器输入url到页面展示出来的全过程”的评论:

还没有评论