高性能JavaScript（1） | 全面回忆 | zhangdiweb | zhangdi

多说浏览器使用单一进程来处理UI刷新和JavaScript执行，所以JavaScript执行时间越长，浏览器等待响应的时间就越长。无论是内嵌脚本还是外链文件，浏览器渲染都必须停下来等待脚本执行完成。

脚本位置

<script>标签可以出现在<head>或<body>中，浏览器在解析到<body>之前，不会渲染页面的任何部分，因此将脚本放到页面的顶部将会导致明显的延迟。目前浏览器都支持资源的并行下载，<script>标签在下载外部资源时不会阻塞其他<script>标签，但是仍然会阻塞其他资源的下载，如图片。尽管下载过程不会互相影响，但是渲染过程仍然得在JavaScript下载并执行之后才能继续。

因此推荐将<script>标签尽可能放到<body>底部，减少页面渲染的影响。

无阻塞的脚本

无阻塞脚本，在页面加载完成后才加载JavaScript代码，意味着在window的load事件触发后在下载脚本。

延迟脚本

<script>标签的defer属性指明脚本不会修改DOM，因此代码能安全地延迟执行。当页面解析到带有defer的<script>标签是开始下载，并不会执行，直到DOM加载完成。带有defer属性的<script>标签下载不会阻塞浏览器的其他进程。不论内嵌还是外链脚本，都不会在DOM加载前执行。除了defer属性还有async属性，用于异步加载脚本，相同点都是并行下载，区别在于执行时机，async是加载完成后自动执行，而defer需要等待页面加载完成后执行。

动态脚本元素

var script = document.createElement("script")
script.type = "text/javascript"
script.src = "file.js"
document.getElementByTagName("head")[0].appendChild(script)

这个file.js在元素被添加到页面是开始下载，重点在于，无论何时下载，文件的下载和执行过程不会阻塞页面的其他进程。