浏览器的执行过程
- 处理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标签是内联,所以这段代码还是同步执行的
复制代码