今天给大家总结一下浏览器渲染的机制,页面渲染就是浏览器的渲染引擎将html代码根据CSS定义的规则显示在浏览器窗口中的过程。
大致工作原理如下:
-
用户输入网址,浏览器向服务器发出请求,服务器返回html文件;
-
渲染引擎开始载入html代码,并将HTML中的标签转化为DOM节点,生成DOM树;
-
如果引用了外部css文件,则发出css文件请求,服务器返回该文件;
-
如果引用了外部js文件,则发出js文件请求,服务器返回该文件后开始运行;
-
渲染引擎继续载入html中的部分的代码,并开始解析前面返回的css文件,然后根据css选择器计算出节点的样式,创建渲染树;
-
从根节点递归调用,计算每一个元素的大小、位置等,给每个节点所应该出现在屏幕上的精确坐标;
-
如果body中的引用了图片资源,则立即向服务器发出请求,此时渲染引擎不会等待图片下载完毕,而是继续渲染后面的代码;
-
服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排版,因此引擎需要回过头来重新渲染这部分代码;
-
如果此时js脚本中运行了style.display=”none”, 布局被改变,引擎也需要重新渲染这部分代码;
-
直到页面渲染完毕。