1.为了避免页面加载时的停顿甚至空白页的出现,JS 脚本应尽量放置在页面底部.
2.改善页面的阻塞情况,应尽可能的减少页面中<script>标签的出现次数,这同时也是考虑到HTTP 请求会带来额外的性能开销,也就是说应减少页面中外链脚本的数量。可以把相关JS文件合并,通过相关工具实现。
解决页面阻塞情况,提供如下解决方案:
1. 延迟的脚本
HTML4 为<script>标签定义了一个defer 属性,它能使这段代码延迟执行,然而该属性只有IE4+ 和Firefox 3.5+ 支持。声明了defer 属性的<script>会在DOM加载完成,window.onload 事件触发前被解析执行:
2. 动态脚本元素
这是最通用的解决方案,通过DOM 动态地创建<script>元素并插入到文档中,文件在该元素被添加到页面时开始下载,这样 无论在何时启动下载,文件的下载和执行过程不会阻塞页面其他进程。
不过要注意使用这种方式加载的代码会立刻执行,这样需清楚的了解各文件的作用以及合理的执行顺序,此时跟踪并确保脚本下载完成并准备就绪是很有必要的,非IE浏览器会在<script>元素接收完成时触发一个load 事件,而IE 下则会触发一个readystatechange 事件并通过readyState 属性加以判断便可。以下是兼容地动态加载一个JS 脚本的函数:
function
load_script(url, callback) {
var
script = document.createElement(
'script'
);
script.type =
'text/javascript'
;
if
(script.readyState) {
//IE
script.onreadystatechange =
function
() {
if
(script.readyState ==
'loaded'
|| script.readyState ==
'complete'
) {
script.onreadystatechange =
null
;
callback();
}
}
}
else
{
//others
script.onload =
function
() {
callback();
}
}
script.src = url;
document.getElementsByTagName(
'head'
)[0].appendChild(script);
}
3. XMLHttpRequest 脚本注入
即通过AJAX 方式加载,不过这种方式无法实现跨域加载,不适用于大型网站。