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