几种提高javascript载入速度的方式(异步非阻塞的)
0. 直接document.write
<script language="javascript">
document.write("<script src='test.js'><\/script>");
</script>
1. 动态创建script元素
原理:动态生成一个script的DOM元素,并设置它的src和type属性,之后附加到document.body的后面,这种方式是我们很常 用的,值得庆幸的是,它也不会阻塞后面资源的加载。HTTP瀑布图效果图如下(还可以通过firebug来查看):
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "event.js";
document.getElementsByTagName("head")[0].appendChild(script);
2. 用XMLHttpRequest取得要脚本的内容,再创建Script对象
原理:这个跟XML Eval的方式差不多。也是通过XMLHttpRequest的方式来加载外部的Javascript文件,不过之后是动态生成一个script标签,并 设置script标签的text属性为XHR返回的Javascript代码,这种方式也没有阻塞后面的资源的下载。HTTP瀑布图效果图如下(还可以通 过firebug来查看):
var createXHR = function(){
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xhr;
}
var xhr = createXHR();
xhr.open("GET", "event.js", true);
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 || xhr.status === 200) {
var script = document.createElement("script");
document.getElementsByTagName("head")[0].appendChild(script);
script.text = xhr.responseText;
}
}
xhr.send(null);
分享到:
相关推荐
2. 或者快速地点一下广告,然后立刻就关闭,因为现在的广告条大多是用JavaScript实现的,载入速度较慢,这样就避免了既投看到什么精彩的内容又白白被人骗了广告点击的事情发生了。 破解网站JavaScript锁并不是什么...
vue-infinite-scroll 安装 npm install vue-infinite-scroll --save 尽管官方也推荐了几种载入方式,但“最vue”的方式肯定是在main.js中加入 import infiniteScroll from 'vue-infinite-scroll' Vue.use...
通常我们也会在wondow对象的onload事件处理函数中做一些事情,但由于脚本阻塞加载和呈现的特性这一方面增加了页面载入时间推迟了onload事件的触发,另一方面也延迟了用户所期待的反馈。这就需要我们使用一些方法来让...
通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。 bind(type,[data],fn) 代码: $(“p”).bind(“click”, function(){alert( $...
threejs加载模型的几种方式,包括stl类型以及obj格式,附带案例。
1.5 几种综合网络服务器系统的安装 14 1.5.1 XAMPP 14 1.5.2 WAMP 16 1.5.3 Appserv 17 1.5.4 EasyPHP 18 1.5.5 VertrigoServ 19 1.6 几种开发工具的介绍 20 1.6.1 Vi及Vim 20 1.6.2 Eclipse+PHPEclipse插件 21 ...
图片预加载有大体有几种方式 1.html标签或css加载图片 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载。但是为了避免初次载入过多图片影响体验。一般最好在文档渲染完成以后...
JSONP 是一种常用的解决方法,它的原理是动态插入 script 标签,通过 script 标签引入一个 js 文件,这个 js 文件载入成功后会执行我们在 url 参数中指定的函数,并且会把我们需要的 json 数据作为参数传入。...
RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系。 RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的...
FCKEDITOR中文使用说明 ============================== <br> 首先,FCKEDITOR的性能是非常好的,用户只需很少的时间就可以载入FCKEDITOR所需文件.对于其他在线编辑器来说,这几乎是个很难解决的难题,因为在...
jQuery 使用 $ 符号作为 jQuery 的简介方式。 某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用...
-单页应用相对服务器压力小,服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍。 -良好的前后端分离。后端不再负责模板渲染、输出页面工作,后端API通用化,即同一套后端程序代码,不用修改...
调整了自动拾取阳光的方式,改为阳光出现后1秒即拾取 针对手机浏览器,默认为自动拾取阳光 修正了几个BUG <p><h2>2010.11.22 修正路障僵尸、铁桶僵尸被打中消失的BUG 修正第五关、第六关无法进行的...
4.2.2 ready()方法的几种相同写法/86 4.3 绑定事件/86 4.4 切换事件/90 4.4.1 hover()方法/90 4.4.2 toggle()方法/93 4.5 移除事件/94 4.6 其他事件/96 4.6.1 方法one() /97 4.6.2 方法trigger () /98 4.7...
什么是 G2G2(The Grammar Of Graphics) 是一个由纯 javascript 编写、强大的语义化图表生成工具,它提供了一整套图形语法,可以让用户通过简单的语法搭建出无数种图表,并且集成了大量的统计工具,支持多种坐标系...
3.10.3 功能实现 3.10.4 代码分析 3.11 本章小结 第4章 jquery中的事件与应用 4.1 事件机制 4.2 页面载入事件 4.2.1 ready()方法的工作原理 4.2.2 ready()方法的几种相同写法 4.3 绑定事件 ...
在XML文档中,上述几种语句的语法都是错误的。因为: 1.所有的标记都必须要有一个相应的结束标记; 2.所有的XML标记都必须合理嵌套; 3.所有XML标记都区分大小写; 4.所有标记的属性必须用""括起来; 所以上列...
有一种特殊的字符串称为raw字符串,被认为是纯文本,其中的\和{等不具有特殊含义,该类字符串在引号前面加r,下面是一个例子: ${r"/${data}"year""}屏幕输出结果为:/${data}"year" 转义 含义 ...