热门关键字:
jquery > jquery教程 > html5 > 浏览器从输入URL到渲染完页面的整个过程

浏览器从输入URL到渲染完页面的整个过程

499
作者:管理员
发布时间:2020/3/5 11:58:09
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=982

  从输入URL到渲染出整个页面的过程包括三个部分:

  1、DNS解析URL的过程

  2、浏览器发送请求与服务器交互的过程

  3、浏览器对接收到的html页面渲染的过程

  一、DNS解析URL的过程

  DNS解析的过程就是寻找哪个服务器上有请求的资源。因为ip地址不容易记忆,一般会使用URL域名(如www.baidu.com)作为网址。DNS解析就是将域名翻译成IP地址的过程。

  具体过程:

  1)浏览器缓存:浏览器会按照一定的频率缓存DNS记录

  2)操作系统缓存:如果浏览器缓存中找不到需要的DNS记录,就会取操作系统中找

  3)路由缓存:路由器也有DNS缓存

  4)ISP的DNS服务器:ISP有专门的DNS服务器应对DNS查询请求

  5)根服务器:ISP的DNS服务器找不到之后,就要向根服务器发出请求,进行递归查询

  二、浏览器与服务器交互过程

  1)浏览器根据解析到的IP地址和端口号发起http请求

  http请求包括header和body。header中包括请求的方式(get和post)、请求的协议(http、https、ftp)、请求的地址ip、缓存cookie。body中有请求的内容。

  2)http请求到达传输层,利用tcp协议与服务器建立连接(三次握手)

  3)服务器接收到http请求之后,开始搜索html页面,并发送响应报文

  4)浏览器接收到返回的html页面之后,若状态码显示成功,开始进行页面的渲染

  三、浏览器页面渲染过程

  1)浏览器通过HTMLparse根据深度遍历的方式把html节点遍历成dom树

  2)将css解析成CSSDOM树

  3)将dom树和CSSDOM树构造成render树

  4)根据得到的render树计算所有节点在屏幕中的位置进行布局(回流)

  5)遍历render树并调用硬件API绘制所有节点(重绘)

  补充:构造render渲染树的过程

  从DOM树的根节点开始遍历每个可见的节点。

  对于每个可见的节点,找到CSS树中的对应的规则,并且应用他们。

  根据每个可见的节点及其对应的样式,组合生成渲染树。





如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:CSS
友荐云推荐