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延迟加载插件延迟了长网页中图像的加载。用户滚动到视窗之外的图像之前,不会加载它们。
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 引入文件 ”的文章
Java小强
未曾清贫难成人,不经打击老天真。
自古英雄出炼狱,从来富贵入凡尘。
发表评论: