html 插入script,HTML中的script标签研究

Script 的堵塞(block)特性

Scripts without async or defer attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page. - MDN

the blocking nature of JavaScript, which is to say that nothing else can happen while JavaScript code is being executed. In fact, most browsers use a single process for both user interface (UI) updates and JavaScript execution, so only one can happen at any given moment in time. The longer JavaScript takes to execute, the longer it takes before the browser is free to respond to user input. - Nicholas C. Zakas「High Performance JavaScript 」

上面引用两段话的意思大致是，当浏览器解析DOM文档时，一旦遇到 script 标签(没有defer 和 async 属性)就会立即下载并执行，与此同时浏览器对文档的解析将会停止，直到 script 代码执行完成。出现这种堵塞行为一方面是因为浏览器的UI渲染，交互行为等都是单线程操作，另一方是因为 script 里面的代码可能会影响到后面文档的解析，比如下面的代码：

html

document.write("The date is " + (new Date()).toDateString());

这个堵塞特性会严重的影响用户体验，下面是几种优化方案：

尽量把脚本往文档的后面放，以减少对文档的堵塞，最好放在