输入URL到页面渲染的整个流程

输入www.baidu.com之后

www.baidu.com.png
  • 整体流程大致如下:
  1. 浏览器获取输入的域名www.baidu.com,搜索自身的DNS缓存

  2. 搜索浏览器操作系统中的DNS缓存(没有找到或者缓存失效接着向下)

  3. 读取本地的HOST文件(C:\Windows\System32\drivers\etc\hosts)

  4. 浏览器向DNS(域名系统)请求,将域名解析为外网的IP地址,并缓存起来

  5. 客户端的浏览器打开连接,与服务器进行连接(Web服务默认端口号为80),进行TCP的三次握手

TCP握手时,应用层会下发数据给传输层,这里TCP协议会指明两端的端口号等,然后下发给网络层。网络层中的IP协议会确定IP地址,并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中,最后就是物理层面的传输。

  1. 建立TCP连接后,会进行TLS握手,然后就开始正式的传输数据
  1. 请求在到达服务端之前,可能会有负载均衡设备来平均分配所有用户的请求,分配到多个操作单元上执行,将资源发送给浏览器

首先浏览器会判断状态是什么,如果是200就继续解析,如果400或500的话就会报错,如果300的话会进行重定向,这里会有个重定向计数器,避免过多次的重定向,超过次数也会报错。

  1. 浏览器解析服务端发送的资源,并请求响应的图片、CSS、JS资源。看是否是长连接来决定是不是断开TCP连接。

浏览器开始解析文件,如果是gzip格式的话会先解压,然后通过文件的编码格式解码。

文件解码成功后会正式开始渲染流程,先根据HTML构建DOM树,有CSS的话会构建CSSOM树。如果遇到script标签的话,会判断是否存在async或者defer(前者会并行下载并执行JS;后者会先下载文件,然后等待HTML解析完成后顺序执行)

如果以上都没有,就会阻塞渲染流程直到JS执行完毕。遇到文件下载的会去下载文件,这里如果使用HTTP/2协议的话会极大地提高多图的下载效率。

  1. 解析渲染,将Web页面展示给用户。

CSSOM树和DOM树构建完成后会开始生成Render树,这一步就是确定页面元素的布局、样式等

在生成Render树的过程中,浏览器就开始调用GPU绘制,合并图层,将内容显示在屏幕上。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容