认识达内从这里开始

认真做教育专心促就业

南昌达内培训浏览器渲染具体解析过程

发布：南昌达内IT培训
来源：互联网
时间：2021-09-28 13:07

浏览器渲染是程序员在学习web前端编程开发技术的时候需要重点掌握的一个编程知识，下面我们就通过案例分析来了解一下，浏览器渲染具体解析过程。

南昌达内培训浏览器渲染具体解析过程

渲染引擎通过网络获得请求文档内容(以8k分块的方式完成)，然后开始：解析html为DOM树>渲染树结构>布局渲染>绘制渲染树。

具体解析过程为：

开始解析html内容，将标签转化为DOM节点，然后解析它外部的css文件以及style中的样式信息。css样式信息和html标签来构建渲染树。渲染树是由一些包含颜色大小等盒子组成的，按照从上到下，从左到右的方式显示，渲染树构建好之后，执行布局过程，将每个节点确定在屏幕上的确切坐标，后使用UI后端层绘制每个节点。

举例说明下浏览去解析html、css、js的过程：

浏览去地址栏输入地址后回车，假设一次访问，浏览去向服务器发送请求，返回html文件。

浏览去载入html代码，解析head中的link引入的外部css文件。

浏览器发出css文件请求，服务器会返回css文件。

浏览器继续载入body部分代码，css文件接收到之后，就可以渲染页面。

遇到img标签引入图片，会立马向服务器发送请求，此时不等待返回的图片，而是继续向下渲染。

浏览器接收到返回图片文件，由于图片占用一定面积，影响后边排版，所以浏览去需要回过头重新渲染这部分代码。

浏览器发现script标签，内部包含的js代码，就会立即执行。

js脚本执行js语句，如果js语句操作的是DOM元素，浏览器就需要重新渲染这部分代码。

等到</html>到来，页面一次渲染就完成了。

如果用户点击"换肤"按钮，js让浏览器换一个css文件，此时浏览去又会向服务器发送请求。

等浏览器返回新的css文件之后，重新渲染页面。

需要注意：

js不能并行下载和解析(阻塞下载)。

当引用了JS的时候，浏览器发送1个jsrequest就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用document.write或appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现。

JS、CSS中如有重定义，后定义函数将覆盖前定义函数。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。

< 上一篇：南昌达内培训浏览器工作原理分析

下一篇：南昌达内培训数据库架构都需要注意哪些问题 >