html过度的触发机制,浏览器渲染机制

当用户在浏览器输入一个地址后，浏览器最终会呈现一个完整的网页，会经历一下步骤。

1.加载并解析HTML

当用户输入url地址后，浏览器会先拿到html文件下载完并进行解析。

2.其他静态资源下载

html文件在解析过程中，如果发现html文本里，引入了一些外部资源链接，比如css、js和图片等，会立即启用别的线程下载这些静态资源。在

标签中遇到js文件时，html的解析会被停下来，等js文件下载结束并执行完，html的解析才会继续，来防止js改变已解析的结果。

拓展

由以上可以知道，js文件放在

文件中，属于同步加载，会阻塞dom树的构建，进而影响页面的加载。当页面引入的js文件过多时，页面会出现长时间的白屏。

如何避免上面的问题呢？有以下三个解决方案。

1.

由于dom是自上而下进行解析的，因此js不会阻塞dom的解析，而且这个时候可以在js中操作dom

2.设置defer属性

在

3.设置async属性

async属性和defer属性类似，也时开启一个线程去下载js文件，单核defer不同的是，async会在js文件加载完成后立即执行，而不是等到dom全部加载完成后再执行，所以还是有可能造成阻塞。同样的也是只是用外部引用脚本语言，如果有多个设置了async的文件，不能像defer那样按顺序执行。

4.动态创建脚本

var _html = _html || []

(function(){

var hm = document.createElement("script")

hm.src = "http://www.baidu.com/han.js"

var s = document.getElementsByTageName('script')[0]

s.parentNode.insertBefore(hm, s);

})()

复制代码

3.dom树的构建

dom的全程，文档对象模型，在html解析时，解析器会把解析完的html转化成dom对象，再进一步的构建dom树

4.cssdom的构建

当css下载完成后，css解析器会对css进行解析，把css解析成css对象，然后把这些css对象组装成一颗cssdom树

5.渲染树的构成

dom和cssdom构建完成后，浏览器会根据这两颗树构建出渲染树

6.布局计算

渲染树构建完成以后，所有元素的位置关系和需要应用的样式就确定了。这时候浏览器会计算出所有元素的大小 和绝对位置

7.渲染

布局计算完成以后，浏览器就可以在页面上渲染元素了，经过渲染引擎的处理后，整个页面就显示在了屏幕上