前端優化總結

基本規則

• css放到中
• js 放到底部 前面
• 內聯加載快
• 外置能夠被複用，能夠被緩存

瀏覽器併發數

Browser	HTTP1.0	HTTP1.1
IE6,7	2	4
IE8	6	6
Firebox	6	6
Safari	4	4
Chrome	6	6
Opera	4	4

圖片

1. css 雪碧圖

   優勢

   • 減小加載網頁圖片時對服務器的請求次數
   • 能減小圖片的字節,比多張圖片字節更小。

   缺點

   • 維護比較麻煩
   • 自適應屏幕下，容易出現背景斷裂
   • 元素的位置，須要計算

2. 圖片質量優化

   • 若是是顏色豐富的圖片，通常選擇jpg
   • 若是是動畫圖片，通常選擇gif
   • 若是須要清晰圖片或透明圖片，通常選擇png 並儘可能使用png 8

3. 圖片壓縮（tinypng）

4. 使用更小更快更強，新一代圖片格式 WebP
   WebP是谷歌在10年推出一種新型圖片格式，最先也是應用在谷歌產品中，谷歌發佈的Android Studio 2.3正式版中就包括對WebP支持的更新，在實測中，webp 格式比 jpg 格式減少約 20%。這對優化用戶體驗，減小CDN帶寬消耗有很好的效果，但並非全部瀏覽器都支持 webp ，因此爲了使用 webp，須要作一點兼容性的工做。

5. base64： 減小http請求，字節小圖可以使用。

6. iconfont： 優勢太多，適用小圖標，大小顏色可變。經常使用icon無需設計。iconfont庫資源豐富

7. 圖片延遲加載(懶加載)

CSS

1. css選擇器： 從右到左匹配
2. 儘可能少使用計算屬性，如calc()、expression等
3. 不要使用@import
4. 重繪和重排 重繪（repaint）、重排（reflow）
   repaint：屏幕的一部分進行了重畫，好比某個 css 中改變背景色，元素尺寸沒有變。
   reflow：任何一個元素的尺寸發生了變化，須要從新驗證並計算 render tree，就會形成重排。

常見引發重排的操做：

• js添加或刪除元素
• 元素大小發生改變 （border、padding、width）
• 瀏覽器窗口大小改變
• 元素位置改變
• 設置style屬性
• 頁面首次渲染

常見引發重繪的操做：

color、background、background-position、box-shadow、border-radius等。

優化重排和重繪

• 減小DOM操做
• 利用添加class 修改樣式
• 動畫使用CSS動畫，開啓GPU加速
• 不要使用table
• 可讓其脫離文檔流，position:absolute,fixed

JavaScript

1. 壓縮、合併、混淆
2. 使用async 或 defer
3. 減小全局變量使用，慎用閉包
4. 使用事件委託
5. 避免使用for in 循環
6. 服務器端渲染
7. 減小DOM操做

能夠參考----雅虎35條軍規

瀏覽器緩存

1. 瀏覽器緩存機制
   瀏覽器緩存機制是指經過 HTTP 協議頭裏的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段來控制文件緩存的機制。
   Cache-Control 用於控制文件在本地緩存有效時長
   Last-Modified 是標識文件在服務器上的最新更新時間。
2. Web Storage
   分爲 sessionStorage 和 localStorage
   經過存儲字符串的 Key/Value ，存儲大小爲5MB（Cookies 4KB)
3. Web SQL Database
   又名html5本地數據庫，用戶能夠像訪問本地文件那樣輕鬆地對本地數據庫進行直接訪問
   目前基本已經被放棄, 新一代的前端存儲方案--indexedDB
4. Application Cache
   離線緩存，可在沒有因特網鏈接時進行訪問
   HTML5的離線存儲是基於一個manifest文件(緩存清單文件，後綴爲.appcache)的緩存機制(不是存儲技術)，經過這個文件上的清單解析離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態時，瀏覽器會經過被離線存儲的數據進行頁面展現。

其它

1. 靜態文件存儲到CDN上
2. 避免重寫向
3. 少用iframe，阻塞onload，佔用併發
4. 升級http爲http2.0

下次面試官問你時，不要只說表面的那幾個了~

• 瀏覽器緩存機制