html 加载流程图
在地址栏输入 url,返回 html 后,浏览器开始顺序加载并渲染 DOM
Body 标签
当浏览器遇到 body 标签才算真正开始加载并渲染 DOM,此时会有以下几种情况:
DOM 元素
浏览器遇到 dom 元素时,正常顺序加载,边加载边渲染
内联 CSS
当遇到内联 CSS 时,浏览器继续加载,但渲染被阻塞,此时会生成新的 CSS Rule Tree,生成后重新渲染界面
外联 CSS
当遇到外联 CSS(link 标签),浏览器启一个线程加载 css 文件,DOM 继续加载但渲染被阻塞
内联 Javascript
当遇到内联 Javascript,浏览器开始执行这段脚本,DOM 的加载和渲染同时被阻塞(由于 JavaScript 有可能会更改 DOM Tree 和 Render Tree,因此同时被阻塞)
外联 Javascript
当遇到外联 Javascript,浏览器开始下载这段脚本,下载成功后执行它,这整个过程 DOM 的加载和渲染同时被阻塞
Example
用一个例子解释一下
<html>
<body>
<h2>Hello</h2>
<script>
function print(){
console.log('first script', document.querySelectorAll('h2'));
}
print();
setTimeout(print);
</script>
<script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/js/bootstrap.js"></script>
<h2>World</h2>
<script> console.log('second script', document.querySelectorAll('h2')); </script>
</body>
</html>
在 js 文件下载的过程中,js 后面的元素没有被加载,也没有呈现在界面上,说明 js 文件的下载阻塞了 DOM 的解析并渲染
<html>
<body>
<h2>Hello</h2>
<script>
function print(){
console.log('first script', document.querySelectorAll('h2'));
}
print();
setTimeout(print);
</script>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/css/bootstrap.css">
<h2>World</h2>
<script> console.log('second script', document.querySelectorAll('h2')); </script>
</body>
</html>
在 css 文件仍在下载的过程中,已经可以打印出两个,可以看出 css 文件的加载阻塞了 DOM 渲染但没有阻塞 DOM 加载
来源: http://www.jianshu.com/p/16435ba1b32e