1.減少頁面請求
按需載入 合併壓縮檔案 將小圖示合併成雪碧圖 字型圖示 dataURL 內建圖片
2.優化網路連結
cdn, 減少dns查詢, 避免伺服器端重定向
3.減少下載量
壓縮css圖片 混淆壓縮js程式碼 伺服器端啟用gzip壓縮
4.啟用快取
5.頁面內部優化
css置頂 ---- 為避免當頁面變化時重繪頁面元素，瀏覽器會阻塞頁面呈現，直到樣式表解析完畢
js置底 ---- script元素會阻塞後續內容的解析，因為script中可以同過document.write來更改頁面
不會縮短載入時間,但會減少頁面呈現時間
白屏時間 fetchStart -- app-cache-- dns-- tcp -- request -- response
前端效能監測器
https://www.cnblogs.com/bldxh/p/6857324.html
CSS樣式優先順序
先比較優先順序
- 瀏覽器宣告
- 使用者普通宣告
- 作者普通宣告
- 作者重要宣告
- 使用者重要宣告
再比較特殊性
- 宣告來自內聯的style屬性則 S+1；
- 宣告中含有id屬性則 I+1；
- 宣告中含有類、偽類、屬性選擇器則 C+1；
- 生命中含有元素、偽元素選擇器則 E+1；
https://www.cnblogs.com/ohmyrose/p/8047859.html
進行效能優化，首先要知道評價頁面效能的指標
https://segmentfault.com/a/1190000004176324
網站效能優化工具大全-----HTML CSS JavaScript如何優化
https://segmentfault.com/a/1190000002418920
非同步載入css和JavaScript指令碼
https://segmentfault.com/a/1190000002589116
-
只有 10%~20% 的終端使用者響應時間花在了下載 HTML 文件上。其餘的 80%~90% 時間花在了下載頁面中的所有元件中;
-
另外一點是，優化後臺需要花費比較大的成本，優化前端只需要適當地遵循一些法則會有較大的提升，相對低成本高收益
提高前端效能的黃金法則
https://segmentfault.com/a/1190000004645141
雖然書中的很多手段都已經過時了，但是思路基本沒變，取其精華就好。
前端效能優化一味奉行“最佳實踐”有時候反而過猶不及，所以針對專案的實際情況來優化才是明智的選擇。
提升網頁效能
http://www.w3cplus.com/performance/10-ways-minimize-reflows-improve-performance.html
網頁卡頓的除錯方法
profile，可以詳細的看具體的呼叫資訊。
一般到26都看不出來
gif一般8-12幀吧
轉動視角 對幀率要求很高
Excetional Performance 團隊總結出了一系列可以提高網站速度的方法。可以分為 7大類 35條。
包括內容 、伺服器 、 CSS 、 JavaScript 、Cookie 、圖片 、移動應用 ，七部分。
一、內容部分
- 儘量減少 HTTP請求
- 減少 DNS查詢
- 避免跳轉
- 快取 Ajxa
- 推遲載入
- 提前載入
- 減少 DOM元素數量
- 用域名劃分頁面內容
- 使 frame數量最少
- 避免 404錯誤
二、伺服器部分
- 使用內容分發網路
- 為檔案頭指定Expires或Cache-Control
- gzip壓縮檔案內容
- 配置ETag
- 儘早重新整理輸出緩衝
- 使用GET來完成AJAX請求
- 避免空的影象來
三、CSS部分
- 把樣式表置於頂部
- 避免使用CSS表示式（Expression）
- 用<link>代替@import
- 避免使用濾鏡
四、 JavaScript部分
- 把指令碼置於頁面底部
- 使用外部JavaScript和CSS
- 削減JavaScript和CSS
- 剔除重複指令碼
- 減少DOM訪問
- 開發智慧事件處理程式
五、Coockie部分
- 減小Cookie體積
- 對於頁面內容使用無coockie域名
六、Image 部分
- 優化影象
- 優化CSS Spirite
- 不要在HTML中縮放影象
- favicon.ico要小而且可快取
七、 Mobile部分
- 保持單個內容小於25K
- 打包元件成複合文字
https://segmentfault.com/a/1190000004139275
程式碼級優化
關於圖片
-
頁面內的大圖，特別是banner圖，登入頁背景圖等，使用第三方的cdn加速。同時做一遍壓縮，如果壓縮之後還超過200kb，則和設計師溝通是否取消或者更換圖片。
-
精靈圖必備，各種小圖示，小icon，做到一張圖片裡面去。
-
儘量使用icon font代替小圖示，icon font的優點可以甩普通的icon圖示幾條街，隨意調整大小，改變顏色，太cool！！
-
如果專案很大，公司不差錢，最佳方案是把圖片資源放在單獨的伺服器上，配置獨立的域名，圖片資源的載入由圖片域名載入，很多大公司的靜態資源都是由獨立的伺服器來存放和分發的
我一般和設計師討價還價的底線就是圖片必須載入流暢，如果使用者開啟網頁圖片載入半天出不來，就算我們的圖片做的再漂亮，又有什麼卵用！
關於js
-
第三方的js庫，必須使用min版。站點內部的lib，每次釋出上線之前必須使用gulp壓縮合並。
-
移動端使用zepto庫，不允許使用jquery
-
給js程式碼一個全域性名稱空間，舉個例子，我們的專案是某個自行車官網，全域性名稱空間就叫bike，和本專案有關的所有js方法，函式，變數，全部掛在bike的下面
var bike={};
bike.name='cookee';
bike.getOrderDetail=functtion(id){.....}
關於css
-
提煉專案的公共樣式，按鈕、表單。
-
命名。面向屬性命名，通用模組可以面向模組命名，比如頭部header，尾部footer等，其他請儘量使用面向屬性的命名方式，這樣可以給css最大程度的複用自由，關於什麼是面向屬性的命名方式，請參考推薦
-
樣式分離再分離，在css裡面不要使用id屬性，留著id給js使用
-
減少css的層級巢狀，由於css的渲染是從右向左的，關於網頁的渲染，這個細說起來又可以寫一篇文章了。如果你的層級標籤巢狀多層，想想要浪費多少渲染時間，對於移動端毫秒必爭的載入時間，你還有什麼理由不改進你的程式碼
-
優雅的名字可以讓人一目瞭然，放一張前人總結的圖，沒事的時候多看看，潛移默化的記住這些名字
6.避免使用萬用字元
7.不使用標籤名或類名修飾ID規則：如果規則使用ID選擇器作為關鍵選擇器，不要給規則新增標籤名。因為ID本身就是唯一的，新增標籤名會不必要地降低匹配效率。
8.不使用標籤名修飾類：相較於標籤，類更具獨特性。
9.儘量選擇最具體的方式：造成低效的最簡單粗暴的原因就是在標籤上使用太多規則。給元素新增類可以更快細分到類方式，可以減少規則去匹配標籤的時間。
10.關於後代選擇器和子選擇器：避免使用後代選擇器，非要用的話建議用子選擇器代替，但子選擇器也要慎用，標籤規則永遠不要包含子選擇器。
11.利用可繼承性：沒必要在一般內容上宣告樣式。
關於html
-
精簡dom結構，減少冗餘html
-
語義化標籤，要學會用
-
移動端，使用svg繪圖代替canvas繪圖，canvas會有嚴重的鋸齒(如果有同學有實踐過的解決鋸齒的方案，我願恭聽)