高性能javascript学习总结(1)--加载与运行
一、脚本的位置
我们知道,一个<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完全运行所需的时间。每个文件必须等待前一个文件下载完成并运行完之后,才能开始自己的下载过程。
下载一个 100KB 的文件比下载四个 25KB的文件要快。总之,减少引用外部脚本文件的数量,你可以将这些文件整合成一个文件,只需要一个<script>标签引用,就可以减少性能损失。此外,非阻塞 JavaScript 加载库LABjs等的运用也能减少加载多个js文件的性能损失。