网页加载的奇幻之旅：从零开始
发表时间: 2024-02-22 17:19
1. HTML解析
- 当浏览器开始加载HTML文档时，它会从上到下解析HTML文件。在解析过程中，浏览器会构建DOM（文档对象模型）树。
2. 遇到外部链接（CSS、JavaScript）
- 当解析器遇到外部CSS链接（<link>标签）时，它通常会停止DOM构建，等待CSS文件下载并解析完成，因为CSS可能影响后续DOM元素的渲染。
- 当解析器遇到传统的JavaScript脚本（<script>标签）时，它也会停止DOM构建，等待脚本下载和执行完成，因为脚本可能会修改DOM。
3. defer async
- defer属性：用于<script>标签，指示浏览器应该在继续构建DOM的同时异步下载脚本，但延迟执行直到整个文档解析完成。所有带defer的脚本将在DOMContentLoaded事件之前按顺序执行。
- async属性：也用于<script>标签，指示浏览器异步下载脚本，并在脚本下载完成后立即执行，而不用等待HTML文档解析完成。async脚本的执行顺序不能保证。
4. DOMContentLoaded事件
- 当HTML文档被完全加载和解析时，不包括样式表、图片和iframe的加载，DOMContentLoaded事件将被触发。
- 如果脚本有defer属性，它们将在DOMContentLoaded事件之前按顺序执行。
5. 其他资源的加载
- 在DOMContentLoaded事件之后，浏览器会继续加载页面上的其他资源（如图片、样式表、iframe等）。
6. onload事件
- 当文档及其所有依赖资源（如样式表和图片）完全加载后，window对象的onload事件将被触发。
- 这标志着整个页面的加载过程结束。
7. JavaScript执行
- 在整个文档解析过程中，JavaScript（无论是内联的还是通过<script>标签引入的）可以被执行，具体取决于它的位置和是否使用了defer或async属性。
- 使用defer的脚本会在文档解析结束后按顺序执行，而async脚本则会在它们加载完成后尽快执行。
注意
- 使用async和defer可以提高页面加载性能，因为它们允许HTML解析和脚本下载并行进行。
- JavaScript脚本的放置位置（在<head>或<body>）也会影响加载和执行的时机。通常推荐将脚本放在<body>标签的底部，以提高页面加载性能。
鲁公网安备37020202000738号