js加载的方式

最新推荐文章于 2023-06-23 18:48:32 发布

若茶先森

最新推荐文章于 2023-06-23 18:48:32 发布

阅读量363

点赞数 1

分类专栏： js 文章标签： js加载

原文链接：https://my.oschina.net/u/588516/blog/1841387

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

今天遇见问题，但是项目中总是报文件underfind,哎，惭愧，后来才反应过来，原来是js文件动态cdn加载的异步执行的原因

因此，根据网上各种资源和自己的理解，整理一下，自己参考

一：同步加载

我们平时使用的最多的一种方式。

<script src="http://yourdomain.com/script.js"></script>
<script src="http://yourdomain.com/script.js"></script>
同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，
只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。
但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。
所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。

二：异步加载

异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。

方法一：也叫Script DOM Element
(function(){
    var scriptEle = document.createElement("script");
    scriptEle.type = "text/javasctipt";
    scriptEle.async = true;
    scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
    var x = document.getElementsByTagName("head")[0];
    x.insertBefore(scriptEle, x.firstChild);		
 })();

(function(){;
    var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; 
    ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(ga, s); 
})();

若茶先森

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js加载的方式

今天遇见问题，但是项目中总是报文件underfind,哎，惭愧，后来才反应过来，原来是js文件动态cdn加载的异步执行的原因因此，根据网上各种资源和自己的理解，整理一下，自己参考一：同步加载我们平时使用的最多的一种方式。<script src="http://yourdomain.com/script.js"></script><script s...
复制链接

扫一扫