《高性能javascript》读书笔记:js的加载和代码执行
1.每个<script>加载时都会阻塞其他文件(图片、音乐等)的同时加载,同时浏览器会在js代码执行时停止渲染Dom.所以为了减少界面加载的卡顿和空白发生,应尽力将js代码或者文件放在</body>前,防止js代码影响Dom渲染。
2.js文件现在浏览器内部已经实现并行加载。提高浏览器加载js性能:a.减小js大小 b.减少内链代码个数 3.http请求会带来额外开销,所以1个100K的js加载时间短语4个25k的。
3.页面无阻塞:考虑在页面框架加载渲染完之后再触发对脚本的下载
window.onload()
可以在<script>标签内加入defer:
<script src=”index.js” defer></script>
,向浏览器提前说明:本js文件无对dom操作,可以延迟加载执行。目前所有浏览器都已实现.
4.script标签也是Dom对象,所以可以动态添加js脚本。
var script=document.cresteElement(“script”); script.type = “text/javascript”; script.scr= ”123.js”; document.getElementByTagName(“head”)[0].appendChild(script);
可以添加加载完成时的状态:
script.onload = function(){ //除IE外,支持 alert(‘动态js加载完成’); }; script.onreadystatechange = function(){//IE //其中readyState 为识别值,有5种取值结果: // unintialized初始状态 loading下载中 loaded下载完成 interactive 数据完、、 //成下载但不可用 complete 所有数据已经准备完成 if(script.readyState ==”loaded” || script.readyState ==”complete”){ //………… } } }
但是,如何将两种浏览器加载识别模式融合在一起?
function loadScript (url,callback){//url为文件位置,callback为回调函数 var script = document.createElement(“script”); script.type=”text/javascript”; script.src=”index.js”; if(script.readyState){ //ie script.onreadystatechange = function(){ if(script.readyState ==”loaded” || script.readyState ==”complete”){ callback(); } } else{ //其他浏览器 script.onload = function(){ callback(); } } script.scr= url; document.getElementByTagName(“head”)[0].appendChild(script); }
上面这种是书上给出的只能加载js的函数,怎么用这个函数同样能css动态加载? 自己改良了一下:
function afterload(){ alert("已加载"); } function loadScript(url,type,callback){ if("js"==type){ var script = document.createElement("script"); script.type = "text/javascript"; if(script.readyState){ //ie script.onreadystatechange = function(){ if(script.readyState ==”loaded” || script.readyState ==”complete”){ callback(); } }
} else{ //其他浏览器 script.onload = function(){ callback(); } } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); } else if("css"==type){ var css = document.createElement("link"); css.setAttribute("rel","stylesheet");//增加属性函数,css.rel()不存在,所以只能setA...出来 css.setAttribute("type","text/css"); if(css.readyState){ //ie css.onreadystatechange = function(){ if(css.readyState ==”loaded” || css.readyState ==”complete”){ callback(); }
}
} else{ //其他浏览器 css.onload = function(){ callback(); } } css.setAttribute("href",url); document.getElementsByTagName("head")[0].appendChild(css); } }
5.可以尝试使用YUI或者Lazyload来做无阻塞加载
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。