JavaScript提高性能的知識點總結

JavaScript有什麼方式可以提高性能呢?下面YJBYS小編為大家介紹!

　　針對js文件的加載位置

在HTML文件中，標籤是可以加在區域和區域的。這裏鑑於JavaScript執行和UI渲染的單線程原因，如果js文件載入會阻塞後面對於頁面的解析過程，頁面會等到js文件完全加載並運行後才繼續執行該做的操作。那麼問題就來了，這樣可能會出現頁面空白or卡頓現象。作為一名前端開發，重要的不僅僅止於實現了需求，應該還有優質的用户體驗。那麼我們就需要消除用户枯燥的等待，針對這個問題，這裏有本獸想到的兩種解決方案：

1. 如果js文件沒有特殊要求指明需要在頁面渲染之前載入及編譯完成的，那麼選擇將js文件放到

標籤前(既所有的頁面所呈現內容的後面)，css文件還是放到

區域(誰也不願意看一個佈局雜亂無章的頁面)。這樣做就能先讓用户看到有佈局的頁面而不是空白頁了，那麼也會有人指出：那數據得通過js請求加載進來啊，怎麼辦呢?可以對數據的加載做排序，急需呈現的.接口放前面執行，不是那麼需要的可以延後執行，同時做個簡單的載入動畫or提示。

2. 如果這些js文件有指明需要先執行了，才能更好的展示頁面內容，那麼就在第一個js或者頁面上先放個載入小動畫，可以一些有趣的或者萌萌的動畫場景。這樣也是能較好的避免用户等待的無聊，説不定人家還對這個載入動畫更感興趣呢，這樣可提升項目的用户體驗感。

最終推薦：將標籤儘可能的放到標籤前面加載，以提升用户體驗。

　　針對js文件的合併

在很多團隊開發中，我們可能會將不同功能的代碼塊分別放置在不同的js文件中，以便於開發過程中眾人合作寫代碼會更加方便，畢竟只需要找對應文件夾或文件而不是在一個很長的文件中找一個方法。這確實是會提高團隊開發效率及新人加入後的更容易進行二次開發及維護。那麼將這個問題放到頁面性能裏呢?這正是問題所在，在這本書中指出：Each HTTP request brings with it additional performance overhead,so downloading one single 100 KB file will be faster than downloading four 25 KB files.

下載1個100KB的文件比下載4個25KB的文件要快，而開發過程中區分開各個文件又有很大的好處，那麼合併這個問題也就放在開發完後再處理咯，相信這個操作大家都不會陌生吧，現在的前端工具這麼豐富，各位習慣用什麼壓縮就用什麼壓縮吧~

這裏簡單提出下，在載入文件方面還可以用到defer和async屬性，用於延遲加載和異步加載，在現代瀏覽器中，大多數是已經支持defer屬性了，還沒習慣用這個額，也不知道具體會不會存在什麼問題。有興趣的朋友可自行google該知識點，這裏件簡單提下吧。

現在的框架也大多配合懶加載和按需加載了。

　　更快速的數據訪問

對於瀏覽器來説，一個標識符所處的位置越深，去讀寫他的速度也就越慢(對於這點，原型鏈亦是如此)。這個應該不難理解，簡單比喻就是：雜貨店離你家越遠，你去打醬油所花的時間就越長… 熊孩子，打個醬油那麼久，菜早燒焦了 -.-~

如果我們需要在當前函數內多次用到一個變量值，那麼我們可以用一個局部變量先將其存儲起來，案例如下：

//修改前

function showLi(){

var i = 0;

for(;i

(i,lementsByTagName("li")[i]); //三次訪問document

};

};

//修改後

function showLi(){

var li_s = lementsByTagName("li"); //一次訪問document

var i = 0;

for(;i

(i,li_s[i]); //三次訪問局部變量li_s

};

};

　　DOM操作的優化

眾所周知的，DOM操作遠比javascript的執行耗性能，雖然我們避免不了對DOM進行操作，但我們可以儘量去減少該操作對性能的消耗。

讓我們通過代碼解釋這個問題：

function innerLi_s(){

var i = 0;

for(;i<20;i++){

lementById("Num")rHTML="A"; //進行了20次循環，每次又有2次DOM元素訪問：一次讀取innerHTML的值，一次寫入值

};

};

針對以上方法進行一次改寫：

function innerLi_s(){

var content ="";

var i = 0;

for(;i<20;i++){

content += "A"; //這裏只對js的變量循環了20次

};

lementById("Num")rHTML += content; //這裏值進行了一次DOM操作，又分2次DOM訪問：一次讀取innerHTML的值，一次寫入值

};

　　減少Dom的重繪重排版

元素佈局的改變或內容的增刪改或者瀏覽器窗口尺寸改變都將會導致重排，而字體顏色或者背景色的修改則將導致重繪。

對於類似以下代碼的操作，據説現代瀏覽器大多進行了優化(將其優化成1次重排版)：

//修改前

var el = lementById("div");

erLeft = "1px"; //1次重排版

erRight = "2px"; //又1次重排版

ing = "5px"; //還有1次重排版

//修改後

var el = lementById("div");

ext = "border-left:1px;border-right:2px;padding:5px"; //1次重排版

針對多重操作，以下三種方法也可以減少重排版和重繪的次數：

先隱藏，操作後再顯示 2次重排 (臨時的display:none)

teDocumentFragment() 創建文檔片段處理，操作後追加到頁面 1次重排

newDOM = eNode(true)創建Dom副本，修改副本後aceChild(newDOM,oldDOM)覆蓋原DOM 2次重排

　　循環的優化

這應該是較多人都知道的寫法了，簡單帶過即可(後面還是用代碼+註釋形式説明)~

//修改前

var i = 0;

for(;i

(arr[i]);

}

//修改後

var i = 0;

var len = th; //獲取一次數組arr的length

for(;i

(arr[i]);

}

//or

var i = th;;

for(;i;i--){

(arr[i]);

}

　　合理利用二進制

如：對2取模，則偶數最低位是0，奇數最低位是0，與1進行位與操作的結果是0，奇數的最低位是1，與1進行位與操作的結果是1。

{color:red}

{color:yellow}

var i = 0;

var lis = lementsByTagName("li");

var len = th;

for(;i

if(i&1){

lis[i]sName = "even";

} else{

lis[i]sName = "odd";

}

};

雖説現代瀏覽器都已經做的很好了，但是本獸覺得這是自己對代碼質量的一個追求。並且可能一個點或者兩個點不注意是不會產生多大性能影響，但是從多個點進行優化後，可能產生的就會是質的飛躍了~