重读《Javascript高级程序设计》二

第二章 在 HTML 中使用 Javascript

 

留下一些问题

• script 标签的 defer 和 async 细节

两属性都只针对外部引用，html 4 定义 defer，h5 定义 async

 

通常浏览器下载解析 html 时，遇到引用的 script 会按顺序下载（也许默认异步）然后按顺序执行，下载和执行都会阻塞浏览器解析渲染文档。当遇到 defer 时，则会保证该脚本会在文档 ready 之后执行，只影响执行时机，多个 defer 则按照标签的出现顺序；而 async 则表示立刻异步下载该脚本，哪个先下载完则立刻执行。

 

标准上，要求 defer 执行先于 DOMContentLoaded ，但是各浏览器可能，chrome没问题；而 async 与 DOMContentLoaded 先后完全取决于 脚本下载完成 与 DOMContentLoaded 的先后。关于两者的不同可以参考 https://www.webkit.org/blog/1395/running-scripts-in-webkit/

 

• 目前来说，实践 JS 异步的方式有哪些？

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

因为兼容性问题，defer 和 async 更多适用于 H5，那么为了让JS异步，可以通过

1、 动态创建 script 标签 

2、xhr请求脚本代码，然后在拼成内嵌script添加到文档中，好处是可以控制执行时机

3、xhr请求脚本代码，然后通过 eval 方法执行

4、通过iframe 下载脚本代码，类似#2 #3

 

• 如果 defer 能正常使用，那么把 script 放在 body 前面并加上 defer，是否跟 “script 放在 `</body>` 前效果一样？

http://www.zhihu.com/question/20546709

 

从浏览器解析执行 html 的过程来看，浏览器是边下载边解析 html，那么当在 body 结束前遇到 script，如果没有 defer 那么会立刻下载解析执行，会阻塞浏览器渲染，如果有 defer，浏览器完全可以继续下载后续的 html （即便只是标签的结束部分），等整的把整个文档下载完，再去执行那些 defer 的 script，如果只是一个脚本，我想现实效果没多大差别。

 

• script 标签结束符不能出现在代码里，浏览器解析xml类语法机制

只有 < 和 & 在XML内容中直接出现是非法的，需要用实体符号 &amp; 和 &lt; 来表示，同理，也不能在内容中直接写结束标签。在 script 标签内也不能出现类似 alert("</script>") 这样的代码，当然可以通过转义 alert("<\/script>")，否则一旦解析到这里就回认为结束了。 

 

• 页面解析遇到script标签是，浏览器都做了什么事情

 

• `<script/>`这样简写闭合可以吗？最新的html标准里面如何规定，哪些标签可以缩写闭合

过程好复杂，xhtml 要求每个元素必须闭合，无内容的标签可以自闭合，html没有自闭规则。

参考 http://blog.jobbole.com/61514/

w3c 的 H5 标准是：

此类标签应由下列部分组成，顺序须与下表保持一致：

• 一个 “<” 字符。
• 标签名。
• 此项可选，一个或多个属性，每一个属性的前面必须有一个或多个空格。
• 此项可选，一个或多个空格。
• 此项可选，一个 “/” 字符，此项只能在无内容元素中出现。
• 一个 “>” 字符。

倒数第二部分的 “/” 字符是可选的，而且没有任何实际含义。所以 <br> 和 <br /> 其实没有实质区别，另外要注意，script是有内容标签，所以严格来说，script 没有自闭一说。

 

• 如果具有 src 属性的 script 标签内还嵌入 js 代码，那么按标准，浏览器怎么解析执行