高性能javascript学习总结（1）--加载与运行

浏览数：18 / 时间：2015年06月09日

一、脚本的位置

我们知道，一个<script>标签可以放在 HTML 文档的<head>或<body>标签中，但是浏览器是怎么加载和执行这些javascript呢？通常来说，浏览器对于Javascript的运行有两大特性：1）载入后马上执行，2）执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）。因为javascript可能会来操作HTML文档的DOM树，所以，浏览器一般都不会像并行下载css文件并行下载js文件， JavaScript 的下载仍然要阻塞其他资源的下载过程，例如图片。即使脚本之间的下载过程互不阻塞，页面仍旧要等待所有 JavaScript代码下载并执行完成之后才能继续。脚本阻塞其他页面资源的下载过程，所以你可以将所有<script>标签放在尽可能接近<body>标签底部的位置，尽量减少对整个页面下载的影响。另外，你也可以通过监听document.ready、window.onload等事件对js的加载进行处理。

二、脚本的个数

当我们在页面加载多个js文件时，一个 JavaScript 文件开始下载，会阻塞了其他文件的下载过程。进一步，在 file1.js下载完之后和 file2.js开始下载之前还有一个延时，这是 file1.js完全运行所需的时间。每个文件必须等待前一个文件下载完成并运行完之后，才能开始自己的下载过程。