DOM-JavaScript

原创于 2015-11-24 18:40:45 发布 · 377 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dom

DOM 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了JavaScript在DOM解析过程中的同步与异步执行机制，包括如何利用`defer`、`async`属性及动态创建`<script>`元素来优化外部脚本的加载与执行顺序，确保页面构建效率的同时避免潜在的依赖管理问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、DOM中的JavaScript
1、JavaScript默认是同步解析。
默认情况下，当DOM在解析且它遇到一个script元素时，它将停止解析文档，阻止任何进一步的渲染与下载，并执行该JavaScript。因为此行为是阻塞的，并且不允许并行解析DOM或者执行JavaScript，所以它被认为是同步的。如果JavaScript是HTML文档外部的，那么阻塞更加严重，因为JavaScript必须先下载才能解析。

2、使用defer推迟外部脚本的下载与执行;只有 Internet Explorer 支持 defer 属性。
defer属性将推迟外部JavaScript文件的阻塞、下载、与执行，直到浏览器完成解析并关闭</html>

3、使用async异步下载并执行外部JavaScript文件。
async可以覆盖<script>元素在文本浏览器构造DOM时的顺序、阻塞加载的天性。通过此属性，我们告诉浏览器不要阻塞HTML页面的构建，并且放弃顺序加载。

注意：ie9及其以下不支持。使用async，前提是没用在异步加载的脚本中使用document.write(),
    如果在同一个页面使用两者，async属性压过defer
缺点：JavaScript文件可能完全不按他们在DOM中引入的顺序执行，这引起依赖管理的问题

4、使用动态<script>元素强制异步加载并解析外部JavaScript。
<script>
var oScript = document.createElement('script');
oScript.src="外部.js";
document.body.appendChild(oScript);
</script>

主要缺陷 ： JavaScript文件可能完全不按他们在DOM中引入的顺序执行，这引起依赖管理的问题

5、通过给异步<Script>加onload回调从而知道它们何时加载完毕