您的位置：首页 > Web前端 > JavaScript

js加载与执行机制解析

2012-06-19 22:48 204 查看

执行外部脚本的方法：

1. 如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）

2.如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行

3.如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

阻塞特性：

如果既不使用 async 也不使用 defer，当浏览器在执行JS 代码时，不能同时做其他任何事情，无论其代码是内嵌的还是外部的。

脚本位置：

浏览器在碰到一个引入外部JS 文件的<script>标签时会停下所有工作来下载并解析执行它，在这个过程中，页面渲染和用户交互完全被阻塞了，为了避免页面加载时的停顿甚至空白页的出现，JS 脚本应尽量放置在页面底部。

<html>
<head>
<title></title>
<!-- 这里顺便说一下，推荐把css文件放在head里，因为页面渲染需要css -->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>

<p>页面内容</p>

<!-- 推荐把js放在页面底部： -->
<script type="text/javascript" src="file.js"></script>
</body>
</html>

组织脚本：

为了改善上面的阻塞情况，应尽可能的减少页面中<script>标签的出现次数，这同时也是考虑到HTTP 请求会带来额外的性能开销，也就是说应减少页面中外链脚本的数量。也可以手动合并你的多个JS 文件，也可采用类似Yahoo! combo handler 这样的实时在线服务来实现，例如下面的这个<script>标签实际上便载入了3个JS 文件：

<script type="text/javascript" src="http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js"></script>

无阻塞的脚本：

为了阻塞状况，这里提供了几个实现并行下载JS 脚本的方案。

1. 延迟的脚本

HTML4 为<script>标签定义了一个defer 属性，它能使这段代码延迟执行，然而该属性只有IE4+ 和Firefox 3.5+ 支持。声明了defer 属性的<script>会在DOM加载完成，window.onload 事件触发前被解析执行：

<script type="text/javascript" src="file.js" defer></script>

2. 动态脚本元素

通过DOM 动态地创建<script>元素并插入到文档中，文件在该元素被添加到页面时开始下载，这样无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。不过要注意使用这种方式加载的代码会立刻执行，这样需清楚的了解各文件的作用以及合理的执行顺序，此时跟踪并确保脚本下载完成并准备就绪是很有必要的，非IE浏览器会在<script>元素接收完成时触发一个load 事件，而IE 下则会触发一个readystatechange 事件并通过readyState 属性加以判断便可。以下是兼容地动态加载一个JS
脚本的函数：

function loadScript(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);
}

也可以将loadScript() 的执行串联起来:

loadScript('file1.js', function() {
loadScript('file2.js', function() {
loadScript('file3.js', function() {
//全部载入后的操作...
} );
} );
} );

3. XMLHttpRequest 脚本注入

即通过AJAX 方式加载，不过这种方式无法实现跨域加载，不适用于大型网站。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 脚本 function xmlhttprequest callback stylesheet 浏览器

相关文章推荐

新的分享

章节导航