无阻塞加载外部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条规则当中, ...
随机推荐
- Hive Cilent数据操作
Hive运行命令方式有cli,jdbc.hwi.beeline.而我们经常使用的往往是cli shell 操作. cli shell hive -help hive --help 注:命令脚本必须在集 ...
- 安卓自己定义对话框及The specified child already has a child问题
问题:在android开发过程中,有时会在不同情况下遇到同种问题:The specified child already has a parent.You must call removeView() ...
- Function的一些结论与eval函数.
1.1 函数的创建方式 1 函数声明 2 函数表达式 3 new Function // 1 function foo() {} // 2 var foo = function() {}; // 3 ...
- css3 边框阴影效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- SQLHelper--java类
package richard; import java.beans.Statement; import java.sql.Connection; import java.sql.DriverMana ...
- Huawei交换机VRP配置介绍
一.命令视图• 用户视图<Huawei>• 系统视图 [Huawei]• 接口视图 [Huawei-GigabitEthernet0/0/1]• 协议视图 [Huawei-rip-1]• ...
- C/C++(C++重载，默认参数，引用)
C++重载详解 重载就是同名而非同义,具体意义根据上下文的语境而言. 重载规则: 1,函数名相同. 2,参数个数不同,参数的类型不同,参数顺序不同,均可构成重载. 3,返回值类型不同则不可以构成重载. ...
- MYSQL查询数据中通讯最多的两个人
SELECT GREATEST( sender_id, recipient_id ) , LEAST( sender_id, recipient_id ) , COUNT( * ) AS aFROM ...
- Swift学习笔记(9)--闭包
1.闭包表达式: { (parameters) -> returnType in statements } 注1.闭包表达式语法可以使用常量.变量和inout类型作为参数,不提供默认值. 也可以 ...
- win7安装python开发环境，执行python
在win7上安装python的开发环境是很easy的事情 Step1:下载python安装文件 url:https://www.python.org/download 去这里找到你想要下载的文件 St ...