js代码优化
1、減少Jquery使用
處理dom遍歷和復(fù)雜的腳本場景時，jquery可能有很大的幫助，不過在處理簡單的、直截了當(dāng)?shù)拇a場景就會遲緩。盡可能的避免jquery對象創(chuàng)建，尤其在循環(huán)中。
2、優(yōu)化循環(huán)
用被緩存的數(shù)組長度
優(yōu)化前 for (var i = 0; i < arr.length; i++) {// some code here }優(yōu)化后 for (var i = 0, len = arr.length; i < len; i++) {// some code here }3、if/else和swith語句
- 如果只是1或者2個語句，那if/else性能更好點(diǎn)
- 如果3個或者3個以上，那swith更好，這個可以通過測試來驗(yàn)證（測試地址）
4、緩存dom元素、jquey對象、對象/數(shù)組值
5、減少reflow
對dom的每次改變都會有一個重大的性能成本造成頁面reflow
- 避免在document上直接進(jìn)行頻繁的DOM操作，如果確實(shí)需要可以采用off-document的方式進(jìn)行
- 先將元素從document中刪除，完成修改后再把元素放回原來的位置
- 將元素的display設(shè)置為”none”，完成修改后再把display修改為原來的值
- 如果需要創(chuàng)建多個DOM節(jié)點(diǎn)，可以使用DocumentFragment創(chuàng)建完后一次性的加入 //優(yōu)化前 var list=document.getElementById("list"); for(var i=0;i<10;i++){ var item=document.createElement("li"); item.innerHTML="option "+(i+1); list.appendChild(item); }//優(yōu)化后 var list=document.getElementById("list"); var fragment=document.createDocumentFragment(); for(var i=0;i<10;i++){ var item=document.createElement("li"); item.innerHTML="option "+(i+1); fragment.appendChild(item); } list.appendChild(fragment);
- 集中修改樣式 優(yōu)化前：
function selectAnchor(element){
var changeDiv = document.getElementById(element);
changeDiv.style.color = ‘#093′;
changeDiv.style.background = ‘#fff’;
changeDiv.style.height = ’100px’;
}優(yōu)化后：
CSS:
changeDiv {
background: #fff;
color: #093;
height: 100px;
}
JavaScript:
function selectAnchor(element) {
document.getElementById(element).className = ‘changeDiv’;
}
?
6、避免全局的搜索
7、優(yōu)先dom搜索，然后再過濾
- 優(yōu)先使用原生的getElementById、getElementsByTagName
- 例如.find( "a" ).filter( "[href=*'url_fragment']" )替換.find( "a[href=*'url_fragment']"?
8、綁定多個事件到一個元素
//優(yōu)化前 var $elem = $( "#element" ); $elem.on( "mouseover", function( event ) {// mouseover }); $elem.on( "mouseout", function( event ) {// mouseout }); //優(yōu)化后 $( "#elem" ).on( "mouseover mouseout", function( event ) {if ( event.type === "mouseover" ) {// mouseover} else {// mouseout } });?9、Property深度
- object.name<object.name.name
- 這個property越深，獲取時間越長?
?
轉(zhuǎn)載于:https://www.cnblogs.com/hj4444/p/3985321.html
總結(jié)
- 上一篇： 专属个人的聊天机器人的实现——图灵机器人
- 下一篇： xcode6不显示键盘------解决方