JavaScript高级程序设计

不推荐的API

document.write

 

2.1.2 推迟执行脚本

<script>有一个叫defer的属性 这个属性表示: 脚本在执行的时候不会改变页面的结构。也就是说 脚本会被延迟到整个页面都解析完成后再运行，相当于告诉浏览器: 立即下载，但延迟执行

<script defer scr="example1.js"></script>

<script defer scr="example2.js"></script>

第一个推迟的脚本会在第二个推迟的脚本之前执行，并且两者都会在DOMContentLoaded事件之前执行(实际项目中，推迟执行的脚本不一定总会按顺序执行或者在DOMContentLoaded事件之前执行，因此最好值包含一个这样的脚本)

2.1.3 异步执行脚本

HTML5为<script>元素定义了async属性，与defer类似

不过async的脚本并不保证能按照它们出现的次序执行，不必等脚本下载和执行完后再加载页面，同样也不必等到该脚本下载和执行后再加载其他脚本，因此，异步脚本不应该在加载期间修改DOM

异步脚本会保证在页面的load事件前执行，但可能在DOMContentLoaded之前或之后

对于XHTML文档, 应该写成async="async"

2.1.4 动态加载脚本

let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);

 在把HTMLElement元素添加到DOM且执行到这段代码之前不会发送请求。默认情况下，以这种方式创建的<script>元素时以异步方式加载的，相当于添加了async属性。但这样有个问题，不是所有的浏览器都支持async属性。因此，如果要统一动态脚本的加载行为，可以明确将其设置为同步加载:

let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);

以这种方式获取的资源对浏览器预加载是不可见的。这会严重影响他们在资源获取队列中的优先级。根据应用程序的工作方式以及怎么使用，这种方式可能会严重影响性能。要想让预加载器知道这些动态请求的文件的存在，可以在文档头部显式声明它们:

<link rel="preload" href="gibberish.js">