Java小强个人技术博客站点    手机版
当前位置: 首页 >> JS >> JS动态加载引入JS文件

JS动态加载引入JS文件

38471 JS | 2021-6-18

1.调整标签位置

可以把<script>标签放到HTML文档的最后面,这样不影响页面加载。


2.合并+压缩JS文件

减少请求次数和文件传输,压缩分两种

自行压缩把注释空格等去掉,例如jquery.min.js

服务器传输时GZIP压缩,这个压缩浏览器拿到后需要解压缩


3.无堵塞加载

通过给script标签增加 defer属性或者是 async 属性来实现

<script src="file.js" defer></script>

async和defer不同之处是async加载完成后会自动执行脚本,defer加载完成后需要等待页面也加载完成才会执行代码


4.动态创建script来加载

function loadJS(url, callback) {
	var script = document.createElement('script'), fn = callback || function() {
	};
	script.type = 'text/javascript';
	// IE
	if (script.readyState) {
		script.onreadystatechange = function() {
			if (script.readyState == 'loaded'
					|| script.readyState == 'complete') {
				script.onreadystatechange = null;
				fn();
			}
		};
	} else {
		// 其他浏览器
		script.onload = function() {
			fn();
		};
	}
	script.src = url;
	document.getElementsByTagName('head')[0].appendChild(script);
}
loadJS('js/index.min.js?V=1.0.0.1',function(){
});


5.封装成类库,单独引入(后续细研究)

Lazy Load延迟加载插件延迟了长网页中图像的加载。用户滚动到视窗之外的图像之前,不会加载它们。

https://www.lazyloadjs.cn/ 


6.XHR使用ajax方式加载(未验证)

var xhr = new XMLHttpRequest;
xhr.open('get','file.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);


微信截图_20210618091759.jpg

END

推荐您阅读更多有关于“ js JavaScript 动态 script 引入文件 ”的文章

上一篇:去掉script标签src后的参数时间戳 下一篇:windows下nginx的安装

猜你喜欢

发表评论:

评论:

回复 Java小强 评论于 2021-06-18 15:43
jquery方法
$.getScript("./test.js");  //加载js文件
$.getScript("./test.js",function(){  //加载test.js,成功后,并执行回调函数
  console.log("加载js文件");
});