JavaScript進階內容——BOM詳解 在上一篇文章中我們學習了DOM，接下來讓我們先通過和DOM的對比來簡單瞭解一下BOM 首先我們先來複習一下DOM： 文檔對象模型 DOM把文檔當作一個對象來看待 DOM的頂級對象是document DOM的主要學習是操作頁面元素 DOM是W3C標準規範 然 ...
JS書寫需註意的點
一、JS書寫過程中減少對閉包的使用
原因：閉包會產生不釋放的棧記憶體
替代方案：1，迴圈給元素做事件綁定的時候，儘量把後期需要的數據（如：索引）綁定到元素的自定義屬性上，而不是創建閉包存儲
2，可以在最外層創建一個閉包，把需要的數據進行存儲，而不是一個方法創建一個閉包（如：單例模式）
3，手動釋放不被占用的記憶體
二、避免“嵌套迴圈”
原因：會額外增加迴圈次數和死迴圈
三、儘量使用事件委托，減少DOM的頻繁操作
四、頁面中數據儘量採用非同步編程和延遲分批載入
非同步編程：減少HTTP通道阻塞，而導致頁面載入不出來
延遲載入：減少首次載入的HTTP請求次數
五、儘量封裝JS方法（低耦合高內聚），減少冗餘代碼
六、減少使用eval，代碼壓縮後，可能出現符號不完善的問題
七、儘量使用設計模式來管理代碼（單利、構造、Promise、發佈訂閱）
css書寫需註意的點
一、減少css表達式的使用
二、減少選擇器的層級，儘量控制在3個層級
css選擇器解析規則是從右到左解析
減少標簽選擇器的使用
三、css導入時減少使用@import，因為@import是同步操作，等導入的內容載入完才會像下渲染，link是非同步操作
四、靜態資源放置順序
css放在header內，js放在body最下麵
能用css，就不用js，能用原生js就不用插件
css處理動畫的性能優於js，而且css中的transform瀏覽器會開啟“硬體加速”
DOM書寫需註意的點
二、減少HTTP請求次數
1，靜態資源進行打包壓縮（webpack構建工具）
2，圖片儘量合成雪碧圖，或者圖片base64
3，icon可以使用iconfont或者svg圖片
4，如果極其要求高性能，可以使用內嵌css和js，減少HTTP請求
5，利用localstorage本地存儲
三、減少DOM的重繪和迴流
1，迴流的分離讀寫
2，使用文檔碎片/字元串拼接動態創建DOM
四、採用圖片“懶載入”
目的：減少頁面第一次載入中http的請求次數
步驟：頁面開始載入，用占點陣圖占位，當頁面載入完，圖片在可視區內再去發送http請求
五、減少cookie的使用
六：音視頻資源設置（preload=‘none’），播放時再載入
七、避免使用iframe
八、script引用 添加defer / async 非同步載入
九、伺服器端渲染
瀏覽器及伺服器註意的點
一、利用瀏覽器和伺服器的緩存技術（304緩存）
把不頻繁更新的靜態資源做緩存處理（如：JS、CSS、Image）
原理也是減少HTTP請求次數
二、CDN加速
三、開啟服務端的gzip壓縮（減少請求資源文件大小）
