web前端優化（3）

瀏覽器css和js的加載過程

• 瀏覽器通過網址首先拿到由字節流轉變成字符流的HTML文檔，HTML文檔會被解析器解析成一段段TOKEN，瀏覽器通過nextToken方法，瀏覽器會自頂向下對HTML文檔進行解析，逐漸生成DOM樹，但是此時DOM樹並不會在頁面上進行顯示
• 在生成DOM樹的過程中，瀏覽器會對外部資源（CSS、js）進行請求和解析，對於請求的css，瀏覽器會生成對應的CSSOM,當CSSOM樹和DOM樹都生成完之後，瀏覽器纔會將這些資源進行合併，生成RenderTree從而對頁面進行繪製
• HTML渲染過程中的特點
  
  • 是順序執行且併發加載的
  • 對於單個域名，瀏覽器的併發度是有限的
  • 是否阻塞（css的加載是否會阻塞js的加載，css的加載是否會阻塞頁面的渲染等等等）
  • 依賴關係（比如css代碼再哪裏引入的關係，js代碼的執行順序的關係問題）
  • 引入方式（link,import，script…）

css、js加載過程中的優化點

懶加載和預加載

• 懶加載
  
  • 當頁面進入可視區域之後才請求圖片，對於圖片很多，頁面很長的業務場景適用
  • 可以減少無效資源的加載
  • 當併發資源過多時，會阻塞js的加載，影響網站的正常使用
• 預加載
  
  • 網站的靜態資源在使用之前進行提前請求
  • 資源在使用時，可以直接從緩存中加載，提升用戶體驗
  • 頁面展示的依賴維護關係
  • 對圖片請求過程要求比較高的時候使用預加載可以提升用戶體驗
  • 活動展示頁面，就需要用預加載將圖片都加載出來
• 懶加載lazyload.js實現原理
  
  1. 首先通過document的clientHeight屬性獲取當前的可視高度
  2. 選中所有帶有懶加載屬性的標籤，循環遍歷
  3. 通過元素的getBoundingClientRect方法獲得當前元素的top值
  4. 如果top值小於可視界面的高度，就將設置的懶加載屬性去掉，同時將src中的圖片讀取出來，放置在頁面上
     
     注:!function這樣的寫法表示在方法前加上布爾值，表示執行後面的代碼，也就是合法實現調用

懶加載與預加載案例分析

• 手淘的頁面就使用的懶加載，只有當圖片出現在界面的可視部分時纔會加載對應的圖片