web页面解析流程

web页面解析流程

[TOC]

前言

记得有一道面试题问的是在搜索框中输入信息并点击搜索会发生什么,这道题的答案基本上可以诠释本篇的所有,可以参考这里看一看这道经典的面试题。

浏览器解析URL

首先浏览器会解析用户所提供的URL。URL有自己的格式,如下图所示。首先需要确定的此URL使用的是什么协议。

接着还需要对URL中一些字符进行URL编码,例如空格和引号。由于HTTPS协议的出现,浏览器会先检查自己的预加载HSTS表,如果访问的URL域在这个表中,浏览器会使用HTTPS协议进行访问。

DNS查询

从世界上的一个子网到另一个子网的地图导航就是DNS,浏览器会在缓存中查询该网址,如果没有的话就去本地HOSTS文件进行查询。如果所有的地方都没有这个网址的DNS记录,那么浏览器会向本地DNS服务器发送请求,若未查询到本地DNS服务器则会向DNS根服务器发送查询请求,根服务器(也可能是缓存服务器)会通过域名返回一个顶级域DNS服务器,本地DNS收到后会向顶级域DNS服务器查询二级域,以此类推,最中查询到网站IP地址返回给浏览器。

连接

浏览器获取到了目标的IP地址之后就可以与它建立连接了。以TCP连接为例,请求一个套接字,socket会在该端口复制一个套接字进行连接,这个链接是在网络层进行的。在传输的过程中各种阻塞重传和窗口滑动在此不做讨论。

传输

从应用层产生的数据经过OSI七层模型一路封装到IP层,分片后从网卡发送出去,经过路由器交换机跨越网段最终到达目的地。

服务器接受

服务器接受到数据之后还是从OSI七层模型一路向上,拼接为完整数据。服务器在第一次请求连接的时候一般会根据协议选择连接端口,每个端口上跑的服务是不相同的。用80端口举例,首先web容器会解析数据包,识别请求的URL进行重写URI,读取对应路径下的文件内容。如果请求的是脚本文件,web容器则作为反向代理将请求发送给后端脚本例如php,脚本运行完成之后将结果发送给web容器,容器再将数据整合发送会浏览器。

接收数据

我们的浏览器会收到各种各样的数据包,当你按下F12中的network选项会发现有大量的数据包被接受。数据包的种类可以在上边栏看到,接受时间也有可视化的显示。我认为要了解浏览器的渲染过程首先需要弄清楚这些数据包的格式,它接收的是什么东西。就像做饭之前要弄清楚食材一样。

XHR

XHR全名为XMLHttpRequest,虽然叫XML却可以接受各种格式的数据包,一般为json格式。使用XHR是Ajax技术的一种,可以在不刷新整个web页面的情况下部分的更新某个部分内容,比如评论的更新。

JS

JS就是Java Script的缩写,其中也可能是Java Script语言写的代码,可能提供js函数的调用等等一系列页面js操作。

CSS

这个就广为人知了,负责页面渲染中的格式。

IMG、MEDIA、FONT、DOC

一些对应格式的多媒体文件。

WS

WS是javascript语言编写的动态网页程序文件,可以使用文件记事本打开并进行编辑工作。

Manifest

Java平台下的清单文件,Manifest文件被用来定义扩展或档案打包相关数据,是一个元数据]文件,它包含了不同部分中的名/值对数据。通常Manifest文件都与Java档案相关,其他的情况比较少见。

HTML树解析

浏览器首先接受到HTML文件,在还没有完全接收完数据的情况下已经开始进行解析。根据其中的节点解析出一个DOM树,DOM树是根据DOM元素以及节点属性解析,数的根结点事document对象,就是整个web页面。DOM树渲染是一个深度优先遍历,只有当所有的子节点全都建好之后才会去建兄弟节点。

CSS树解析、阻塞渲染

在浏览器渲染过程中涉及到一个东西叫阻塞渲染,CSS文件中有一些link标签,无论是否inline都可以阻塞HTML树的渲染,而JavaScript文件可以修改CSS树,但是CSS阻塞的优先级是最高的。阻塞不会停止资源的加载。

  • 当浏览器遇到一个 script 标记时,DOM 构建将暂停,直至脚本完成执行。

  • JavaScript 可以查询和修改 DOM 与 CSSOM。

  • CSSOM 构建时,JavaScript 执行将暂停,直至 CSSOM 就绪。

在CSSOM和DOM渲染完成之后将两个树合并为同渲染树,Rendering Tree。有了渲染树之后,浏览器就知道了web页面有哪些节点以及节点之间的从属关系。然后浏览器就是遍历Rendering Tree使用UI后端层绘制每一个节点。

JavaScript

JavaScript会在HTML代码被解析的时候穿插在其中阻塞解析,在实际工程中,经常把所有的js加载资源的代码放在最底部。js代码可以操作DOM和CSSOM。