幾個月前面試的時候問我性能優化我可能會開始背誦雅虎軍規,加點
webp
,代碼層面稍稍講點,如今系統的梳理下性能優化的方方面面javascript
本文涉及方面有:css
代碼優化html
網絡請求過程角度入手前端
DNS
解析java
TCP
創建連接jquery
網絡往返時延(RTT
)web
數據傳輸面試
網絡問題角度入手正則表達式
請求數量算法
流量
性能優化測試工具
css
代碼優化CSS3
添加了複雜的屬性選擇器,能夠經過類正則表達式的方式對元素的屬性值進行匹配。固然這些類型的選擇器定是會影響性能的,正則表達式匹配會比基於類別的匹配會慢不少。大部分狀況下咱們應儘可能避免使用 *=, |=, ^=, $=, 和 ~=語法的屬性選擇器。
CSS
除了壓縮的方式,咱們還能夠經過少寫CSS屬性來達到減小CSS字節的目的
CSS
css
的繼承機制也能夠幫咱們再必定程度上縮減字節數,咱們知道CSS有不少屬性是能夠繼承的即在父容器設置了默寫屬性,子容器會默認也使用這些屬性,所以若是咱們但願全文字體尺寸是14px,大可沒必要爲每一個容器設置,只須要在body上設置就能夠了。應用這個技巧,把CSS屬性在可能的狀況下提到父容器是能夠幫咱們節省CSS字節的,順便說一下哪些屬性能夠繼承
全部元素可繼承:visibility
和cursor
內聯元素和塊元素可繼承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
塊狀元素可繼承:text-indent
和text-align
列表元素可繼承:list-style、list-style-type、list-style-position、list-style-image
表格元素可繼承:border-collapse
不可繼承的:display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before
CSS
表達式CSS reset
或屬性設置javascript
代碼優化javaScript是解釋性語言,相比編譯性語言執行速度要慢。瀏覽器已經實現的方法,就不要再去實現一遍了。另外,瀏覽器已經實現的方法在算法方面已經作了不少優化
JavaScript
是動態類型,但若是你想提升速度不要使用該功能。儘可能保持變量的類型一致。這也適用於數組,儘管主要是由瀏覽器都進行了優化,但儘可能不要混用不一樣類型的數組
優化編譯器不支持一些特定的語句, 使用這些語法會使包含它的函數沒法獲得優化.
有一點請注意, 即便這些語句沒法到達或者不會被執行, 它們也會使相關函數沒法被優化
目前不會被優化的有:
generator
函數
包含 for...of
語句的函數
包含 try...catch
的函數
包含 try...finally
的函數
包含複合 let
賦值語句的函數 (原文爲 compound let assignment)
包含複合 const
賦值語句的函數 (原文爲 compound const assignment)
包含含有 __proto__
或者 get/set
聲明的對象字面量的函數
可能永遠不會被優化的有:
包含 debugger
語句的函數
包含字面調用 eval()
的函數
包含 with
語句的函數
以前提到過的一些語句在生產環境中是沒法避免的, 好比 try...finally
和 try...catch
. 爲了是代價最小, 它們必須被隔離到一個最小化的函數, 以保證主要的代碼不受影響.
一般開發者都會使用JavaScript
類庫,如jQuery、Mootools、YUI、Dojo
等,可是開發者每每只是使用JavaScript
類庫中的部分功能。爲了更大的提高性能,應儘可能避免使用這類大而全的類庫,而是按需使用微類庫來輔助開發
直接用true和false作標記,不要使用數字或者字符串的1和0來作標記。
jquery
最佳實踐正常的一次網絡請求會經歷4個過程,分別是:
DNS
解析 ->TCP
創建連接 -> 網絡往返時延(RTT
) -> 數據傳輸,面臨的挑戰能夠總結爲時延較高、帶寬有限、流量有成本,具體各過程面臨的挑戰和優化措施以下。
DNS
解析
主要挑戰:解析耗時長
優化措施
減小域名
首屏在3個域名內
減小DNS
查找,避免重定向。瀏覽器DNS
緩存 、計算機DNS
緩存、 服務器DNS
緩存、使用Keep-Alive
特性 來減小DNS
查找。
參考資料: DNS解析
TCP
鏈接
主要挑戰:除了TCP握手會多一次網絡往返,另外在移動端網絡創建TCP
連接前,還須要進行信令的交互,在2G環境下影響最爲明顯
優化措施(複用)
HTTP2.0
多路複用HTTP/2
能夠很容易的去實現多流並行而不用依賴創建多個 TCP 鏈接,HTTP/2 把 HTTP 協議通訊的基本單位縮小爲一個一個的幀,這些幀對應着邏輯流中的消息。並行地在同一個 TCP 鏈接上雙向交換消息。
單鏈接多資源的方式,減小服務端的連接壓力,內存佔用更少,鏈接吞吐量更大 因爲 TCP 鏈接的減小而使網絡擁塞情況得以改善,同時慢啓動時間的減小,使擁塞和丟包恢復速度更快
HTTP1.1
持久鏈接
參考資料:知乎HTTP2.0
網絡往返時延(RTT
)
主要挑戰:耗時長
優化措施(複用、合併、就近接入)
就近接入
靜態資源:接入CDN
動態數據
接入移動運營商和小運營商反向代理進行加速
合併請求,減小請求數量
首屏禁止30一、302跳轉
合併樣式和腳本
使用css
圖片精靈
首屏必須小圖片使用base64
格式內嵌入HTML
初始首屏以外的圖片資源按需加載,靜態資源延遲加載
合併外聯代碼
緩存
抽出公共代碼複用緩存
使用LocalStorage
等緩存數據
圖片/外鏈代碼開啓緩存
參考資料:知乎合併 HTTP 請求是否真的有意義?
數據傳輸
主要挑戰:帶寬有限、流量有成本
優化措施(複用、壓縮、分包)
壓縮
圖片優化
不須要背景透明的採用jpg代替png 使用webp 使用合適尺寸的圖片,而不是對圖片進行拉伸
開啓GZIP
壓縮代碼
靜態資源使用不帶cookie
的域名
複用HTTP 304
頁面在網絡上遇到的問題能夠總結爲一個或多個網絡請求以及每一個請求的流量問題,在請求數量以及每一個請求的流量固定的狀況下,能夠經過優化請求順序以及合理劃分流量來提高用戶體驗,請求順序和流量劃分一般遇到的問題和優化措施以下。
請求
主要挑戰:
沒有充分利用有限的併發數量,串行加載數據
能夠預先加載的操做沒有預先加載
無用請求搶佔併發數量
優化
DNS
的預解析
能夠經過用meta
信息來告知瀏覽器, 我這頁面要作DNS預解析
<meta http-equiv="x-dns-prefetch-control" content="on" />
可使用link標籤來強制對DNS作預解析:
<link rel="dns-prefetch" href="http://ke.qq.com/" />
HTTP
管線化
HTTP管線化能夠克服同域並行請求限制帶來的阻塞,它是創建在持久鏈接之上,是把全部請求一併發給服務器,可是服務器須要按照順序一個一個響應,而不是等到一個響應回來才能發下一個請求,這樣就節省了不少請求到服務器的時間。不過,HTTP管線化仍舊有阻塞的問題,若上一響應遲遲不回,後面的響應都會被阻塞到。
刪除無用請求
流量
主要挑戰:各類流量混在一塊兒加載,流量之間沒有優先級
優化措施(延遲加載)
延遲加載非首屏代碼(拆分首屏css,首屏js)
延遲加載非首屏數據
懶加載,屏幕滾動到才加載
延遲加載非首屏圖片
輪播圖片等第一張圖片加載後再加載後面其餘圖片
YSLOW
會按照雅虎軍規分析網站
Page Speed Online
Google Page Speed 是當下很流行的在線測試網站性能工具,基於Google的一套最佳的前端性能的規則,你能夠很方便獲得大量的性能信息,甚至還提供了移動設備的最佳實踐報告。
Show Slow它能從三個流行的測試工具YSlow,Page Speed和DynaTrace按期獲取測試數據進行總結對比,免費,但須要註冊。