时间:2021-05-18
由于浏览器是单线程的,因此脚本在载的时候会阻塞下载其它资源;虽然在现在浏览器已经有所改善,但仍然有待改进。
很显然,脚本必须按顺序执行,但没有必要按顺序下载,解决方法:
1。内嵌JS
通常由于页面大小和缓存能带来更多好处,因此外部文件引入JS更好一些;
在少数情况下,比如首页、少量JS情况下尚可接受。
2。XHR Eval
通过XMLHttpRequest从服务器端获取脚本。
主要缺陷是,通过XHR获取的脚本必须部署在和主页面相同的域中。
复制代码 代码如下:
Ajax.get("test.js", function (xhr) {
eval(xhr.responseText);
});
3。XHR注入
使用XHR获取脚本并创建script标签。
同样,通过XHR获取的脚本必须部署在和主页面相同的域中。
复制代码 代码如下:
Ajax.get('test.js', function (xhr) {
injectscript(xhr.responseText);
});
function injectscript(scriptText) {
var s = document.createElement('script');
s.text = scriptText;
document.getElementsByTagName('head')[0].appendChild(s);
}
4。Script in Iframe
将需要的脚本放入到一个页面中,然后通过iframe来加载该页面。
缺点是iframe本身的开销比较大,另外浏览器安全机制不允许iframe中的js访问跨域的父页面,反之亦然。
5。Script DOM Element
JS动态创建script DOM元素并设置其src属性。
复制代码 代码如下:
var scriptElem = document.createElement('script');
scriptElem.src = 'http://domain.com/test.js';
document.ge('head')[0].appendChild(scriptElem);
6。Script Defer
给script标签添加defer属性。
缺点是只有IE和一些新浏览器支持。
复制代码 代码如下:
<script defer src='test.js'></script>
7。document.write Script Tag
使用document.write把HTML标签script写入页面。
缺点是只有在IE中是并行加载脚本的。
复制代码 代码如下:
document.write("<script type='text/javascript' src='test.js'><\/script>");
有一个大家不曾广泛讨论的不同点是对于浏览器忙碌状态的影响,包括浏览器的状态栏、进度条、Tab图标以及鼠标。
当你加载多个彼此间有依赖关系的脚本时,还需要一种能够保证执行顺序的技术。
技术
并行下载
可以跨域
存在Script标签
忙碌指示
顺序保证
大小(bytes)
XHR Eval
IE, FF, Saf, Chr, Op
no
no
Saf, Chr
-
~500
XHR Injection
IE, FF, Saf, Chr, Op
no
yes
Saf, Chr
-
~500
Script in Iframe
IE, FF, Saf, Chr, Op
no
no
IE, FF, Saf, Chr
-
~50
Script DOM Element
IE, FF, Saf, Chr, Op
yes
yes
FF, Saf, Chr
FF, Op
~200
Script Defer
IE, Saf4, Chr2, FF3.1
yes
yes
IE, FF, Saf, Chr, Op
IE, FF, Saf, Chr, Op
~50
document.write Script Tag
IE, Saf4, Chr2, Op
yes
yes
IE, FF, Saf, Chr, Op
IE, FF, Saf, Chr, Op
~100
在大多数情况下,Script DOM Element是一个好的选择。这种方式适用于所有的浏览器,而且没有跨域的限制,实现起来也非常的简单和易于理解。唯一的缺点是不能保证各个脚本的执行顺序。如果需要加载多个有依赖关系的脚本,应该将这些脚本拼成一个来保证其按需要的顺序执行,或者使用别的技术。声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
这篇文章主要介绍了Oracle中查看引起Session阻塞的2个脚本分享,本文给出了2个脚本来查询导致Session阻塞的原因,并给出Kill引起阻塞的Sess
无阻塞加载javascript,对于页面性能优化有很大的作用,这样能有效的减少js对页面加载的阻塞。特别是一些广告js文件,由于广告内容有可能是富媒体,更是很可
(译者注:异步加载,可以理解为无阻塞并发处理.)我对于HTML5感到兴奋不已的原因之一是它实现了众多业界期待已久的特性。我们一直需要输入框显示空白提示,但都是用
H3CS1224是H3C公司自主开发的全千兆无管理以太网交换产品,提供了24个10/100/1000M以太网端口,所有端口均支持全线速无阻塞交换以及MDI/MD
我们经常使用动态创建JavaScript的方式来实现JavaScript文件的无阻塞(Non-blocking)、并行下载(Parallel)。其实还可以添加自