效能優化之減少頁面重排

2021-08-28 05:11:55 字數 1478 閱讀 2466

做web開發，效能優化無疑是很重要的一點，此篇文章主要是從減少頁面重排來優化效能

class


="content"


>


>


ul>


div>


const oul = document.


queryselector


('ul');


let fragment = document.


createdocumentfragment()


;const areanamearr =


['北京'


,'天津'


,'河北'


,'山西'


,'內蒙古'


,'遼寧'


,'吉林'


,'黑龍江'


,'上海'


,'江蘇'


,'浙江'


,'安徽'


,'福建'


,'江西'


,'山東'


,'河南'


,'湖北'


,'湖南'


,'廣東'


,'廣西'


,'海南'


,'重慶'


,'四川'


,'貴州'


,'雲南'


,'**'


,'陝西'


,'甘肅'


,'青海'


,'寧夏'


,'新疆'


,'香港'


,'澳門'


,'台灣'];


areanamearr.


foreach


(item =>`;


fragment.


(oli);}


) oul.


(fragment)


;
或

let lihtml ='';


areanamearr.


foreach


(item =>


` }


) oul.innerhtml = lihtml;
迴圈生成多個li標籤，並新增到頁面中，我們先建立文件片段，在迴圈過程中，將建立的li標籤新增到fragment文件片段中，在迴圈完成後再將文件片段新增到ul標籤中

頁面只會進行一次新增，也就是只進行一次頁面的重排

如果這樣：

areanamearr.


foreach


(item =>`;


oul.


(oli);}


)
這種寫法是每迴圈一次向頁面中新增一次li標籤，這樣頁面就會多次重排，降低效能

迴圈本身是個比較耗效能的操作，避免迴圈造成頁面的多次重排

前端效能優化之減少Http請求

前言 乙個頁面的 開啟速度是其 效能最直觀的體現，那麼影響其開啟速度的因素有什麼呢？此處不再展開。本文主要聊聊關於減少http請求以達到節省時間的目的 問 減少http請求為什麼能節省時間？頁面資源的請求，80 的時間耗費在http請求上，由於tcp請求是基於連線的請求，其連線與釋放需要一定的時間。...

頁面效能優化

以前的老大說過一句話，乙個頁面誰都能做。關鍵是誰能做好，乙個好是很關鍵的，首先是細節處理的好，效能優化的好。效能優化越來越重要，尤其是終端裝置越來越普及的今天，我也看了好多這方面的資料，總結一下有以下幾條 2 減少瀏覽器重繪和重排的次數 重繪會由改變元素的樣式如顏色visibility,重排是改變元...

頁面效能優化

提公升頁面效能的方法有哪些？1.資源壓縮合併，減少http請求 2.非核心 非同步載入 非同步載入的方式？1.動態指令碼載入 2.defer 直接在script標籤的上加 3.async 非同步載入的區別 1.defer是在html解析完之後才會去執行，如果是多個，按照載入的順序依次執行 2.asy...