理论知识
浏览器的渲染过程由一个线程单独负责,我们暂且称其为UI线程。当浏览器从远程服务器获取到一个HTML文档后,首先会先生成相应的DOM树,然后UI线程开始遍历DOM树,挨个渲染每个元素节点。当遇到script节点时,UI线程会暂时阻塞,将script交给js引擎编译执行。当script脚本执行完毕后,UI线程会再次渲染剩下的元素。
在执行script脚本时,UI线程是阻塞的,势必会影响到页面加载的速度,所以在script中向远程服务器请求时我们都做成异步的,加快渲染速度。
还有一个优化小Tip是把我们自定义的js文件在最后引入,这样就可以让用户先看到一些界面。
下面这张图片展示了UI线程的执行过程
上面所说的UI线程直接遍历DOM树进行渲染严格来说是不正确的,通常情况下,DOM树还需要进一步进化为Render树和RenderLayer树才能被UI线程进行渲染。
Render树是基于DOM树建立起来的一颗新的树, 是布局和渲染等机制的基础设施。 Render树节点和DOM树节点不是一一对应关系,那么哪些情况下需要建立新的Render节点呢?
-
DOM树的document节点;
-
DOM树中的可视化节点,例如HTML,BODY,DIV等,非可视化节点不会建立Render树节点,例如HEAD,META,SCRIPT等;
-
某些情况下需要建立匿名的Render节点,该节点不对应于DOM树中的任何节点;
Render树建立完成后,布局运算就会计算出相关的属性,如位置,大小,是否浮动等。