前端效能優化之文件片段節點

前端效能優化之文件片段節點

我們知道，操作dom是非常耗時的，並且直接在dom上操作會使得頁面不斷的重排和重繪。

所以我們可以使用「文件片段節點」，即documentfragment。

使用方法： 將將我們希望新增的元素先新增到documentfragment上，然後在將它新增到dom上。

方法： var fragment =document.createdocumentfragment(); 這樣就建立了文件片段節點。

文件片段節點具有下面的幾個屬性：

console.log(fragment.nodetype);//11

console.log(fragment.nodevalue);//null
console.log(fragment.nodename);//'#document-fragment'
console.log(fragment.parentnode);//null

最終輸出的時間如下：

time: 112.912ms

time: 63.789ms

這裡使用文件節點的時間更長一些，應該是主頁面的內容太少了，如果主頁面的東西很多，那麼使用文件節點應當會省時一些。

注意： 這裡console.time("time"); console.timeend("time");  可以列印出兩者之間的時間。

前端效能優化之文件片段節點

前端效能優化之文件片段節點 我們知道，操作dom是非常耗時的，並且直接在dom上操作會使得頁面不斷的重排和重繪。所以我們可以使用 文件片段節點 即documentfragment。使用方法 將將我們希望新增的元素先新增到documentfragment上，然後在將它新增到dom上。方法 var fr...

前端效能優化之 快取

一.http協議頭控制 cache control用於控制檔案在本地快取有效時長。最常見的，比如伺服器回包 cache control max age 600表示檔案在本地應該快取，且有效時長是600秒 從發出請求算起 在接下來600秒內，如果有請求這個資源，瀏覽器不會發出http請求，而是直接使用...

前端開發 之 效能優化

1 多使用記憶體 快取或者其他方法儲存 2 減少 cpu 計算 減少網路請求 1 怎麼讓頁面 靜態資源載入的更快 2 怎麼讓頁面上的一些操作變得更快 1 靜態資源的壓縮合併，預載入檔案 合併在一起 window.addeventlistener domconetentloaded function ...