JS动态加载引入JS文件

53991 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);

END

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

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

猜你喜欢

• 6-18HTTP POST数据和数据接收
• 6-18常用SpringJPA主键生成策略，UUID和自增
• 6-18Apache Commons Jar包下载
• 6-18IIS服务器返回Bad Request (Invalid Hostname)解决办法
• 6-18SpringJPA 慎重 findAll() 切记分页

评论：