網頁效能最佳化是為了提升網站的載入速度、響應速度和使用者體驗，從而更好地滿足使用者的需求，提高使用者留存率和轉化率。
減少DOM操作
在JavaScript中，新增到頁面上的事件處理程式數量將直接關係到頁面的整體執行效能，因為需要不斷的與dom節點進行互動，訪問dom的次數越多，引起瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的互動就緒時間，這就是為什麼效能最佳化的主要思想之一就是減少DOM操作的原因。
按需載入
按需載入就是根據需要去載入資源。
在js中，我們一般透過一些使用者行為或者定時任務去觸發一些載入動作。
比如但不限於以下幾個情況：滑鼠點選、輸入文字、拉動捲軸，滑鼠移動、視窗大小更改等。載入的檔案，可以是JS、圖片、CSS、HTML等。這個就是按需載入。
為什麼需要按需載入
瀏覽器在同一時間內的可以發出的請求數有限制，所以這也是我們採用第三方打包工具將多個檔案打包為一個檔案的意義。
但是多個檔案打包為一個檔案時包又比較大，一次性下載下來的速度就比較慢，仍然會有剛進入單頁面系統產生首頁白屏時間較長的情況。這種使用者體驗也不好。按需載入可用較好的去解決這些問題。
按需載入HTML
多頁面系統本身就是一個按需載入html的過程，因為一個頁面對應一個HTML。
我們都知道，所謂的單頁面專案在某種意義上就是一個無重新整理的區域性更新頁面。
頁面一開始不解析HTML，根據需要來解析HTML。
解析HTML都是需要一定時間，特別是HTML中包含有img標籤、引用了背景圖片時，如果一開始就解析，那麼勢必會增加請求數。常見的有對話方塊、拉選單、多標籤的內容展示等，這些一開始是不需要解析，可以按需解析。
效能最佳化之虛擬列表
當渲染大型列表時，由於瀏覽器需要處理大量的 DOM 節點，會帶來頁面卡頓、記憶體佔用過高等問題。此時可以透過將列表虛擬化技術，即只渲染可見區域內的資料項，而不是全部渲染，且在滾動過程中移除舊的新增新的，這樣無論列表有多少項，只會有一小部分在DOM中，從而提高效能和記憶體效率、保持流暢的滾動體驗。