1、dns預載入
通過dns-prefetch屬性可以讓瀏覽器提前解析資源或介面對應的伺服器ip位址，避免在請求中發起dns解析請求，節省請求時間2、資源預載入
利用preload，prefetch，preconnect屬性我們可以在3、使用cdn資源，並且注意http快取頭的設定內部宣告式的書寫資源獲取請求，提前載入非首屏但又較重要的資源，避免在滿足首屏優先載入的情況下，反而忽略了其他次重要資源的載入
http快取包括強快取（cache-control，expire）和協議快取（last-modified, etag）兩種。其中，協議快取資源每次都會像服務端傳送請求來判斷資源是否過期，未過期則返回304，在網路極其卡頓的情況下，這個304請求有可能堵塞整個頁面的資源載入4、對js資源按照模組和首屏需求進行優先載入，不需要的模組按需載入
移動端的網路資源有限，為了盡快讓使用者看到有意義的首屏，我們需要盡可能的保持首屏需要載入的資源越小越好5、內聯首屏關鍵css
將首屏關鍵樣式內聯至頁面中，保證最快速度看到帶有基本樣式的首屏，避免使用者端出現較長時間的白屏時間6、內聯關鍵js**
7、檢查服務端下發的資源是否使用gzip壓縮
gzip對於文字資源（js，css檔案）有較高的壓縮效率，通常可以減少70%的體積8、避免資源的重定向
增大載入時間，使用者體驗較差9、非同步延遲載入第三方非關鍵**
移動端網路資源有限，為了讓這些不重要的**不影響首屏渲染，可以延遲一小段時間在載入10、合理的使用本地快取，避免把不必要的資料全部放到cookie當中
每一次ajax請求都會將當前網域名稱中的所有cookie值傳遞給服務端11、使用service worker，增加頁面的離線體驗和頁面的載入體驗
頁面傳送請求時，會先經過sw的指令碼，這樣可以讓我們通過程式設計的方式來制定我們需要快取的檔案，同時，快取在service worker中的檔案，可以讓使用者離線訪問12、在條件允許的情況下，可以使用http2.0協議
http2.0協議可以提公升網路鏈路的復用性，提公升資源載入效率1、注重標籤的語義化，保持用最簡潔的標籤完成所需的功能
標籤的語義化提高**的可維護性，在頁面載入css失敗時也不至於很難看。同時，需要保持標籤最小化，無意義的標籤可以利用偽類表示2、css放到head中，js到body尾部，js,css都需要放在head中時，js放在前面
3、html**壓縮，去除注釋、空白符
減少網路傳輸的檔案大小4、盡量避免使用iframe
1、壓縮css**，排除重複的css樣式
減少網路傳輸的檔案大小2、根據元件打包css檔案
按需載入，減少網路傳輸的檔案大小3、避免使用css的@import語法
可能阻塞頁面的載入4、使用sass、stylus、less等預編譯語言時，編碼css巢狀不超過3層
提高解析css的效率5、使用autoprefixer給css**自動增加字首
自動幫助我們新增瀏覽器頭，避免意想不到的瀏覽器相容性問題6、盡量少使用css萬用字元，特別是多層巢狀的末尾使用萬用字元
css的解析過程是從右往左逆向匹配，使用css萬用字元會增加解析的計算量7、不要濫用高消耗的樣式
box-shadow、border-radius、filter這些屬性繪製前都需要瀏覽器進行大量的計算1、簡單動畫盡量只使用transform、opacity、transition等屬性完成
width、height、top、left、right、bottom、margin等屬性的變更都會觸發頁面的重排，在移動端環境中頻繁的重排會導致動畫卡頓2、較複雜動畫可以使用css幀動畫
在移動端相容性好、效能好、更具有可操控性3、js動畫不要使用settimeout、setinterval，使用requestanimationframe
settimeout和setinterval在動畫執行存在效能問題，且無法準確的控制幀數4、對將要使用動畫的部分，開啟gpu硬體加速（注意不要濫用）
對開啟gpu硬體加速的標籤，瀏覽器將把他提公升到乙個單獨的圖層，並通過gpu進行預處理5、使用will-change屬性（注意不要濫用）
will-change的作用告訴瀏覽器哪些屬性將要變化，讓他可以提前做好準備1、js**壓縮，**分模組載入
減少**大小，根據頁面需求按需載入資源，最下化使用者需要載入的資源大小加快頁面展示的速度2、處理長列表或者大量dom元素時，不要繫結太多的事件監聽函式
節省記憶體和減少監聽事件的註冊3、利用throttle和debounce函式去處理頻發觸發，但是不需要頻發執行的函式，例如scroll,touchmove
避免頻繁的無效的操作，避免頁面的卡頓4、利用settimeout代替setinterval
setinterval可能存在指令堆積的問題，導致頁面卡頓5、盡量避免大批量的重排重繪
頁面的重排重繪很耗效能，尤其是重排1、使用工具壓縮
移動端網路條件有限，越大載入時間越長，合理使用工具壓縮，可以兼顧質量和大小2、使用較高壓縮比格式的檔案webp
減少檔案傳輸的大小，避免出現尺寸使用不當的問題，小icon用大圖3、使用雪碧圖
減少http請求數，不過當我們的http協議公升級至1.1，2.0之後，雪碧圖減少http請求數的效果並不明顯4、懶載入
避免使用者提前載入過多無用的資源，浪費使用者流量5、根據不同的螢幕畫素比載入不同尺寸的
在較大畫素比的螢幕下載入小尺寸的，會模糊；在較小畫素比的螢幕下載入大尺寸的，會浪費使用者流量和cdn流量6、小於2kb的可以嘗試使用base64格式去替換
將轉換成base64格式可以減少http請求數量，但是，不能對較大尺寸的使用base64格式，因為base64演算法會提公升三分之一的檔案大小1、壓縮字型檔大小，避免載入過多無用的資源，推薦工具字蛛
我們只需要頁面需要的字型檔案即可，不需要浪費流量載入使用者不需要的資源2、優化字型的展示策略
使用font-display屬性可以避免在字型載入過程中，不顯示文字的問題3、當特殊文字量較少且內容固定時，可以嘗試使用代替
快速完美的還原介面1、對於整個頁面資源需求量較大時，可以使用骨架屏或者增加loading效果
加強使用者體驗，加速首屏體驗，通過有意義的ui讓使用者提前得到反饋2、lighthouse效能跑分
google推出的網頁效能跑分工具，可以較全面的了解**的效能3、通過chrome的控制面板code coverage部分，找到未使用**的比例
幫助我們快速找到首屏未使用的**4、通過構建工具中使用scope hoisting
這裡以webpack舉例，使用scope hoisting後打包的檔案，檔案體積更小，**執行時建立的函式作用域更少，提公升js的啟動速度
移動端效能優化？
盡量使用css3動畫，開啟硬體加速。適當使用touch事件代替click事件。避免使用css3漸變陰影效果。可以用transform translatez 0 來開啟硬體加速。不濫用float。float在渲染時計算量比較大，儘量減少使用 合理使用requestanimationframe動畫代替s...
互動自查表 可用性優化實錄
相信不少同學都嘗試過建立自查表，但最後是否有真正利用起來呢？這一次就和大家分享一下，我們團隊所用的自查表的迭代優化過程和結果。首先，我們還是要了解一下優化前自查表的表現 如下圖 建立自查表1.0 時程式設計客棧的部分思路 1 文件使用路徑長 因為使用了excel電子文件，雖然對內容進行擴充套件很方便...
移動端效能
1 減少或避免使用repaint 頁面重繪 reflow 頁面回流 2 盡量快取可以快取的資料 3 用css3動畫代替dom 操作的動畫，可以用animation.css html5常用api 1 dom操作 queryselector 2 本地資料儲存，localstorage，setitem，g...