关于浏览器渲染机制的总结

关于浏览器渲染机制的总结

1、浏览器渲染机制的过程是什么样的？

• 解析HTML生成DOM树
• 解析CSS生成样式树
• DOM树与样式树结合生成渲染树
• 根据渲染树来布局，计算每个节点的位置
• 调用GPU绘制，最后显示在屏幕上

2、为什么将script标签引入的js代码放在body下方？

浏览器在解析HTML代码时，遇到script标签，会暂停DOM树的构建。为了提高用户体验，浏览器在加载页面时，会先将已经生成好的DOM树和样式树（非完整的）显示在页面中，而将js代码放在head标签或者body标签的前面会阻碍DOM树的构建，延迟页面显示（指的是已构建好的非完整DOM和样式树的显示）

3、DOMContentLoaded事件和load事件

DOMContentLoaded事件是指页面DOM树构建完成后触发的事件，类似的有jQuery中的$(document).ready()事件。值得一提的是script标签放在head标签中或者body标签下方，并不会影响DOMContentLoaded事件被触发的时间，因为DOMContentLoaded事件是HTML解析完成并生成完整的DOM树后才触发的，script位置不同只是在于先执行还是后执行的问题，但是总归是要执行的。

load事件指的是window.onload()，只有当页面中的所有资源，包括DOM、CSS、Js、图片等都加载完成后才会触发load事件

参考文献：

[1] 渲染机制
[2] JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制
[3] DOMContentLoaded与load的区别