我要飞翔
- 浏览: 39264 次
- 性别:
- 来自: 北京
-
最新评论
Javascript 异步加载详解
本文总结一下浏览器在 javascript 的加载方式。
关键词：异步加载（async loading），延迟加载（lazy loading），延迟执行（lazy execution），async 属性， defer 属性
一、同步加载与异步加载的形式
1. 同步加载
我们平时最常使用的就是这种同步加载形式：
<script src="http://yourdomain.com/script.js"></script>
同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。
js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为，所以默认同步执行才是安全的。
以前的一般建议是把<script>放在页面末尾</body>之前，这样尽可能减少这种阻塞行为，而先让页面展示出来。
简单说：加载的网络 timeline 是瀑布模型，而异步加载的 timeline 是并发模型。
2. 常见异步加载（Script DOM Element）
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
异步加载又叫非阻塞，浏览器在下载执行 js 同时，还会继续进行后续页面的处理。
这种方法是在页面中<script>标签内，用 js 创建一个 script 元素并插入到 document 中。这样就做到了非阻塞的下载 js 代码。
async属性是HTML5中新增的异步支持，见后文解释，加上好（不加也不影响）。
此方法被称为 Script DOM Element 法，不要求 js 同源。
将js代码包裹在匿名函数中并立即执行的方式是为了保护变量名泄露到外部可见，这是很常见的方式，尤其是在 js 库中被普遍使用。
例如 Google Analytics 和 Google+ Badge 都使用了这种异步加载代码：
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
但是，这种加载方式在加载执行完之前会阻止 onload 事件的触发，而现在很多页面的代码都在 onload 时还要执行额外的渲染工作等，所以还是会阻塞部分页面的初始化处理。
3. onload 时的异步加载
(function() {
function async_load(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent('onload', async_load);
else
window.addEventListener('load', async_load, false);
})();
这和前面的方式差不多，但关键是它不是立即开始异步加载 js ，而是在 onload 时才开始异步加载。这样就解决了阻塞 onload 事件触发的问题。
补充：DOMContentLoaded 与 OnLoad 事件
DOMContentLoaded : 页面(document)已经解析完成，页面中的dom元素已经可用。但是页面中引用的图片、subframe可能还没有加载完。
OnLoad：页面的所有资源都加载完毕（包括图片）。浏览器的载入进度在这时才停止。
这两个时间点将页面加载的timeline分成了三个阶段。
4.异步加载的其它方法
由于Javascript的动态特性，还有很多异步加载方法：
* XHR Eval
* XHR Injection
* Script in Iframe
* Script Defer
* document.write Script Tag
* 还有一种方法是用 setTimeout 延迟0秒 与 其它方法组合。
XHR Eval ：通过 ajax 获取js的内容，然后 eval 执行。
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState != 4 ) return;
eval(xhrObj.responseText);
};
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');
Script in Iframe：创建并插入一个iframe元素，让其异步执行 js 。
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open().write('<body onload="insertJS()">');
doc.close();
GMail Mobile：页内 js 的内容被注释，所以不会执行，然后在需要的时候，获取script元素中 text 内容，去掉注释后 eval 执行。
<script type="text/javascript">
/*
var ...
*/
</script>
详见参考资料中2010年的Velocity 大会 Steve Souders 和淘宝的那两个讲义。
二、async 和 defer 属性
1. defer 属性
<script src="file.js" defer></script>
defer属性声明这个脚本中将不会有 document.write 或 dom 修改。
浏览器将会并行下载 file.js 和其它有 defer 属性的script，而不会阻塞页面后续处理。
defer属性在IE 4.0中就实现了，超过13年了！Firefox 从 3.5 开始支持defer属性 。
注：所有的defer 脚本保证是按顺序依次执行的。
2. async 属性
<script src="file.js" async></script>
async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。
Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer，这样IE 4之后的所有 IE 都支持异步加载。
3. 详细解释
<script> 标签在 HTML 4.01 与 HTML5 的区别：
* type 属性在HTML 4中是必须的，在HTML5中是可选的。
* async 属性是HTML5中新增的。
* 个别属性（xml:space）在HTML5中不支持。
说明：
1. 没有 async 属性，script 将立即获取（下载）并执行，然后才继续后面的处理，这期间阻塞了浏览器的后续处理。
2. 如果有 async 属性，那么 script 将被异步下载并执行，同时浏览器继续后续的处理。
3. HTML4中就有了defer属性，它提示浏览器这个 script 不会产生任何文档元素（没有document.write），因此浏览器会继续后续处理和渲染。
4. 如果没有 async 属性 但是有 defer 属性，那么script 将在页面parse之后执行。
5. 如果同时设置了二者，那么 defer 属性主要是为了让不支持 async 属性的老浏览器按照原来的 defer 方式处理，而不是同步方式。
另参见官方说明：script async
个人补充：
既然 HTML5 中已经支持异步加载，为什么还要使用前面推荐的那种麻烦（动态创建 script 元素）的方式？
答：为了兼容尚不支持 async 老浏览器。如果将来所有浏览器都支持了，那么直接在script中加上async 属性是最简单的方式。
三、延迟加载（lazy loading）
前面解决了异步加载（async loading）问题，再谈谈什么是延迟加载。
延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的js，而是在需要的时候或稍后再通过js 的控制来异步加载。
也就是将 js 切分成许多模块，页面初始化时只加载需要立即执行的 js ，然后其它 js 的加载延迟到第一次需要用到的时候再加载。
特别是页面有大量不同的模块组成，很多可能暂时不用或根本就没用到。
就像图片的延迟加载，在图片出现在可视区域内时（在滚动条下拉）才加载显示图片。
四、script 的两阶段加载 与 延迟执行（lazy execution）
JS的加载其实是由两阶段组成：下载内容（download bytes）和执行（parse and execute）。
浏览器在下载完 js 的内容后就会立即对其解析和执行，不管是同步加载还是异步加载。
前面说的异步加载，解决的只是下载阶段的问题，但代码在下载后会立即执行。
而浏览器在解析执行 JS 阶段是阻塞任何操作的，这时的浏览器处于无响应状态。
我 们都知道通过网络下载 script 需要明显的时间，但容易忽略了第二阶段，解析和执行也是需要时间的。script的解析和执行所花的时间比我们想象的要多，尤其是script 很多很大的时候。有些是需要立刻执行，而有些则不需要（比如只是在展示某个界面或执行某个操作时才需要）。
这些script 可以延迟执行，先异步下载缓存起来，但不立即执行，而是在第一次需要的时候执行一次。
利用特殊的技巧可以做到 下载 与 执行的分离 (再次感谢 javascript 的动态特性)。比如将 JS 的内容作为 Image或 object 对象加载缓存起来，所以就不会立即执行了，然后在第一次需要的时候再执行。
此部分的更多解释 请查看末尾参考资料中 ControlJS 的相关链接。
小技巧：
1. 模拟较长的下载时间：
写个后端脚本，让其 sleep 一定时间。如在 jsp 中 Thread.sleep(5000); ，这样5秒后才能收到内容。
2. 模拟较长的 js 代码执行时间（因为这步一般比较快不容易观察到）：
var t_start = Number(new Date());
while ( t_start + 5000 > Number(new Date()) ) {}
这个代码将使 js 执行5秒才能完成！
五、script 标签使用的历史
1. script 放在 HEAD 中
<head>
<script src=“…”></script>
</head>
* 阻止了后续的下载；
* 在IE 6-7 中 script 是顺序下载的，而不是现在的 “并行下载、顺序执行” 的方式；
* 在下载和解析执行阶段阻止渲染（rendering）；
2. script 放在页面底部（2007）
...
<script src=“…”></script>
</body>
* 不阻止其它下载；
* 在IE 6-7 中 script 是顺序下载的；
* 在下载和解析执行阶段阻止渲染（rendering）；
3. 异步加载script（2009）
var se = document.createElement
('script');
se.src = 'http://anydomain.com/A.js';
document.getElementsByTagName('head')
[0].appendChild(se);
这就是本文主要说的方式。
* 不阻止其它下载；
* 在所有浏览器中，script都是并行下载；
* 只在解析执行阶段阻止渲染（rendering）；
4. 异步下载 + 按需执行 (2010)
var se = new Image();
se.onload = registerScript();
se.src = 'http://anydomain.com/A.js';
把下载 js 与 解析执行 js 分离出来
* 不阻止其它下载；
* 在所有浏览器中，script都是并行下载；
* 不阻止渲染（rendering）直到真正需要时；
六、异步加载的问题
在异步加载的时候，无法使用 document.write 输出文档内容。
在同步模式下，document.write 是在当前 script 所在的位置输 出文档的。而在异步模式下，浏览器继续处理后续页面内容，根本无法确定 document.write 应该输出到什么位置，所以异步模式下 document.write 不可行。而到了页面已经 onload 之后，再执行 document.write 将导致当前页面的内容被清空，因为它会自动触发 document.open 方法。
实际上document.write的名声并不好，最好少用。
替代方法：
1. 虽然异步加载不能用 document.write，但还是可以onload之后执行操作dom（创建dom或修改dom）的，这样可以实现一些自己的动态输出。比如要在页面异步创建一个浮动元素，这和它在页面中的位置就没关系了，只要创建出该dom元素添加到 document 中即可。
2. 如果需要在固定位置异步生成元素的内容，那么可以在该固定位置设置一个dom元素作为目标，这样就知道位置了，异步加载之后就可以对这个元素进行修改。
六、JS 模块化管理
异步加载，需要将所有 js 内容按模块化的方式来切分组织，其中就存在依赖关系，而异步加载不保证执行顺序。
另外，namespace 如何管理 等相关问题。这部分已超出本文内容，可参考：
RequireJS 、 CommonJS 以及 王保平(淘宝)的 SeaJS 及其博客 。
七、JS最佳实践：
1. 最小化 js 文件，利用压缩工具将其最小化，同时开启http gzip压缩。工具：
2. 尽量不要放在 <head> 中，尽量放在页面底部，最好是</body>之前的位置
3. 避免使用 document.write 方法
4. 异步加载 js ，使用非阻塞方式，就是此文内容。
5. 尽量不直接在页面元素上使用 Inline Javascript，如onClick 。有利于统一维护和缓存处理。
参考资料：
Lazy Loading Asyncronous Javascript
Load Non-blocking JavaScript with HTML5 Async and Defer
2010年 Velocity China 上的两个讲义：
Steve Souders(Google)的 Even Faster Web Sites (pdf)
李穆(淘宝)的 第三方广告代码稳定性和性能优化实战 (pdf)
本文总结一下浏览器在 javascript 的加载方式。
关键词：异步加载（async loading），延迟加载（lazy loading），延迟执行（lazy execution），async 属性， defer 属性
一、同步加载与异步加载的形式
1. 同步加载
我们平时最常使用的就是这种同步加载形式：
<script src="http://yourdomain.com/script.js"></script>
同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。
js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为，所以默认同步执行才是安全的。
以前的一般建议是把<script>放在页面末尾</body>之前，这样尽可能减少这种阻塞行为，而先让页面展示出来。
简单说：加载的网络 timeline 是瀑布模型，而异步加载的 timeline 是并发模型。
2. 常见异步加载（Script DOM Element）
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
异步加载又叫非阻塞，浏览器在下载执行 js 同时，还会继续进行后续页面的处理。
这种方法是在页面中<script>标签内，用 js 创建一个 script 元素并插入到 document 中。这样就做到了非阻塞的下载 js 代码。
async属性是HTML5中新增的异步支持，见后文解释，加上好（不加也不影响）。
此方法被称为 Script DOM Element 法，不要求 js 同源。
将js代码包裹在匿名函数中并立即执行的方式是为了保护变量名泄露到外部可见，这是很常见的方式，尤其是在 js 库中被普遍使用。
例如 Google Analytics 和 Google+ Badge 都使用了这种异步加载代码：
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
但是，这种加载方式在加载执行完之前会阻止 onload 事件的触发，而现在很多页面的代码都在 onload 时还要执行额外的渲染工作等，所以还是会阻塞部分页面的初始化处理。
3. onload 时的异步加载
(function() {
function async_load(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent('onload', async_load);
else
window.addEventListener('load', async_load, false);
})();
这和前面的方式差不多，但关键是它不是立即开始异步加载 js ，而是在 onload 时才开始异步加载。这样就解决了阻塞 onload 事件触发的问题。
补充：DOMContentLoaded 与 OnLoad 事件
DOMContentLoaded : 页面(document)已经解析完成，页面中的dom元素已经可用。但是页面中引用的图片、subframe可能还没有加载完。
OnLoad：页面的所有资源都加载完毕（包括图片）。浏览器的载入进度在这时才停止。
这两个时间点将页面加载的timeline分成了三个阶段。
4.异步加载的其它方法
由于Javascript的动态特性，还有很多异步加载方法：
* XHR Eval
* XHR Injection
* Script in Iframe
* Script Defer
* document.write Script Tag
* 还有一种方法是用 setTimeout 延迟0秒 与 其它方法组合。
XHR Eval ：通过 ajax 获取js的内容，然后 eval 执行。
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState != 4 ) return;
eval(xhrObj.responseText);
};
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');
Script in Iframe：创建并插入一个iframe元素，让其异步执行 js 。
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open().write('<body onload="insertJS()">');
doc.close();
GMail Mobile：页内 js 的内容被注释，所以不会执行，然后在需要的时候，获取script元素中 text 内容，去掉注释后 eval 执行。
<script type="text/javascript">
/*
var ...
*/
</script>
详见参考资料中2010年的Velocity 大会 Steve Souders 和淘宝的那两个讲义。
二、async 和 defer 属性
1. defer 属性
<script src="file.js" defer></script>
defer属性声明这个脚本中将不会有 document.write 或 dom 修改。
浏览器将会并行下载 file.js 和其它有 defer 属性的script，而不会阻塞页面后续处理。
defer属性在IE 4.0中就实现了，超过13年了！Firefox 从 3.5 开始支持defer属性 。
注：所有的defer 脚本保证是按顺序依次执行的。
2. async 属性
<script src="file.js" async></script>
async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。
Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer，这样IE 4之后的所有 IE 都支持异步加载。
3. 详细解释
<script> 标签在 HTML 4.01 与 HTML5 的区别：
* type 属性在HTML 4中是必须的，在HTML5中是可选的。
* async 属性是HTML5中新增的。
* 个别属性（xml:space）在HTML5中不支持。
说明：
1. 没有 async 属性，script 将立即获取（下载）并执行，然后才继续后面的处理，这期间阻塞了浏览器的后续处理。
2. 如果有 async 属性，那么 script 将被异步下载并执行，同时浏览器继续后续的处理。
3. HTML4中就有了defer属性，它提示浏览器这个 script 不会产生任何文档元素（没有document.write），因此浏览器会继续后续处理和渲染。
4. 如果没有 async 属性 但是有 defer 属性，那么script 将在页面parse之后执行。
5. 如果同时设置了二者，那么 defer 属性主要是为了让不支持 async 属性的老浏览器按照原来的 defer 方式处理，而不是同步方式。
另参见官方说明：script async
个人补充：
既然 HTML5 中已经支持异步加载，为什么还要使用前面推荐的那种麻烦（动态创建 script 元素）的方式？
答：为了兼容尚不支持 async 老浏览器。如果将来所有浏览器都支持了，那么直接在script中加上async 属性是最简单的方式。
三、延迟加载（lazy loading）
前面解决了异步加载（async loading）问题，再谈谈什么是延迟加载。
延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的js，而是在需要的时候或稍后再通过js 的控制来异步加载。
也就是将 js 切分成许多模块，页面初始化时只加载需要立即执行的 js ，然后其它 js 的加载延迟到第一次需要用到的时候再加载。
特别是页面有大量不同的模块组成，很多可能暂时不用或根本就没用到。
就像图片的延迟加载，在图片出现在可视区域内时（在滚动条下拉）才加载显示图片。
四、script 的两阶段加载 与 延迟执行（lazy execution）
JS的加载其实是由两阶段组成：下载内容（download bytes）和执行（parse and execute）。
浏览器在下载完 js 的内容后就会立即对其解析和执行，不管是同步加载还是异步加载。
前面说的异步加载，解决的只是下载阶段的问题，但代码在下载后会立即执行。
而浏览器在解析执行 JS 阶段是阻塞任何操作的，这时的浏览器处于无响应状态。
我 们都知道通过网络下载 script 需要明显的时间，但容易忽略了第二阶段，解析和执行也是需要时间的。script的解析和执行所花的时间比我们想象的要多，尤其是script 很多很大的时候。有些是需要立刻执行，而有些则不需要（比如只是在展示某个界面或执行某个操作时才需要）。
这些script 可以延迟执行，先异步下载缓存起来，但不立即执行，而是在第一次需要的时候执行一次。
利用特殊的技巧可以做到 下载 与 执行的分离 (再次感谢 javascript 的动态特性)。比如将 JS 的内容作为 Image或 object 对象加载缓存起来，所以就不会立即执行了，然后在第一次需要的时候再执行。
此部分的更多解释 请查看末尾参考资料中 ControlJS 的相关链接。
小技巧：
1. 模拟较长的下载时间：
写个后端脚本，让其 sleep 一定时间。如在 jsp 中 Thread.sleep(5000); ，这样5秒后才能收到内容。
2. 模拟较长的 js 代码执行时间（因为这步一般比较快不容易观察到）：
var t_start = Number(new Date());
while ( t_start + 5000 > Number(new Date()) ) {}
这个代码将使 js 执行5秒才能完成！
五、script 标签使用的历史
1. script 放在 HEAD 中
<head>
<script src=“…”></script>
</head>
* 阻止了后续的下载；
* 在IE 6-7 中 script 是顺序下载的，而不是现在的 “并行下载、顺序执行” 的方式；
* 在下载和解析执行阶段阻止渲染（rendering）；
2. script 放在页面底部（2007）
...
<script src=“…”></script>
</body>
* 不阻止其它下载；
* 在IE 6-7 中 script 是顺序下载的；
* 在下载和解析执行阶段阻止渲染（rendering）；
3. 异步加载script（2009）
var se = document.createElement
('script');
se.src = 'http://anydomain.com/A.js';
document.getElementsByTagName('head')
[0].appendChild(se);
这就是本文主要说的方式。
* 不阻止其它下载；
* 在所有浏览器中，script都是并行下载；
* 只在解析执行阶段阻止渲染（rendering）；
4. 异步下载 + 按需执行 (2010)
var se = new Image();
se.onload = registerScript();
se.src = 'http://anydomain.com/A.js';
把下载 js 与 解析执行 js 分离出来
* 不阻止其它下载；
* 在所有浏览器中，script都是并行下载；
* 不阻止渲染（rendering）直到真正需要时；
六、异步加载的问题
在异步加载的时候，无法使用 document.write 输出文档内容。
在同步模式下，document.write 是在当前 script 所在的位置输 出文档的。而在异步模式下，浏览器继续处理后续页面内容，根本无法确定 document.write 应该输出到什么位置，所以异步模式下 document.write 不可行。而到了页面已经 onload 之后，再执行 document.write 将导致当前页面的内容被清空，因为它会自动触发 document.open 方法。
实际上document.write的名声并不好，最好少用。
替代方法：
1. 虽然异步加载不能用 document.write，但还是可以onload之后执行操作dom（创建dom或修改dom）的，这样可以实现一些自己的动态输出。比如要在页面异步创建一个浮动元素，这和它在页面中的位置就没关系了，只要创建出该dom元素添加到 document 中即可。
2. 如果需要在固定位置异步生成元素的内容，那么可以在该固定位置设置一个dom元素作为目标，这样就知道位置了，异步加载之后就可以对这个元素进行修改。
六、JS 模块化管理
异步加载，需要将所有 js 内容按模块化的方式来切分组织，其中就存在依赖关系，而异步加载不保证执行顺序。
另外，namespace 如何管理 等相关问题。这部分已超出本文内容，可参考：
RequireJS 、 CommonJS 以及 王保平(淘宝)的 SeaJS 及其博客 。
七、JS最佳实践：
1. 最小化 js 文件，利用压缩工具将其最小化，同时开启http gzip压缩。工具：
2. 尽量不要放在 <head> 中，尽量放在页面底部，最好是</body>之前的位置
3. 避免使用 document.write 方法
4. 异步加载 js ，使用非阻塞方式，就是此文内容。
5. 尽量不直接在页面元素上使用 Inline Javascript，如onClick 。有利于统一维护和缓存处理。
参考资料：
Lazy Loading Asyncronous Javascript
Load Non-blocking JavaScript with HTML5 Async and Defer
2010年 Velocity China 上的两个讲义：
Steve Souders(Google)的 Even Faster Web Sites (pdf)
李穆(淘宝)的 第三方广告代码稳定性和性能优化实战 (pdf)
分享到：
发表评论
-
jquery 下拉菜单
2015-05-08 14:53 598http://sc.chinaz.com/jiaoben/ca ... -
JSP 页面缓存以及清除缓存
2015-01-16 16:15 683JSP 页面缓存以及清除 ... -
ie 浏览器
2013-10-23 16:53 554<!--[if IE]>….<![end ... -
CSS强制文本不换行
2013-09-05 13:14 892在一个规定宽度大小的u ... -
判断浏览器
2013-04-17 11:15 588下面整理的是一套判断方法： function getExplo ... -
JS刷新父窗口的几种方式
2013-01-29 10:40 713JS刷新父窗口的几种方式 浮层内嵌iframe及frame集合 ... -
js map
2012-08-10 08:52 829<mce:script type="text/ ... -
js 全角半角
2012-08-10 08:53 854一、用JS把全角转换成半角（不能转换标点符号） <in ... -
毫秒值转换日期格式
2012-05-11 09:03 1121var oldTime = (new Date("2 ... -
鼠标滚轴事件
2011-12-19 11:33 784鼠标滚轴事件 2009/12/30 11:13 <!DO ... -
键盘按键编码
2011-12-05 11:01 2394<html> <head> </ ... -
火狐 插件安装路径
2011-11-03 17:33 945C:\Documents and Settings\用户名\A ... -
ajax传递中文参数乱码.txt
2011-11-03 17:30 2571最近在开发中碰到ajax传递中文参数乱码的问题，弄了很久才搞定 ... -
如何让鼠标指针变成一个小手状
2011-09-18 10:46 3508JavaScript中onmouseover时如何让鼠标指针变 ... -
正则表达式
2011-09-13 13:37 668整数或者小数：^[0-9]+\.{0,1}[0-9]{0,2} ... -
jquery 城市选择
2011-05-20 11:22 1652jquery 城市选择 -
jquery 解析 xml
2011-05-02 15:43 821<html xmlns="http://www ... -
按下回车事件
2011-01-18 10:27 931//按下回车事件 <body onKeyDown = ... -
jquery 选择器用法大全
2011-01-18 10:11 759附件中。jquery 选择器用法大全.rar -
js 判断浏览器
2011-01-17 13:20 865在网站前端开发中，浏览器兼容性问题本已让我们手忙 ...
相关推荐
一、同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式： [removed][removed] 同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像...
主要介绍了Javascript之图片的延迟加载的实例详解的相关资料,这里对延迟加载和异步加载进行了详解和使用方法，需要的朋友可以参考下
下载是异步的没问题，但是每个javascript执行的时候还是同步的，就是先出现的script标签一定是先执行，即使是并行下载它是最后一个下载完成的，除非标有defer的script标签。任何javascript在执行的时候都会中断当前...
实现异步加载的javascript运行结果的提取
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载...
在这篇文章里，我会实现一个可重用的函数来处理 JavaScript 延时异步操作。有需要的小伙伴们可以参考借鉴，下面来一起看看。
前段时间看了阮一峰的jQuery的deferred对象详解一文，对jQuery中的deferred的用法了一些了解，今天看到园子里的一篇文章：关于重构JS前端框架的失败经验（顺便怀念那些死去的代码），于是把我之前写的一个利用jQuery...
javascript的一些知识点： ...外联样式一般写在body的最后，因为放在前面会先加载js代码然后再干其他的，影响用户体验。 7.同步和异步 同步：一行一行依次执行。 异步：可以同时执行几段内容 如：[removed]
AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。 ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和...
Android模仿易网新闻页面源码(异步加载).zip Android瀑布流实现，类似于蘑菇街和迷尚 应用里的排列.zip android面试题.zip Android任务管理器源码.zip Android奇艺高清UI界面源代码.zip android网络视频播放器（完整...
4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持多种事件响应及反馈 6、支持 Tree 的节点移动、编辑、删除 7、支持极其灵活的 checkbox & radio 选择功能 8、支持任意更换皮肤 / 个性化图标...
JSON适用于进行数据交互的场景，典型的是Ajax中实现异步加载；为了支持跨平台、数据安全等的Web Service也可以使用（API接口返回值）。 JSON(JavaScript Object Notation)是一种完全独立于语言的、轻量级的数据交换...
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 对于JavaWeb项目而言，ajax主要用于浏览器和服务器之间数据的传输。 如果...
AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行...
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下...
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是一种用于创建快速动态网页的技术。 动态网页：是指可以通过服务器语言结合数据库随时修改数据的网页。 静态网页，随着html代码的生成，页面的...
8.6.2 WebView中对JavaScript的支持 8.7 Gallery (画廊) 8.8 SlidingDrawer（滑动抽屉） 8.9 Dialog（对话框） 8.9.1 AlertDialog警告框 8.9.2 ProgressDialog进度框 8.9.3 DatePickerDialog & TimePickerDialog...
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 一、ajax所包含的技术 大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。 使用CSS和XHTML来表示。 使用DOM...
54详解ngModel数据绑定151 理解ngModelController151 在模型与视图之间转换值152 追踪值是否变化152 跟踪input字段有效性153 55校验AngularJS表单153 理解ngFormController153 运用name属性将表单附加到作用...