溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在平時工作做項目的過程中我們有時候會遇到頁面加載很久才加載出來的情況，這樣嚴重影響了用戶的體驗效果。雖然說有時候可能是因為網絡問題，但有些時候確實是前端代碼沒有足夠優化導致的。所以通過查閱相關資料并實踐后，總結出如下知識點來提升性能。有什么寫得不對的地方還希望各路大神指出并加以指點。
1、數據訪問
1、將所有script標簽放在盡可能接近body標簽底部的位置，盡可能減少對整個頁面下載的影響。
2、盡量少用全局變量。因為變量在作用域鏈中的位置越深，訪問的時間就越長。局部變量位于作用域鏈中的第一個對象中，全局變量總是位于作用域鏈的最后一環，所以全局變量總是最慢的。
3、避免全局查詢，如果一定要用到全局變量時，并且需要在某個函數中多次用到該全局變量時，可以定義一個局部變量指向全局變量，來縮短在作用域鏈中的查詢深度。
function addTotrackData(){
var allChildrenNode=getAllChildrenDepartmentNodes();
for (var i = 0; i < allChildrenNode.length; i++) {
for (var j=0,len=track.length;j<len;j++) {
if (trackNode[j]["userId"] == allChildrenNode[i]) {
trackNode[j]["isOnMap"] = true;
}
}
}
}
上面代碼可以改寫為如下所示
function addTotrackData(){
var allChildrenNode=getAllChildrenDepartmentNodes();
var track=trackNode;
for (var i = 0; i < allChildrenNode.length; i++) {
for (var j=0,len=track.length;j<len;j++) {
if (track[j]["userId"] == allChildrenNode[i]) {
track[j]["isOnMap"] = true;
}
}
}
}
4、將集合的length屬性用一個局部變量來保存，在迭代中使用該變量。
for (var j=0,len=track.length;j<len;j++)
5、避免使用with表達式，因為它增加作用域鏈的長度。而且應當小心的對待try-catch的catch子句，它具有同樣效果。
6、一個屬性或方法在原型鏈中的位置越深，它的訪問速度就越慢。
7、聲明變量時，多個變量合并聲明，可以減少內存消耗。
var a; var b; var c; //推薦 var a,b,c
2、Dom操作
Dom（文檔對象模型）是一個獨立于語言的，使用xml和html文檔操作的應用程序接口。在瀏覽器中的接口卻是以javascript來實現的。Dom和javascript看成兩座島，兩者之間通過一座收費的橋連接。一般建議盡量留在javascript島上。
1、用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。
//dom方式
var str=""
var dom=document.getElementById("test");
var start1=new Date();
for(var j=0;j<100000;j++){
var div=document.createElement("div");
div.innerText="test";
dom.append(div);
}
var end1=new Date();
console.log("dom方式:"+(end1-start1));//dom方式:356
//inerHTML方式
var content="";
var start=new Date();
for(var i=0;i<10000;i++){
content=content+"<div>test</div>";
}
document.getElementById("test").innerHTML=content;
var end=new Date();
console.log("innerHTML方式:"+(end-start));//innerHTML方式:35
2、如果統一個Dom元素或集合被訪問一次以上，最好使用一個局部變量來緩存此Dom成員，在循環中使用局部變量緩存集合引用和集合元素會提升速度。
3、遍歷children比childNodes更快。children不區分（包括）注釋節點和空文本節點，所以快一些。
4、使用element.cloneNode(bool)復制節點，bool為false表示淺復制，只復制當前節點，bool為true時，表示深復制，還會復制其子節點。這種方式比document.createElement()速度要快一些。
5、使用document.querySelector和document.querySelectorAll("div.warning,div.notice")來快速查找。因為它們返回一個NodeList——由符合條件的節點構成的類數組對象，而不是HTML集合（總是表現出存在性），避免了它所固有的性能問題（以及存在的邏輯問題）。querySelectorAll("div.warning,div.notice")還可以進行聯合查詢。
6、修改樣式時，可以使用div.style.cssText來一起修改樣式，或者使用類來修改（便于維護）。
var el = document.getElementById('mydiv');
//修改3次Dom
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px'；
//推薦只需要修改1次Dom
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;'
7、盡量避免寫在HTML標簽中寫Style屬性，使用外聯樣式便于維護和修改。
8、避免圖片和iFrame等的空Src。空Src會重新加載當前頁面，影響速度和效率。
9、采用事件委托。元素連接事件句柄會影響頁面性能，采用委托利用事件冒泡的性能減少元素連接事件。（事件掛接過程都是發生在onload或DOMContentReady）事件中。
3、循環
1、for-in是四種循環方法中速度最慢的一種，一般用于循環對象（需要查找自身屬性還是原型屬性）。不建議循環數組。除非要迭代遍歷一個屬性未知的對象，否則一般不用for-in。
2、改變循環條件的順序來提高循環性能。
//推薦
for(var i=items.length;i--;){
//todo
}
//不推薦
for(var i=0,len=items.length;i<len;i++){
//todo
}
3、通過減少循環體來優化性能。
以上所述是小編給大家介紹的JavaScript性能提升詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
