瀏覽器相容與優化
阿新 • • 發佈：2019-01-24
一、瀏覽器相容問題
1.IE條件註釋
書寫規則：
<!-- [if IE6]>Internet Expolore6<![end if] -->在條件註釋中間，可以寫任意的程式碼塊，代表在該瀏覽器環境下才會執行。如：
<!-- [if IE6]><link rel="stylesheet href="index.css" /><![end if] --> - if lt IE6：表示低於IE6版本,less than
- if lte IE6：表示IE6及低於IE6版本，less than or equal
- if gt IE6：表示高於IE6版本。 greater than
- if gte IE6：表示IE6及高於IE6版本
二、瀏覽器優化
- 規則一：把css檔案放在HTML的<head>標籤中載入。
能讓頁面更早的開始渲染，避免閃屏；最好將關鍵渲染路徑的樣式直接寫在頁面中（如首屏的css樣式） - 規則二：把js檔案放在<body>標籤之後</body>標籤之前載入。
因為js的載入會阻塞HTML的解析和css的渲染 - 規則三：不要使用css表示式。
因為css表示式存在相容性問題；看似強大，實際上效能開銷大。可能導致頁面卡頓 - 規則四：用外鏈方式引用css 和 js。
這麼做能有效減少HTML的體積，還能合理的利用瀏覽器的快取 - 規則五：壓縮js 和 css檔案。
生產環境中，刪除不必要的註釋，空白；歲javascript的變數名進行壓縮，混淆壓縮等。 - 規則六： 不要再頁面中重複載入js檔案
在IE中，會發起多個請求，不能發揮快取優勢；同時也意味著需要更長的js執行時間。 - 規則七： 讓ajax請求可快取。
GZIP，內容壓縮都可使用 - 規則八： 用get方式發起ajax請求。
因為get方式可以快取如果只是獲取資訊，get請求方式更加語義化。 - 規則九： 元件延遲載入。
這麼做是為了班長關鍵頁面資源優先載入，因為瀏覽器對併發數都有一定的限制（現代瀏覽器允許的最大併發數為 6 ， IE下為 2）
延遲載入的方法有： lazyload - 規則十： 減少DOM節點數
DOM節點數越多，瀏覽器佈局渲染時的計算量就越大 - 規則十一： 避免使用iframe。
iframe會阻塞父文件的onload；即便是空白的<iframe>也是比較耗時的。 - 規則十二： 減少cookie的體積。
因為cookie每次請求都回附帶上全部的請求資訊（如js文件、圖片等） - 規則十三：使用無cookie域名載入靜態資源。
這麼做事為了減少靜態資源載入時的網路傳輸量，靜態資源載入通常不需要cookie。 - 規則十四：減少js中的DOM訪問
因為當節點數增加時，查詢元素需要遍歷更深。應該合理利用documentFragment（即在全部需要建立的節點建立完畢後，將它們放進一個DocumentFragment中）。
可以將查詢到的元素快取在一個變數中。
不應使用js頻繁的修改樣式，因為這樣會導致瀏覽器的reflow，對效能損耗大。 - 規則十五：使用更智慧的時間監聽機制。
可以使用基於事件冒泡的點陣圖機制，它能有效的減少繫結數量（將事件繫結在父元素中） - 規則十六：使用常見的圖片優化手段。
因為相對比其他資源文件，圖片的體積更大，可以使用：PNGCrush、JPEGTRAN、PNGQUANT對圖片資源進行優化。或者使用漸進式編碼：JPG - 規則十七：不要再HTML中縮放圖片。
會徒增渲染開銷，提供適當尺寸的圖片即可。 - 規則十八： 不要把圖片的src置空
因為在IE、Chrome、Firefox中會引起額外的文件請求。 - 規則十九：任何資源儘量控制在25k以內。
在某些裝置下無法讀取大容量的資源