網絡性能優化常用方法

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

網頁卡頓的調試方法

都可以啊，timeline 比較直接，一般先看這個。

profile，可以詳細的看具體的調用資訊。

頁面隻要不低于30幀就都是流暢

一般到26都看不出來

flash 是多少幀？

gif一般8-12幀吧

大部分都用24幀……

幀率要求高的一般都是3d

轉動視角對幀率要求很高

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會有嚴重的鋸齒(如果有同學有實踐過的解決鋸齒的方案，我願恭聽)