性能優化詳解

幾個月前面試的時候問我性能優化我可能會開始背誦雅虎軍規,加點webp,代碼層面稍稍講點,如今系統的梳理下性能優化的方方面面javascript

本文涉及方面有:css

  1. 代碼優化html

  2. 網絡請求過程角度入手前端

    • DNS解析java

    • TCP創建連接jquery

    • 網絡往返時延(RTT)web

    • 數據傳輸面試

  3. 網絡問題角度入手正則表達式

    • 請求數量算法

    • 流量

  4. 性能優化測試工具

代碼優化

css代碼優化

避免類正則的屬性選擇器

CSS3添加了複雜的屬性選擇器,能夠經過類正則表達式的方式對元素的屬性值進行匹配。固然這些類型的選擇器定是會影響性能的,正則表達式匹配會比基於類別的匹配會慢不少。大部分狀況下咱們應儘可能避免使用 *=, |=, ^=, $=, 和 ~=語法的屬性選擇器。

合寫CSS

除了壓縮的方式,咱們還能夠經過少寫CSS屬性來達到減小CSS字節的目的

利用繼承CSS

css的繼承機制也能夠幫咱們再必定程度上縮減字節數,咱們知道CSS有不少屬性是能夠繼承的即在父容器設置了默寫屬性,子容器會默認也使用這些屬性,所以若是咱們但願全文字體尺寸是14px,大可沒必要爲每一個容器設置,只須要在body上設置就能夠了。應用這個技巧,把CSS屬性在可能的狀況下提到父容器是能夠幫咱們節省CSS字節的,順便說一下哪些屬性能夠繼承

  • 全部元素可繼承:visibilitycursor

  • 內聯元素和塊元素可繼承: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-indenttext-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...finallytry...catch. 爲了是代價最小, 它們必須被隔離到一個最小化的函數, 以保證主要的代碼不受影響.

使用微類庫

一般開發者都會使用JavaScript類庫,如jQuery、Mootools、YUI、Dojo等,可是開發者每每只是使用JavaScript類庫中的部分功能。爲了更大的提高性能,應儘可能避免使用這類大而全的類庫,而是按需使用微類庫來輔助開發

用作標記的變量儘量使用布爾類型

直接用true和false作標記,不要使用數字或者字符串的1和0來作標記。

jquery最佳實踐

jquery最佳實踐筆記

網絡請求角度入手

正常的一次網絡請求會經歷4個過程,分別是:DNS解析 -> TCP創建連接 -> 網絡往返時延(RTT) -> 數據傳輸,面臨的挑戰能夠總結爲時延較高、帶寬有限、流量有成本,具體各過程面臨的挑戰和優化措施以下。

  1. DNS解析

    • 主要挑戰:解析耗時長

    • 優化措施

      1. 減小域名

      2. 首屏在3個域名內

      3. 減小DNS查找,避免重定向。瀏覽器DNS緩存 、計算機DNS緩存、 服務器DNS緩存、使用Keep-Alive特性 來減小DNS查找。


    參考資料: DNS解析

  2. TCP鏈接

    • 主要挑戰:除了TCP握手會多一次網絡往返,另外在移動端網絡創建TCP連接前,還須要進行信令的交互,在2G環境下影響最爲明顯

    • 優化措施(複用)

      1. HTTP2.0多路複用
        HTTP/2 能夠很容易的去實現多流並行而不用依賴創建多個 TCP 鏈接,HTTP/2 把 HTTP 協議通訊的基本單位縮小爲一個一個的幀,這些幀對應着邏輯流中的消息。並行地在同一個 TCP 鏈接上雙向交換消息。

        單鏈接多資源的方式,減小服務端的連接壓力,內存佔用更少,鏈接吞吐量更大
           因爲 TCP 鏈接的減小而使網絡擁塞情況得以改善,同時慢啓動時間的減小,使擁塞和丟包恢復速度更快
      2. HTTP1.1持久鏈接

    參考資料:知乎HTTP2.0

  3. 網絡往返時延(RTT)

    • 主要挑戰:耗時長

    • 優化措施(複用、合併、就近接入)

      1. 就近接入

        • 靜態資源:接入CDN

        • 動態數據
          接入移動運營商和小運營商反向代理進行加速

      2. 合併請求,減小請求數量

        • 首屏禁止30一、302跳轉

        • 合併樣式和腳本

        • 使用css圖片精靈

        • 首屏必須小圖片使用base64格式內嵌入HTML

        • 初始首屏以外的圖片資源按需加載,靜態資源延遲加載

        • 合併外聯代碼

      3. 緩存

        • 抽出公共代碼複用緩存

        • 使用LocalStorage等緩存數據

        • 圖片/外鏈代碼開啓緩存

    參考資料:知乎合併 HTTP 請求是否真的有意義?

  4. 數據傳輸

    • 主要挑戰:帶寬有限、流量有成本

    • 優化措施(複用、壓縮、分包)

      1. 壓縮

        • 圖片優化

          不須要背景透明的採用jpg代替png
          使用webp
          使用合適尺寸的圖片,而不是對圖片進行拉伸
        • 開啓GZIP

        • 壓縮代碼

        • 靜態資源使用不帶cookie的域名

      2. 複用
        HTTP 304

網絡問題角度入手

頁面在網絡上遇到的問題能夠總結爲一個或多個網絡請求以及每一個請求的流量問題,在請求數量以及每一個請求的流量固定的狀況下,能夠經過優化請求順序以及合理劃分流量來提高用戶體驗,請求順序和流量劃分一般遇到的問題和優化措施以下。

  1. 請求

    • 主要挑戰:
      沒有充分利用有限的併發數量,串行加載數據
      能夠預先加載的操做沒有預先加載
      無用請求搶佔併發數量

    • 優化

      1. DNS的預解析
        能夠經過用meta信息來告知瀏覽器, 我這頁面要作DNS預解析

        <meta http-equiv="x-dns-prefetch-control" content="on" />
        可使用link標籤來強制對DNS作預解析:
        <link rel="dns-prefetch" href="http://ke.qq.com/" />
      2. HTTP管線化
        HTTP管線化能夠克服同域並行請求限制帶來的阻塞,它是創建在持久鏈接之上,是把全部請求一併發給服務器,可是服務器須要按照順序一個一個響應,而不是等到一個響應回來才能發下一個請求,這樣就節省了不少請求到服務器的時間。不過,HTTP管線化仍舊有阻塞的問題,若上一響應遲遲不回,後面的響應都會被阻塞到。

      3. 刪除無用請求

    1. 流量

      • 主要挑戰:各類流量混在一塊兒加載,流量之間沒有優先級

      • 優化措施(延遲加載)

        1. 延遲加載非首屏代碼(拆分首屏css,首屏js)

        2. 延遲加載非首屏數據
          懶加載,屏幕滾動到才加載

        3. 延遲加載非首屏圖片
          輪播圖片等第一張圖片加載後再加載後面其餘圖片

網站性能工具

YSLOW
會按照雅虎軍規分析網站
Page Speed Online
Google Page Speed 是當下很流行的在線測試網站性能工具,基於Google的一套最佳的前端性能的規則,你能夠很方便獲得大量的性能信息,甚至還提供了移動設備的最佳實踐報告。
Show Slow它能從三個流行的測試工具YSlow,Page Speed和DynaTrace按期獲取測試數據進行總結對比,免費,但須要註冊。

相關文章
相關標籤/搜索