江苏龙网

  1. 主页 > 生活百科 > >

深入浅出浏览器渲染原理( 二 )

浏览器渲染


首先浏览器会判断状态码是什么，如果是 200 那就继续解析，如果 400 或 500 的话就会报错，如果 300 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错 。
浏览器解析
浏览器开始解析文件，如果是 gzip 格式的话会先解压一下，然后通过文件的编码格式去解码文件 。
文件解码成功后会正式开始渲染流程，先会根据 HTML 构建 DOM 树，有 css 的话会去构建 CSSOM 树 。如果遇到 script 标签的话，会判断是否存在 async 或者 defer ，前者会并行进行下载并执行 JS，后者会先下载文件，然后等待 HTML 解析完成后顺序执行 。

深入浅出浏览器渲染原理

文章插图
 
如果以上都没有，就会阻塞住渲染流程直到 JS 执行完毕 。遇到文件下载的会去下载文件，这里如果使用 HTTP/2 协议的话会极大的提高多图的下载效率 。
CSSOM 树和 DOM 树构建完成后会开始生成 Render 树，这一步就是确定页面元素的布局、样式等等诸多方面的东西
在生成 Render 树的过程中，浏览器就开始调用 GPU 绘制，合成图层，将内容显示在屏幕上了 。
总结总的来说，今天这篇文章主要是带着大家从 DNS 查询开始到渲染出画面完整的了解一遍过程，里面涉及到DNS、HTTP、TLS、负载均衡和浏览器渲染等等内容，算不上非常详细，但如果面试的时候能说出来这些，相信面试官也会对你刮目相看的 。




推荐阅读


上一篇：黑毛茶的功效与作用,老粗茶里的保健养生功效

下一篇：金骏眉的副作用,金骏眉的功效