动态脚本元素即在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)的更多相关文章

  1. 无阻塞加载和defer、async

    无阻塞加载 把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题.但是少部分新的浏览器已经开始允许 ...

  2. 高性能 js -- 无阻塞加载脚本

    参考: <<高性能JavaScript>> Nicbolas C. Zakas 著 javascript代码的下载和执行过程会阻塞浏览器的其他进程, 比如页面的绘制, 遇到&l ...

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

    下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问 ...

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

    浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢 ...

  5. js同步、异步、延时、无阻塞加载

    一.同步加载 平常默认用的都是同步加载.如:<script src="http://yourdomain.com/script.js"></script> ...

  6. Vue 加载外部js文件

    Vue.js  加载外部js文件 在项目内新建一个config.js //变量的定义 export var config = { baseurl:'http://172.16.114.5:8088/M ...

  7. 使用js加载器动态加载外部js、css文件

    let MiniSite = new Object(); /** * 判断浏览器 */ MiniSite.Browser = { ie: /msie/.test(window.navigator.us ...

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

    Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题. 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 .原因是,事实上,大多数浏览器使用单进程处理U ...

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

    原文转自:http://blog.jobbole.com/78191/ Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题. 在Yahoo的Yslow23条规则当中, ...

随机推荐

  1. OpenGL之抗锯齿 以及 线宽的设置

    转自原文 OpenGL之抗锯齿 以及 线宽的设置 抗锯齿 1.线的抗锯齿 glEnable(GL_LINE_SMOOTH); //启用 glHint(GL_LINE_SMOOTH,GL_NICEST) ...

  2. 【SICP练习】152 练习4.8

    练习4-8 原文 Exercise 4.8. "Named let" is a variant of let that has the form (let <var> ...

  3. OC07 -- 迭代器/NSNumber/NSValue/NSRange/NSSet/NSDate 及相互转换.(杂)

    //一: 迭代器 //数组 NSArray *arr=@[@"1",@"2",@"3",@"4",@"5&qu ...

  4. 智课雅思短语---二、exert positive/ negative effects on…

    智课雅思短语---二.exert positive/ negative effects on… 一.总结 一句话总结:对…产生有利/不利的影响 1.the advantages far outweig ...

  5. HUE配置文件hue.ini 的filebrowser模块详解（图文详解）（分HA集群和非HA集群）

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...

  6. webpack4强势来袭

    # Webpack4## 安装> webpack 4默认不需要配置文件(它吸收了Parcel的思想,零配置)> - npm i -D webpack> - npm i -D webp ...

  7. codeforces 140E.New Year Garland

    传送门: 解题思路: 要求相邻两行小球颜色集合不同,并且限制行内小球相邻不同. 由此可得:每行小球排列都是独立与外界的, 所以答案应该是对于所有行的颜色集合分类,在将行内的答案乘到上面. 先考虑如何分 ...

  8. SpringBoot 增加 拦截器 判断是否登录

    1.创建拦截器 package com.example.demo.interceptor; import org.slf4j.Logger; import org.slf4j.LoggerFactor ...

  9. 【Henu ACM Round#18 B】Modulo Sum

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] m比较小 <=1000 a[i]直接看成a[i]%m就可以了. 有n个0..999之间的整数.. 如果有一个0那么就直接输出Y ...

  10. 洛谷—— P2387 魔法森林

    题目描述 为了得到书法大家的真传,小 E 同学下定决心去拜访住在魔法森林中的隐 士.魔法森林可以被看成一个包含 n 个节点 m 条边的无向图,节点标号为 1,2,3,…,n,边标号为 1,2,3,…, ...