HTTP 请求
我们客户端与服务端通过 TCP 的三次握手建立连接之后,客户端开始向服务器主动发起请求。
服务端接收到客户端发送的信息,就返回响应信息和文件。客户端如何判断服务端是否成功返回了呢?就需要下列的一些状态码来识别,同样前端做的工作也是通过状态码来判断当前响应状态。
1XX(信息性状态码) : 服务器正在处理请求中。
2XX (成功状态码): 请求处理完毕。
3XX (重定向状态码): 需要附加操作以完成请求。
301:永久性重定向。该状态码表示请求的资源已被分配了新的 URI,以后使用该资源,使用现在所指 URI。
302:临时性重定向。表示该状态码被分配了新的 URI,希望用户本次能够使用新的 URI 访问。
304:服务器资源未改变,可直接使用客户端未过期的缓存。
4XX (客户端错误状态码): 服务器无法处理请求。
400:该请求报文中有语法错误。
403:没有资源的访问权限。
404:找不到资源。
5XX (服务端错误状态码): 服务器处理请求出错。
500:服务器发生错误
503:服务器超荷载或正在维护。
远程服务器找到资源并使用 HTTP 响应返回该资源,值为 200 的 HTTP 响应状态表示一个正确的响应。
浏览器的渲染原理
服务器将 HTML、CSS、JS文件转化为 0,1字节数据在网络中传输给浏览器,浏览器通过判断状态码开始接收、解析文件,这开始运用到浏览器的渲染原理。
–> 构建 DOM
首先浏览器要做的就是获取 HTTP 的 Request 的 body 中字符串(字符流)的 HTML 文本,进行解析并构建 DOM 树。
将字符流转化为字符串之后,浏览器开始进行词法分析,虽然这个名词我们不熟悉,但是我们要知道,一个 HTML 字符串我们要拆分开才能构建 DOM 树,词法分析就是将字符串拆分成的过程。将字符串转化为的 token(标记) —— token 作为代码的最小单位,也就是拆分后的结果,这个过程我们称为标记化。
我们将字符串拆解之后,然后将这些标记转化为 Node 结点,浏览器根据不同的结点开始构建一棵 DOM 树。
–>构建 CSSOM 树
浏览器已经把 HTML 文件转化为了 DOM 树,下面就对 CSS 样式文件进行解析,构建成 CSSOM 树。这个过程和上述构建 DOM 树的过程有点相似,但是其中 CSSOM 树的构建更加的耗时。
浏览器通过递归的方式 DOM 树为结点设置样式。通过先找到具体的标签,然后递归找到设置的上级标签,最后确定选择器选择的所选标签的样式。
–>构建渲染树
我们分别将上边生成的 DOM 和 CSSOM 树进行合并,生成我们的渲染树。但是在合并的时候,并不是两者简单的进行结合,因为有些结点我们并不需要显示,还记得有一个 display:none 属性吗?如果某结点的样式有这个属性,就不会出现在渲染树中。
–>合成、绘制
浏览器在生成渲染树的时候,就会根据渲染树进行布局,调用 GPU 进行绘制,然后合成图层,最后显示在屏幕上。
通过上边的对浏览器工作原理的介绍,相信你对浏览器有了新的认识和简介,但是只看上边的知识还完全不能深入到底层,还想要进行深入的对浏览器的工作原理进行研究,可以阅读英文文档《How Browsers Work》
链接:http://taligarsiel.com/Projects/howbrowserswork1.htm