性能優化，不止是作技術

時間 2021-05-24

標籤前端面試數據庫瀏覽器性能優化微信網絡前端工程師前端性能佈局欄目系統性能简体版

原文原文鏈接

前言

性能優化簡簡單單四個字，可是涉及了方方面面。作性能優化不止是作技術，還有不少技術以外的事情。咱們常常在知乎、掘金等等平臺上看到不少性能優化的帖子。請注意並非說這些帖子很差，固然他們寫的很好，可是作性能優化真的就是隻須要知道有多少種優化策略，有多少種優化技巧嗎？這些技巧或者策略短時間看來是頗有用的，可是長期來看這遠遠不夠。前端

來源面試

來源數據庫

再次聲明文章是做者的胡思亂想，若有意見咱們能夠一塊兒討論，相互學習，相互成長。請輕一點噴😆瀏覽器

1. 創建性能優化體系

做爲前端工程師，你懂的，前端性能優化通常比較瑣碎、繁雜、麻煩，那怎麼把瑣碎、繁雜、麻煩的工做系統化呢？答案也就是你須要創建一套性能優化體系。固然這套優化體系是做者本人學習的性能優化體系，你也能夠有本身的性能優化體系，這體系對不一樣的人、不一樣的系統、不一樣的公司都會存在千差萬別。性能優化

2. 設定性能關鍵指標

進行性能優化，你就要肯定它的指標，而後才能根據指標去採起措施，不然就會像無頭蒼蠅同樣亂撞，沒有執行目標。
這裏列舉一些網絡上常見的關鍵指標，先聲明指標不是惟一的，他在不一樣的業務場景可能不同。段落中列舉的指標不是惟一也不是標準，只是爲了距離說明。微信

1. 視覺穩定性指標

咱們叫它 CLS（Cumulative Layout Shift），也就是佈局偏移量，它是指頁面從一幀切換到另一幀時，視線中不穩定元素的偏移狀況。關於CLS，這裏有一篇文章有興趣的同窗能夠看看。地址網絡

2. 白屏時間指標

什麼叫白屏時間呢？它指的是從輸入內容回車（包括刷新、跳轉等方式）後，到頁面開始出現第一個字符的時間。這個過程包括 DNS 查詢，創建 TCP 鏈接，發送首個HTTP請求（若是使用HTTPS還要介入 TLS 的驗證時間），返回HTML文檔，HTML文檔 Head 解析完畢。它的標準時間是 300ms。前端工程師

3. 首屏時間指標

首屏時間=白屏時間+渲染時間。它是指從瀏覽器輸入地址並回車後，到首屏內容渲染完畢的時間。這期間不須要滾動鼠標或者下拉頁面，不然無效。首屏時間咱們常常會聽到一個詞秒開，可是這個秒開也是有針對性的，如你在移動端秒開無可厚非，但若是你要求一個 PC 管理後臺作到秒開應該也沒有什麼必要。前端性能

4. 交互指標

交互方面，有的公司用 FID 指標（First Input Delay，首次輸入延遲），指標必須儘可能小於 100ms，若是過長會給人頁面卡頓的感受。還有的公司使用 PSI（Perceptual Speed Index，視覺變化率），衡量標準是小於20%。佈局

5. 相應時間指標

響應時間是衡量系統性能的重要指標之一，響應時間越短，性能越好，通常一個接口的響應時間是在毫秒級。

數據庫響應時間：數據庫操做所消耗的時間，每每是整個請求鏈中最耗時的；
服務端響應時間：服務端包括 Nginx 分發的請求所消耗的時間以及服務端程序執行所消耗的時間；
網絡響應時間：這是網絡傳輸時，網絡硬件須要對傳輸的請求進行解析等操做所消耗的時間；

3. 收益評估

收益評估以前我作性能優化的時候，自己沒有他在乎，可是經歷過面試官的毒打以後，我開始意識到這一點。若是僅僅判斷性能指標是否優化到位還好，但不少時候，爲了讓產品同窗感受咱們是爲產品服務，而不是又在造輪子，咱們還須要關聯產品目標進行收益評估。好比，列表頁到詳情頁的轉化率能不能提高？用戶跳出率可不可下降？優化能爲公司帶來多少收益？這一切都須要作評估。若是你費心費力作了半個月的優化，最後發現沒有任何的價值，不能帶來價值和收益，也不會獲得承認。也許你會說我本身獲得了技術提高，我本身很自豪，可是做爲過來人很想說一句，這是資本家的時代。

4. 性能立項

性能立項就是經過成立一個項目組，用項目化的運做方式來解決性能問題。整個立項流程包括團隊成員肯定、技術調研開展、項目目標制定、獲取業務側支持、項目名字選定，需求範圍和優先級肯定等過程。
不知道你有沒有發現，這個立項不是先定需求範圍和優先級，而後再製定項目目標和成立項目團隊。爲何呢？由於這個性能優化項目，是探索性的項目需求。探索性項目需求，有別於平常的業務項目。業務項目通常都有明確的項目目標和需求修改範圍。好比，提高首頁到列表頁的轉戶率。這個項目，需求文檔和 UI 圖會給出具體模塊修改點、樣式、內容等，前端開發完成後，產品和 UI 進行驗收便可。而探索性項目需求，目標不肯定，通常須要先選定項目團隊，作完技術調研，才能肯定出項目目標。由於探索性項目需求中的項目目標制定、獲取業務側支持、項目立項時機這三點和常規項目不太同樣。