无阻塞加载外部js(动态脚本元素，XMLHttpRequest注入，LazyLoad)
动态脚本元素即在js中去创建<script>标签加载外部js并执行，这样加载的好处是文件的下载和执行过程不会阻塞页面的其他进程。通过下面两个例子对比出效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script src="1.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
var i = 0; while (i < 1000000000) {
i++;
} alert("内部js");
}
</script>
</head>
<body>
<div id="aa" style="color: Red; font-size: 200px;">
测试js加载顺序影响的性能问题。【放在底部加载】
</div>
</body>
</html>
A.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript">
window.onload = function () {
loadScript("1.js",function(){alert("加载外部js完成")})
var i = 0; while (i < 1000000000) {
i++;
} alert("内部js");
}
function loadScript(url,callback){
var script=document.createElement("script");
script.type="text/javascript";
if(script.readyState){
script.onreadystatechange=function(){
if(script.readyState=="loaded" || script.readyState=="complete"){
script.onreadystatechange=null;
callback();
}
};
}else{
script.onload=function(){
callback();
};
}
script.src=url;
document.getElementsByTagName("head")[0].appendChild(script);
}
</script>
</head>
<body>
<div id="aa" style="color: Red; font-size: 200px;">
测试js加载顺序影响的性能问题。【放在底部加载】
</div>
</body>
</html>
B.html
var i = 0;
while (i < 1000000000) {
i++;
}
alert("外部js");
1.js
进过执行后会发现，A.html执行结果为 alert("外部js") alert("内部js") render树渲染
B.html执行结果为 alert("内部js") render树渲染 alert("外部js") alert("加载外部js完成")
通过结果对比后，理解不阻塞页面其他进程更加直观
除了动态加载js外，还有XMLHttpRequest对象获取脚本也是无阻塞的，示例代码如下
var xhr=new XMLHttpRequest();
xhr.open("get","1.js",true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4) {
if(xhr.status >= 200 && xhr.status<300 || xhr.status == 304){
var script=document.createElement("script");
script.type="text/javascript";
script.text=xhr.responseText;
document.body.appendChild(script);
}
}
}
xhr.send(null);
延迟加载工具LazyLoad
LazyLoad.js("1.js",function(){
alert("加载外部js完成！");
});
//加载多个
LazyLoad.js(["1.js","2.js"],function(){
alert("加载外部js完成！");
});
无阻塞加载外部js(动态脚本元素，XMLHttpRequest注入，LazyLoad)的更多相关文章
- 无阻塞加载和defer、async
无阻塞加载 把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题.但是少部分新的浏览器已经开始允许 ...
- 高性能 js -- 无阻塞加载脚本
参考: <<高性能JavaScript>> Nicbolas C. Zakas 著 javascript代码的下载和执行过程会阻塞浏览器的其他进程, 比如页面的绘制, 遇到&l ...
- 探真无阻塞加载javascript脚本技术，我们会发现很多意想不到的秘密
下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问 ...
- 无阻塞加载js，防止因js加载不了影响页面显示
浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢 ...
- js同步、异步、延时、无阻塞加载
一.同步加载 平常默认用的都是同步加载.如:<script src="http://yourdomain.com/script.js"></script> ...
- Vue 加载外部js文件
Vue.js 加载外部js文件 在项目内新建一个config.js //变量的定义 export var config = { baseurl:'http://172.16.114.5:8088/M ...
- 使用js加载器动态加载外部js、css文件
let MiniSite = new Object(); /** * 判断浏览器 */ MiniSite.Browser = { ie: /msie/.test(window.navigator.us ...
- 高性能Javascript--脚本的无阻塞加载策略
Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题. 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 .原因是,事实上,大多数浏览器使用单进程处理U ...
- 【转】高性能Javascript--脚本的无阻塞加载策略
原文转自:http://blog.jobbole.com/78191/ Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题. 在Yahoo的Yslow23条规则当中, ...
随机推荐
- Android Studio更改项目SDK的版本
Elipse 中的安卓项目,在Android Studio中可以通过File -->new -- > Import Project的方法建立起来.但是有时候需要用到更改项目的API Lev ...
- js实现小时钟,js中Date对象的使用?
介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...
- jQuery插件开发初探
最简单的插件 $.fn.changeStyle = function (colorStr) { $(this).css('color',colorStr); } 应用如下: <!DOCTYPE ...
- Android开发之蓝牙(Bluetooth)操作(一)--扫描已经配对的蓝牙设备
版权声明:本文为博主原创文章,未经博主允许不得转载. 一. 什么是蓝牙(Bluetooth)? 1.1 BuleTooth是目前使用最广泛的无线通信协议 1.2 主要针对短距离设备通讯(10m) ...
- springboot 使用mybatis 通用Mapper，pagehelper
首先需要maven导入需要的包,这里用的是sqlserver,druid,jtds连接数据库 <dependency> <groupId>com.alibaba</gro ...
- GOLANG 加密,解密,GUID 小方法
golang的 MD5加密.BASE64解密 guid 的代码: /** * 用于加密,解密,(包含MD5加密和base64加密/解密)以及GUID的生成 * 时间: * zhifieya */ p ...
- springmvc使用jQuery.datatable时遇到的错误
springmvc使用jQuery.datatable时遇到的错误 1正确时返回 josn结果: {,,,,,,,,,,,,,,,,"} 页面显示处理中(processing),列表空白,其 ...
- ES6学习笔记（三）字符串的扩展
ES6 加强了对 Unicode 的支持,并且扩展了字符串对象. 1.字符的Unicode表示法 JavaScript 允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码 ...
- JS之闭包详细解读
闭包在红宝书中的解释就是:有权访问另一个函数作用域中的变量的函数. 1.变量作用域 全局变量:所有的函数外部定义的变量,它的作用域是整个script. 局部变量:定义在函数体内部的变量,作用域仅限于函 ...
- 【Linux下权限控制之chmod与chown命令】
chmod 用于配置文件/目录权限 命名格式:chmod [选项] 文件/目录名 . 权限类别: r 读取 可用数字4表示 w 写入 可用数字2表示 x 执行 可用数字1表示 . 归属类别: u 属主 ...