> ## JS性能優化 * 常見編碼規范 * JS放到body尾部 * 非核心代碼的異步加載 * 減少DOM操作 * 減少觸發事件(節流防抖) * 懶加載 > ## 頁面渲染/CSS優化 * CSS代碼放在前面 * 盡早執行操作 * 配置渲染引擎 * 最小化重繪(repaint)和回流(reflow) > ## 網絡優化（三預一緩 壓縮CDN） * DNS**預**解析 * 靜態資源的**合并壓縮** * 利用**緩存**機制，盡可能使用緩存減少請求 * 使用CDN * **預**加載 * **預**渲染 * 圖片優化（懶加載見JS） > ### 插入幾萬個 DOM，如何實現頁面不卡頓？ * 肯定不能一次性把幾萬個 DOM 全部插入，這樣肯定會造成**卡頓**，所以解決問題的重點應該是如何**分批次部分渲染 DOM**。 * 部分人應該可以想到通過 `requestAnimationFrame` 的方式去循環的插入 DOM，其實還有種方式去解決這個問題：**虛擬滾動**（virtualized scroller）。 * 這種技術的原理就是**只渲染可視區域內的內容**，非可見區域的那就完全不渲染了，當用戶在滾動的時候就實時去替換渲染的內容。  從上圖中我們可以發現，即使列表很長，但是**渲染的 DOM 元素永遠只有那么幾個**，當我們滾動頁面的時候就會實時去更新 DOM，這個技術就能順利解決這發問題。如果你想了解更多的內容可以了解下這個 [react-virtualized](https://github.com/bvaughn/react-virtualized)。