DOM启蒙——第十章

1.插入与执行JavaScript

●通过引入外部JavaScript文件或者编写内联JavaScript来添加JavaScript到HTML文档。

●两种添加JavaScript到HTML文档的方式都需要使用script元素节点，script元素可以包含JavaScript代码或者使用src属性引入外部JavaScript文件链接。

●在同一个script标签里引入外部JavaScript并且在内部编写内联JavaScript会导致内联JavaScript被忽略

●应该避免使用自关闭脚本标签<script src=""  />

●script标签没有任何必须的属性，可选属性有async、charset、defer、src和type

●如果JavaScript代码包含字符串</script>，那么需要将之转义为<\/script>

2.JavaScript默认同步解析

●默认情况下，当DOM在解析且遇到一个script元素时候，它将停止解析文档，阻止下一步的渲染与下载并执行该JavaScript.此行为时阻塞的，不允许并行解析DOM或者执行JavaScript，因此它被认为是同步的。当执行完毕JavaScript后将会继续文档解析。

●若在HTML页头有一些脚本，则会在它们一次下载执行完毕后才会解析DOM。

3. "<script defer src="..."></script>"将会延迟执行此JavaScript,在html元素节点解析完成之前忽略此JS

使用defer的一个前提是document.write()不会再被推迟的JavaScript中使用。

4.使用async异步下载执行外部JavaScript

●通过此属性可以让浏览器放弃顺序加载,不会阻塞html页面构建。

●使用此属性的一个前提是document.write()不会再被推迟的JavaScript中使用。

●async缺点是JS文件可能完全不按照顺序解析

●如果在一个script元素上使用async和defer，async会覆盖defer

5.使用动态<script>元素强制异步加载并解析JavaScript

●动态创建<script>元素并且引入外部JS并且添加它们到DOM可以强制浏览器以异步方式处理此JavaScript

●缺点是JS文件可能完全不按照顺序解析

6. 通过给异步script添加onload回调从而知道它们何时加载完毕。

script元素支持onload，一旦外部JS加载执行完毕就执行此回调。

var underScript=document.createElement("script");

underScript.src="jQuery.js";

document.body.appendChild(underScript);

underScript.οnlοad=function(){alert("underScript加载执行完毕")}

7.含有DOM操作的script

由于script的同步天性，如果JS执行依赖任何在某个script元素之后的DOM结构，将会遇到错误。

8.获取DOM中script列表

文档对象上可用document.scripts属性获取当前DOM中所有脚本元素的列表HTMLCollection

Array.prototype.slice.call(document.scripts).forEach(function(elm){

    console.log(elm,elm.src)