无阻塞加载脚本,按序执行

通常加载页面的时候,对于组件是并行下载的,现代大部分浏览器对于Js同样也是支持并行下载,但是在脚本下载、解析并执行完毕之前,不会开始下载任何其他内容。

正常引入:

可以看出,在脚本下载完毕后的一段时间内(该时间在解析执行脚本),不会对其他组件进行下载,以下几种方案解决该问题。

1. XHR Eval加载脚本:

即使用ajax引入脚本,并通过eval对其执行。

代码:

var xhrObj = getXHRObject();

xhrObj.onreadystatechange = function(){

if(xhrObj.readyState == 4 && xhrObj.status == 200){

eval(xhrObj.respoenseText);

}

}

xhrObj.open(‘GET‘, ‘js/User/search.js‘, true);

xhrObj.send();

function getXHRObject(){

var xhrObj = false;

if(window.XMLHttpRequest){

xhrObj = new XMLHttpRequest();

}else{

//IE6,5

xhrObj = new ActiveXObject("Microsoft.XMLHTTP");

}

return xhrObj;

};

该方法的主要缺点是:脚本必须部署在和主页面相同的域中,参见同源策略。

2.XHR注入:

类似于XHR Eval,XHR注入也是通过ajax来获取脚本,不同的是该方法为创建一个script的DOM元素,并将脚本内容插入。

代码(getXHRObject代码如上):

var xhrObj = getXHRObject();

xhrObj.onreadystatechange = function(){

if(xhrObj.readyState == 4 && xhrObj.status == 200){

var scriptElm = document.createElement(‘script‘);

document.getElementsByTagName(‘head‘)[0].appendChild(scriptElem);

scriptElm.text = xhrObj.responseText;

}

}

xhrObj.open(‘GET‘, ‘js/User/search.js‘, true);

xhrObj.send();

缺点:同上 受同源策略的影响。

3.Iframe引入:

该方法为将js改成html文件,并把外部脚本写进为内行脚本,同时需要对父级和iframe文档进行关联,同样受同源策略的影响。

<iframe src="search.html" width=0 height=0 frameborder="0"></iframe>

缺点:iframe消耗性能大,维护性低,不推荐使用。

4.Script DOM Element

通过创建一个script的DOM元素,并设置其src引用脚本。

代码:

var scriptElm = document.createElement(‘script‘);

scriptElm.src = "js/User/search.js";

document.getElementsByTagName(‘head‘)[0].appendChild(scriptElm);

优点:代码短,不受同源策略影响,无需重构代码。

5.Defer

大部分浏览器支持的属性 在引用时加入

代码:

<script defer src="js/User/search.js"  ></script>

时间: 2024-10-10 09:38:58

无阻塞加载脚本,按序执行的相关文章

无阻塞加载脚本

一个页面,从被请求访问,到用户可以看到页面.操作页面,到最后页面完全加载完毕,中间需要经历一个相当奇幻的过程,这个过程的速度被"web性能师"孜孜不倦.前赴后继的优化.本文讨论的是其中一个优化. 浏览器线程和阻塞 虽然大家耳熟能详的一句话是: JavaScript是单线程的. 但是: 浏览器当然不是单线程的. 浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询.监听用户事件. 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览

无阻塞加载脚本的方案

1.动态加载脚本 <script type="text/javascript"> function loadScript(url){ var script=document.createElement("script"); script.type="text/javascript"; script.src=url; document.body.appendChild(script); } loadScript("js/sid

探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密

原文:探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密 下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问百度首页的情景. 在firefox的请求瀑布图里有个表现非常之明显:就是javascript文件下载完毕后,有一段时间是没有网络请求被处理的,这段时间过后http请求才会接着执行,这段空闲时间就是所谓的http请求被阻塞

性能优化之无阻塞加载脚步方法比较

秋招结束了~~,好像偷懒了很久,没更博了.总结一下自己近来看书的内容. 说明一下,内容大部分来自<高性能网站建设进阶指南>. 乱入内容 Web应用和传统桌面应用有一个共同的目标:尽可能快地响应用户输入. 怎样才算是快?Jakob Nielsen是Web可用性领域知名且备受推崇的专家,引用他的观点来说就是:如果JavaScript代码执行时间超过了0.1秒,页面将会给人不够平滑快捷的感觉,如果执行时间超过了1秒,则会感到应用程序缓慢,超过了10秒,那么用户将会非常沮丧. 性能分析器:Firebu

无阻塞加载js,防止因js加载不了影响页面显示

浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢,就可以用到无阻塞加载js技术. Dynamic Script Elements 动态脚本元素 DOM允许我们使用Javascript动态创建HTML的几乎所有文档内容,一个新的<script>元素可以非常容易的通过标准DOM创建: var script = document.createElem

JavaScript非阻塞加载脚本

As more and more sites evolve into “Web 2.0″ apps, the amount of JavaScript increases. This is a performance concern because scripts have a negative impact on page performance. Mainstream browsers (i.e., IE 6 and 7)  block in two ways: Resources in t

脚本无阻塞加载

(图片来源:http://www.cnblogs.com/sharpxiajun/p/4072396.html) 这是清除浏览器缓存后,第一次访问百度首页的场景,在Firefox的瀑布图中可以看到:javascript文件下载完毕后,有一段时间没有请求处理.这段时间过后,请求才会接着执行,这段时间就是HTTP请求阻塞. 当浏览器遇到<script>标签时,浏览器会停止处理页面,先执行Javascript代码,然后再继续解析和渲染页面.在这个过程中,页面和用户的交互完全被阻塞了.通常表现为显示空

【转】高性能Javascript--脚本的无阻塞加载策略

原文转自:http://blog.jobbole.com/78191/ Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题. 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 .原因是,事实上,大多数浏览器使用单进程处理UI和更新Javascript运行等多个任务,而同一时间只能有一个任务被执行.Javascript运行了多长时间,那么在浏览器空闲下来响应用户交互之前的等待时间就有多长. 从基本层面说,这意味着<script>标签的出现使整个页

高性能Javascript--脚本的无阻塞加载策略

Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题. 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 .原因是,事实上,大多数浏览器使用单进程处理UI和更新Javascript运行等多个任务,而同一时间只能有一个任务被执行.Javascript运行了多长时间,那么在浏览器空闲下来响应用户交互之前的等待时间就有多长. 从基本层面说,这意味着<script>标签的出现使整个页面因脚本解析.运行而出现等待.不论实际的 JavaScript 代码是内