頁面性能優化

博客地址：https://ainyi.com/15

在chrome瀏覽器，對於同一域名，最多支持6個請求的併發，其餘請求會推入到隊列中等待或停滯不前，直到6個請求之一完成後，隊列中新的請求才會放出。

能夠看到，六個綠色條併發請求，四個灰色條等待請求，最下面三個綠色條3.4s後才觸發請求

1. html、css、js 代碼壓縮
2. 公共文件（js/css）合併、請求合併
3. 瀏覽器緩存（強緩存、弱緩存）
4. CDN（Content Delivery Network，內容分發網絡）加速。經過將靜態資源(例如javascript，css，圖片等等）緩存到離用戶很近的相同網絡運營商的CDN節點上，不但能提高用戶的訪問速度，還能節省服務器的帶寬消耗，下降負載（所以，一個地區內只要有一個用戶先加載資源，在 CDN 中創建了緩存，該地區的其餘後續用戶都能所以而受益）
5. loading 動畫
6. 頁面骨架屏
7. 減小操做 dom 方法
8. 優化圖片加載
9. 懶加載和預加載

減小操做 dom 方法

1. 插入大量dom元素時，可使用innerHTML替代逐個構建元素
2. 處理列表子元素的事件時，可使用事件委託

優化圖片的加載

1. 圖片懶加載，優先加載瀏覽器可視區域的圖片
2. 小圖片或圖標，可用SVG、Iconfont、Base64等技術，多個圖標也能夠製做成雪碧圖（CssSprites）
3. 加載時預先加載一張特別小的通用略縮圖，正式圖片加載完成後替換略縮圖
4. 服務端根據業務須要能夠對圖片進行壓縮 （不影響用戶體驗的狀況下）
5. 爲項目添加骨架屏
6. Base64是網絡上最多見的用於傳輸8Bit字節碼的編碼方式之一，Base64就是一種基於64個可打印字符來表示二進制數據的方法。可查看RFC2045～RFC2049，上面有MIME的詳細規範。

懶加載原理

首先將頁面上的圖片的 src 屬性設爲空字符串或者一個加載中的圖片，而圖片的真實路徑則設置在 data-original 屬性中，

當頁面滾動的時候須要去監聽 scroll 事件，在 scroll 事件的回調中，判斷咱們的懶加載的圖片是否進入可視區域，

若是圖片在可視區內，將圖片的 src 屬性設置爲 data-original 的值，這樣就能夠實現延遲加載

預加載

1. 純 css 實現預加載
   不在瀏覽器可視範圍內加載圖片，直接 css 加載，
   但圖片會隨文檔一塊兒加載，此時可能會下降文檔的加載速度
2. 純 js 實現預加載
   js 腳本提早加載圖片 src 或使用 image 對象提早加載圖片
3. css 和 js 實現預加載
   如 img 標籤最初設置爲 display: none，要加載的時候顯示
   或者滾動條到達可視範圍內，js 爲目標 div 加上這個已經加載好的 css 屬性
4. ajax 預加載
   提早 ajax 請求獲取數據
   場景有個 tab 標籤頁，當鼠標放到某個 tab，馬上 ajax 加載該 tab 的數據
   當點擊這個 tab 標籤頁的時候，就能夠馬上加載出來，再將數據緩存起來或加入全局變量，下一次使用直接從緩存讀取

圖片轉爲base64

1. 圖片的 base64 編碼就是能夠將一幅圖片的二進制編碼成一串字符串，使用該字符串代替圖像地址
2. 能夠減小http請求，base64能夠隨着html的下載同時下載
3. 適用於小圖片和簡單圖片

節點

element.parentNode 返回元素的父節點

element.childNodes 返回元素的一個子節點的數組

element.nodeName 返回元素的標記名（大寫），用的時候轉換小寫（element.nodeName.toLowerCase()）

event.target：返回觸發此事件的元素（事件的目標節點）

詳看：http://www.javashuo.com/article/p-fhvvbfyk-bk.html

HTML DOM 元素對象：http://www.runoob.com/jsref/dom-obj-all.html

HTML DOM 事件對象：http://www.runoob.com/jsref/dom-obj-event.html

工做中對於廣告編輯頁的優化

優化加載速度 1.4s

優化的具體

1. 公共接口合併，減小 http 請求，後端作緩存
2. promise all 解決根據請求順序順序獲取的問題（當前接口的數據展現須要依賴上一個接口數據的情景）舊版本是 如有依賴關係的接口，是等待上一個接口請求完畢，才發送當前接口請求
3. 數據預加載（第四個模塊的數據默認收起，點擊展開的時候預先加載。不用等待）
4. 公用數據下沉到領域模型，多個模塊複用的數據，不用再次請求接口
5. 實現頁面 MVC 結構 可看這裏數據處理單獨抽出來放在 service 層，（vuex mutation）
6. 數據處理（數據量很大的時使用數據字典，可使用 obj.key 獲得想要的數據，須要的數據 key 值與數據字段做關係映射）
7. 組件化、ESLint 代碼規範，便於維護舊版本是 循環使用 if 等於須要的 key 來獲取數據
8. for 循環的使用，數組循環使用 for of，對象使用 for in
9. 路由方面，使用路由懶加載
10. 一開始頁面須要加載多條請求，在 axios 統一請求攔截加上loading，和接口請求計數器+1，統一響應攔截計數器-1，當等於零就關閉 loading
11. 渠道組件和多選省市級三級聯動組件的優化（重寫 Element 的穿梭框組件）具體看 關於 Element 組件的穿梭框的重構

博客地址：https://ainyi.com/15