浏览器的执行原理总结

2018-10-24 306 阅读2分钟

浏览器的执行过程

处理HTML构建DOM 树。
处理CSS构建CSSOM树。
DOM与CSSOM合并成一个渲染树
布局。
渲染到屏幕上。

具体细节总结

遇到link标签,必须等待css文件加载完成，才能继续DOM的构建和javascript的执行. 简单的讲就是首次进入页面的时候，CSS文件没加载完成之前.除了去加载JS文件啥都不会干，页面将是一片空白. (所以项目过大的，要适当对css文件进行拆分)
加载css文件的过程中，同时浏览器也会识别下面的script标签并加载js文件

<link rel="stylesheet" href="./test.css">
<script src="a.js"></script>
<script src="b.js"></script>
// test.css a.js b.js会并行加载但是a.js和b.js必须要等待test.css加载完成才能执行

遇到script标签要等待js代码执行才能进行构建下面的dom.

<link rel="stylesheet" href="./test.css">
<script src="a.js"></script>
<script src="b.js"></script>
<body>
    <div>123</div>
</body>
123是什么时候在页面出现?

1. 要等待test.css, a.js, b.js加载完成
2. a.js, b.js全部执行完毕

defer属性表示dom树继续完成后执行, 即DOMContentLoaded事件触发
async表示异步载入. 即js文件载入完成之后立即执行，等效于window.onload

如果页面比较复杂js文件比较小。文件可能在dom树构建完成之前执行

动态的创建script标签，默认为异步

let element = document.createElement("script")
element.src = "./a.js"
document.append(element)
等效
<script src="./a.js" async></script>

async 与 defer属性对于 inline-script是无效的

<script async>
  console.log("1");
</script>
或者
<script defer>
  console.log("2");
</script>
或者
let script = document.createElement("script");
script.innerHTML = "console.log(123)"
document.body.append(script)；
// 前面说过docu同步执行document.createElement("script")默认是异步的，但是script标签是内联,所以这段代码还是同步执行的