不知道大家還記不記得之前的四篇 PWA 系列翻譯：

• 知乎專欄
• 知乎專欄
• 知乎專欄
• 知乎專欄

不過這畢竟是老外他們自己的實踐，而且相對來說是從科普角度來描述了 PWA 的實踐，對想要直接進行 PWA 優化的，可能會覺得比較囉嗦。

恰好我司最近使用 React 全家桶開發了一個網站：海綿保保，所以乾脆就拿它開刀，來進行 PWA 優化，順便記錄一下點滴。

作為切入的工具，Lighthouse 見：Lighthouse Chrome 外掛程式。

Lighthouse

首先我看了下 taobao 的評分，21/100，恩... 這樣一來，就有信心了，再怎麼我們肯定比它高不是？

測了一下，嗯... 果然還算看得過去，66分，至少及格了不是？

我們的目標就是能把它優化到90分以上！ （作為 PWA 模範的 http://mobile.twitter.com，就達到了90分）

作為系列第一篇，我們先來看看有哪些問題導致了網站評分不夠高，其產生原因和大概的解決策略。

App在離線/間斷網路下的載入

第一類就是 Service Worker 導致的問題：

簡單描述 Service Worker 的話，可以理解為一個本地的 server，在用戶端（瀏覽器）發起請求的時候，可以直接監聽到它並直接進行回應。

當然，它不僅僅是這麼一個攔截器，本身作為一個後台運行的任務，它還能進行預載入，離線回應（返回200），甚至進行 push 提示。

頁面載入性能

各種性能指標不夠過關啦。

漸進式增強

即 JavaScript 被禁用的時候，頁面仍然應該有內容，即便那只是提示使用者需要打開 JavaScript 以使用 app。

添加到主螢幕

manifest 其實我已經加上了，還是因為 service worker 沒有註冊，所以最後沒有生效。

避免影響用戶體驗的APIs

一些 css 標籤放在 header 裡，阻塞影響到了頁面體驗。

輔助功能

對比度啦，標籤啦，還有那麼幾個缺省了的。

性能指標

載入鏈太長。

奇妙的東西

總而言之就是一些新特性。

然而好像是外掛程式還是 sw-tools 導致的。

預告

本篇中我們大致看到了哪些問題導致了我們的webapp的 PWA 評分不夠高，下一次，我們會開始逐個開刀，解決這些問題。 對本話題感興趣的朋友，也可以使用 Lighthouse 外掛程式，對自家的網站或者其他網站來評評分，看看做得有多好（其實我們的66分真的已經挺高了）。

​

這裡用到了Chrome里開發者工具里的Audit面板，其實背後調用的是lighthouse

選擇后直接點Run audits按鈕，直接生成報告，下面是對知乎網站生成的分析報告

可以看到性能和PWA兩項得分很低

PWA裡都是紅叉，幾乎都沒做

剩下的我就不貼圖了，還是非常值得推薦的一款不用費心費力的工具。

Lighthouse 是一個開源的自動化工具，用於改進網路應用的品質。 開發者可以將其作為一個 Chrome 擴展程式運行，或從命令行運行。 Chrome 擴充程式提供了一個對使用者更友好的介面，方便讀取報告。 而命令行工具則允許開發者將 Lighthouse 整合到持續整合系統。

使用時，先提供一個需要審查的網址，它將針對此頁面運行一連串的測試，然後生成一個有關頁面性能的報告。

使用 Chrome 擴充程式

安裝：從 Chrome 應用商店安裝 延伸程式

運行：點擊 Generate report 按鈕以針對當前打開的頁面運行 Lighthouse 測試

使用命令行工具

安裝 Node，需要版本 5 或更高版本。

安裝 Lighthouse 作為一個全域節點模組。

npm install -g lighthouse

針對一個頁面運行 Lighthouse 審查。

lighthouse https://airhorner.com/

傳遞 --help 標誌以查看可用的輸入和輸出選項。

lighthouse --help

查看報告

Lighthouse 能夠生成一份 JSON 或 HTML 報告：

Github：

GoogleChrome/lighthouse

作者：Bolaji Ayodeji
翻譯：瘋狂的技術宅
原文：https://www. freecodecamp.org/news/introduction-to-chrome-lighthouse/
未經允許嚴禁轉載

Chrome Lighthouse 已經存在了一段時間了，但如果我要求你解釋一下它能做什麼，你能解釋清楚嗎？

我發現許多 Web 開發人員包括初學者，都沒有聽說過這個工具，而那些尚未嘗試過的人，一點也不酷 。

在本文中，我將向你介紹 Chrome Lighthouse 的作用以及如何使用它。

讓我們開始吧

根據維琪百科，lighthouse是一座塔樓、建築物或其他類型的結構，它用燈和鏡頭系統發出光線，作為海上或內陸水道船舶的導航設備。

好吧，讓我們把它變成一個技術術語;

Lighthouse 是一個塔樓，建築物或其他類型的結構，它在 Chrome 開發者工具的"審核"面板下的系統發出光線，並作為開發人員的指南

有道理嗎？

好吧，Lighthouse 是 Google 開發的一款工具，用於分析網路應用和網頁，收集現代性能指標並提供對開發人員最佳實踐的意見。

可以將 Lighthouse 看作是汽車中用來檢查和平衡汽車速度限制的車速表。

一般情況下 Lighthouse 與開發最佳實踐和性能指標一起使用。 它在 Web 應用上運行檢查，併為你提供有關錯誤的反饋、低於標準的實踐、更好的性能提示以及如何解決這些問題。

根據Google Developers Docs上的描述

Lighthouse 是一種開源的自動化工具，用於提高網頁品質。 你可以在任何網頁上運行它。 它能夠針對性能、可訪問性、漸進式 Web 應用等進行審核。
你可以在 Chrome DevTools 中從命令行運行 Lighthouse，也可以作為 Node.js 模組運行。 當你向 Lighthouse 提供了一個 URL 來進行審核時，它會針對該頁面運行一系列審核，然後生成一個關於該頁面執行情況的報告。 這份報告可以作為如何改進頁面的指標。 每次審核都會產生一份參考文檔，解釋了這些審核為什麼重要，以及如何解決等內容。

這幾乎都與 Lighthouse 有關，它會審核 Web 應用的 URL 並根據 Web 標準和開發人員最佳實踐生成一份報告，告訴你 Web 應用的糟糕程度。 報告的每個部分還附有文檔，說明你的應用哪些部分已經通過審核，為什麼你應該改進應用的某一部分以及如何去解決它。

以下是此部落格https://bolajiayodeji.com的lighthouse審核報告演示

左：我的部落格 右：Lighthouse 審核報告

很酷吧？

應該注意的是，在我的第一次審計中，並沒有得到這樣的好成績。 所以我用第一份報告來修復和改善自己程式的性能和品質。

這是 Lighthouse 目的：它識別和修復影響你網站性能、可訪問性和用戶體驗的常見問題。

現在，讓我們進入到有趣的部分，如何開始使用它！！

LightHouse 有三種工作流程

• Chrome 開發者工具
• 命令列 （Node.js）
• Chrome 擴充程式

我個人更喜歡在 Dev Tools 中使用 LightHouse。 使用擴展程式沒有意義，因為開發工具和擴展程式在同一個 Chrome 瀏覽器中工作，我們的偏好不同，你可以選擇最適合自己的方法。

Lighthouse 在添加到 Chrome DevTools 之前首先只能使用 Chrome 擴展程式。

在命令行上使用 lighthouse 也很酷，（對於極客來說 ）

讓我們開始吧!!!

[1] 在Chrome DevTools 中運行 Lighthouse

• 下載谷歌瀏覽器網頁瀏覽器這個處

注意：Lighthouse 只能在桌面上運行

• 轉到你要在Google Chrome中審核的URL。

你可以審核網路上的任何 URL。

• 打開 Chrome DevTools

(Mac)
(Windows, Linux, Chrome OS).

• 按兩下 Audits 面板

左側是將被審核的頁面，這是我的部落格 。 右側是 Chrome DevTools 的 Audits 面板，現在由 Lighthouse 提供支援

• 點擊 Run audits

DevTools 顯示審計類別清單。 確保將它們全部被選中。 如果你想個人化要審核的哪個部分，可以通過選中要審核的類別來設置。

• 60 至 90 秒後 —— 根據你的網速，Lighthouse 會在頁面上為你提供報告。

並非只有網速和預安裝的擴展可能會影響lighthouse審核。 為了獲得更好的體驗，請在 Icognito 模式下進行審核來避免所有的干擾

[2] 在命令行中運行lighthouse

• 下載谷歌 Chrome 瀏覽器
• 下載 Node.js，如果已安裝，請跳過此步驟！
• 安裝 Lighthouse

npm install -g lighthouse
# or use yarn:
yarn global add lighthouse

用 -g 選項將其安裝為全域模組。

• 運行審核

lighthouse <url>

例如：

lighthouse https://bolajiayodeji.com/

Lighthouse 預設生成 HTML 格式的報告檔。 你可以通過添加控制選項來控制輸出的格式。

報告能夠以 HTML 或 JSON 格式顯示。

輸出樣本：

lighthouse
# saves ./<HOST>_<DATE>.report.html

lighthouse --output json
# json output sent to stdout

lighthouse --output html --output-path ./report.html
# saves ./report.html# NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats
lighthouse --output json --output html --output-path ./myfile.json
# saves ./myfile.report.json and ./myfile.report.html

lighthouse --output json --output html
# saves ./<HOST>_<DATE>.report.json and ./<HOST>_<DATE>.report.html

lighthouse --output-path=~/mydir/foo.out --save-assets
# saves ~/mydir/foo.report.html# saves ~/mydir/foo-0.trace.json and ~/mydir/foo-0.devtoolslog.json

lighthouse --output-path=./report.json --output json
# saves ./report.json

通過運行 $ lighthouse --help 來查看為 CLI 選項

[3] 使用 Chrome 擴展程式運行 Lighthouse

正如我之前所說，DevTools工作流程是最好的，因為它除了與擴展工作流程相同之外，還有額外的好處：無需進行安裝。

To use this method you need to install the extension, but If you have your reasons, here is the guide; 要使用此方法，你需要安裝擴展程式，如果你有自己的理由的話。 這是按照指南：

• 下載谷歌 Chrome 瀏覽器
• 從 Chrome 網上應用程式安裝 Lighthouse Chrome 延伸程式。
• 導航到要審核的頁面
• 點擊 Lighthouse 圖示。

它應該在 Chrome 位址欄旁邊。 如果沒有，請打開Chrome的主功能表（右上角的三個點），然後在功能表頂部訪問它。 點擊後會展開 Lighthouse 功能表。

• 按兩下 Generate report。

Lighthouse 會針對打開的頁面運行審核，然後打開一個新選項卡，其中包含結果報告。

Bingo! 你做到了~

就這些，Lighthouse 是一個很好的工具，尤其適合初學者。

在審核 Progressive Web 應用時，它是一個非常有用的工具。

當我開始使用 Lighthouse 時，實際上學到了很多優化和性能標準。 相信你很快就能夠成為能夠構建具有出色性能、可訪問性和用戶體驗的Web應用專家。

Lighthouse 不是魔術，它是由人類創造的。 它是開源的，歡迎對其作出你的貢獻。 可以通過查看 github 上的 issue 追蹤器，找到可以修復的錯誤，或者創建和改進審核過程。 issue 跟蹤器也是討論審計指標，新審計想法或與 Lighthouse 相關的任何內容的好去處。

歡迎關注前端公眾號：前端先鋒，獲取前端工程化實用工具包。

Google優化提供了許多適用於SEO的工具，以下是谷歌的五大搜尋引擎優化工具。

1. Chrome燈塔

Lighthouse是網站優化評論工具的「精簡」版本。 它目前提供有關十個SEO指標的反饋。 該燈塔SEO工具也可以下載並安裝Chrome瀏覽器作為一個擴展 燈塔範圍有限，但它提供10個指標，事關對谷歌的快照。

Ten Metrics Chrome Lighthouse目前報導：

視口元標記

標題元素

元描述

HTTP狀態代碼

連結上的描述性文本

成功抓取和編製索引的頁面狀態

驗證Hreflang

驗證rel = canonical

驗證行動裝置的字型易讀性

檢查文件是否避免瀏覽器外掛程式進行查看

為什麼你應該使用燈塔SEO工具

將Chrome Lighthouse視為輕量級網站審核工具很容易。 我不會否認它，Lighthouse是一個輕量級的網站評論工具。 但是，它是一個重要的網站評論工具，因為它代表了Google對您應該關注的十個指標的看法。 如果Google認為這些指標很重要，那麼您也應該這樣做。

2. TestMySite

此網站審核工具提供兩個指標：

預計3G移動網路的載入時間

由於載入時間不佳導致訪客損失估計。

這是獲取網站速度健康快照的好工具。 這是一個很好的起點指標。

該工具還提供了一封完整的報告，其中包含有關加快特定網頁速度的建議。 但它也需要註冊一份時事通訊。

為什麼要使用TestMySite

您也可以使用Page Speed Insights獲取相同的訊息。 儘管如此，TestMySite工具是獲取網頁速度縮略圖概覽的絕佳方式。 如果您想要詳細瞭解需要修復的內容，請轉到Google的Page Speed Insights。

3. Page Speed Insights

此在線工具提供了一個分數，並提供了加快網頁速度的具體技巧。 它告訴您哪些腳本和樣式表正在減慢您的網站速度，哪些圖像太大，並提供了許多其他提示來加快您的網頁速度。

為什麼你應該使用頁面速度見解

Page Speed Insights不僅為影響頁面速度的隱藏技術問題提供了有用的解決方案。 它也是了解這些問題的資源。 每個突出顯示的問題都連結到提供深入訊息的Google Developers頁面。

4. 安全瀏覽測試

此工具可測試網站上是否存在任何惡意軟體。 然而...... 這個工具的一個有趣之處在於它還揭示了網站測試的最後日期。 我不知道網站測試頻率的標準是什麼。 有些網站seo的測試頻率高於其他網站。

據推測，最後的測試日期基於一些重要性度量。 我懷疑它可能與網站更新的頻率有關，這反過來可能會影響網站的抓取頻率。

為什麼要使用安全瀏覽測試工具

如果您的網站最近沒有更新，並且日期對應於上次更新網站，我不擔心。 但該工具確實提供了有關其是否託管惡意軟體的有價值訊息，並可能指示網站更新和爬網的頻率。

5. 谷歌趨勢

Google趨勢提供有關關鍵字受歡迎程度的訊息，並按時間和地理位置對訊息進行細分。

時間段可以讓您了解季節如何影響關鍵詞優化排名。 它還可以顯示關鍵字是否正在失去人氣。 如果您在關鍵字中看到下降趨勢，則可能表明產品或趨勢導致搜索者失去對該搜索的興趣。

為什麼你應該使用谷歌趨勢

Google趨勢對於競爭性研究也很重要。 它向您顯示人們使用競爭對手的品牌名稱搜索Google的頻率。 趨勢線將逐步顯示出這種趨勢是穩定的，如果它上升，下降或穩定。

顯然，趨勢向下的競爭趨勢線是好的。 趨勢線趨於上升是不好的。 趨勢線是穩定的（最常見的）意味著競爭對手表現良好，您必須確定自己的弱點並將其作為您的優勢 - 在眾多考慮因素中。

Lighthouse 是Google開源的一個自動化工具，用於改進網路應用的品質，適用於網頁版和移動端，比如找出哪些資源適合延遲載入，以及可以在初始頁面載入中節省多少流量。 能生成一個包括頁面性能、PWA（Progressive web apps，漸進式 Web 應用）、可訪問性（無障礙）、最佳實踐、SEO的報告清單提供參考，看看可以採取哪些措施來改進您的應用。

如何使用

運行 Lighthouse 的方式有四種：

1. 作為 Chrome 擴展程式運行，擴展程式提供了一個對使用者更友好的介面，方便讀取報告，要去應用商店安裝。
2. 作為命令行工具運行，命令行工具允許您將 Lighthouse 集成到持續集成系統，需要有Node環境。
3. 使用Node Module，通過Node Module以程式設計方式使用Lighthouse。
4. 在瀏覽器的開發者工具裡運行，這個最簡單，Chrome瀏覽器都會自帶開發者工具，不需要額外安裝，和擴展程式一樣提供了友好的介面。 需要Google Chrome 52 或更高版本。

在開者發工具中運行

由於我的瀏覽器版本比較搞，自帶了Lighthouse，所以就不在另外安裝擴展程式了，如果要安裝擴展程式，可以存取程式安裝位址。

在chrome瀏覽器中打開你需要測試的網站，然後打開DevTools介面，選擇Audist面板就可以看到介面了。

介面說明

Device： 可以在移動端和桌面端之間切換代理。

Audists：需要測試並生成的報告種類，包括頁面性能、PWA（Progressive web apps，漸進式 Web 應用）、可訪問性、最佳實踐、SEO的報告。

Throttling：此項可以類比在行動裝置上瀏覽的條件。 比如限制類比4G速度，事實上這並不會在審查期間進行限制，只是類比計算出在限速條件下的性能指標值，它將有助於計算在相應的移動端條件下載入頁面所需的時間。

運行結果

點擊 Run aduits 即可開始測試，測試結果如下：

測試結束后，會生成如上圖的結果報告，包括了勾選的5 大類別的測試評分，針對每個類別會給出特定的優化建議與診斷結果幫助開發者有針對性地進行優化。

在命令行上運行

通過Node CLI 運行可以指定明確的參數訊息，可以同時輸出多個格式的報告文件（預設是HTML），有比較大的靈活性。

npminstall-glighthouse#oruseyarn:#yarnglobaladdlighthouse

用上面的命令進行安裝，安裝完成後通過以下命令運行（參數只生成性能和最佳實踐）：

lighthouse--only-categories=performance,best-practiceshttp://suibo.co/

運行時會打開瀏覽器，測試完成後會自動關閉。 在命令行的最下方，會有報告輸出的位址，內容跟上圖的報告截圖一致。 更多參數可以參考 github文件

使用Node Module運行

使用Node Module可以以程式設計方式使用Lighthouse，喜歡折騰的可以參考官方例子，其實測試的話用上面的方法也夠了，這裡就不說明瞭。

總結

文章簡單的介紹了下 Lighthouse，也是因為自己網站需要用到，所以在這裡做了個記錄分享給大家，還沒有試過的朋友可以看下，歡迎大家進行交流。

全文共1596字，預計學習時長7分鐘

工欲善其事，必先利其器。 優秀的工具對於開發人員來講必不可少，它們能助你打通任督二脈，工作效率大大提升。 每個人都有自己用慣了的工具，本文將介紹6種我認為必備的工具，你不妨試試看。

direnv

direnv是一個shell擴展，當你用cd命令進入對應目錄時，它會自動載入環境變數。

它超級省時，尤其是在處理多種專案時，這些專案都需要不同的ENV變數，甚至是相同ENV變數的不同值。 direnv安裝簡單，甚至更容易編寫.envrc文件，因為它只是一堆已經在.profile或. *rc文件中編寫的export BLAH=BLAH語句。

當把.envrc檔退出目錄之外時，direnv會自動取消設置這些ENV變數。 是不是很方便！

Lighthouse/ Chrome開發者工具

Lighthouse（內置Chrome功能）是一個開源外掛程式，用於檢查網站性能。

從文本壓縮到渲染阻塞資源，此工具掃描特定網站並生成一項報告以找出導致頁面速度下降的原因。 這對網站性能和可訪問性都非常重要。

許多開發人員開始進行Web開發，主要學習組合美觀的網站。 然而性能原則經常被忽視了，其實性能與審美同樣重要。

有些網站規模太大，負載了過多資源，以致於緩慢的網速無法支撐運行，或者網頁流覽損耗行動裝置的電池。 不妨使用Lighthous，加速和優化您的網站。

注意：此工具也可以通過Chrome web工具在本地託管的web伺服器上運行。 Cmd+Alt+I→審核選項→生成報告。

Oh My Zsh

Oh My Zsh 是基於Z shell的美化配置，讓您的終端強大而美觀。

除了各種主題，便捷功能和內置預設值之外，您還可以使用各種擴展功能外掛程式，包括Docker，Kubernetes Kubectl和tmux等。

我最喜歡的功能是tab命令補全和tab命令迴圈。 只要反覆按Tab鍵，便可以快速遍曆目錄和檔。

內核配置語句有多麼神奇？ 在需要説明的任何時候，它都會為我提供方案：

[TIMESTAMP] USER:CURRENT_DIRECTORYVCS:(BRANCH) $

此Oh My Zsh主題便是geoffgarside，而我在iTerm2中的配色方案是Tango Dark（探戈黑）。 在此處查看更多iTerm配色方案（https://iterm2colorschemes.com/）。

vim-plug 和 MELPA Stable

如果您是一個忠實的Vim或Emacs使用者，就會知道有很多超有用的外掛程式支援這兩大文本編輯器，可以化繁為簡。

從語法高亮顯示到符號索引，這些外掛程式可以帶來些許便利，抑或讓您的文本編輯器變成自金屬音樂以來最新奇的事情。 例如，查看Emacs Live的Clojure功能。

vim-plug和MELPA Stable分別是Vim和Emacs的外掛程式管理器。 使用這兩大神器來安裝所需的所有外掛程式，為您提供完美的內置體驗。

The Silver Searcher (Ag)

大體上說，The Silver Searcher （簡稱Ag）是一個智慧迴圈的grep遞歸搜索。 雖然之前介紹的fzf適合搜索檔名，而Ag則很適合搜索文件內容以查找特定標記和匹配項。

Ag搜尋的優勢在於它會自動忽略.gitignore資料夾中的檔。 當grep-r在node_modules中拋出一堆不相關的匹配項時，Ag搜索會非常迅速，因為它只搜索重要的相關文件。

默認情況下，Ag輸出結果還會為您提供行號。 從技術上講，您可以通過向grep提供大量參數來實現Ag搜索的所有功能，但Ag搜索的速度最終仍快幾倍，並且會越來越快。

command-line fuzzy finder (fzf)

命令行模糊查找器（簡稱fzf）是一種模糊搜索工具，用於快速查找目錄樹中的檔。 順便說一句，它是由製作vim-plug的工程師（Junegunn Choi）編寫的。

這個工具由Go語言編寫，運行迅速。 並且使用併發線程來劃分和解決工作負載。

為了更好地使用fzf，我在shell配置檔中設置了以下兩個別名：

aliasv='nvim'
alias f='v fzf -i'

我可以只鍵入字母v，然後輸入檔名以在Neovim中打開它。 將其與fzf結合使用以快速搜索特定檔。 fzf的輸出是帶有完整路徑的檔名。 然後，將其作為參數傳遞給我的v別名。

結果如何？ 在Neovim中打開了Wicked快速檔搜索和Wicked快速檔。 生活真是美妙。

好的工具甚至能提升幸福感。 去試試這幾種工具吧，相信你很快就會有這樣的感覺！

留言點讚關注

我們一起分享AI學習與發展的乾貨

編譯組：吳亞芳、李韻帷

相關連結：https://medium.com/better-programming/6-must-have-tools-for-developers-430fd56933dd

如轉載，請私信小芯，遵守轉載規範

欲善其事必先利其器，想要做好谷歌 SEO，提高網站排名增加流量，做好搜尋引擎優化，必須學會利用SEO工具。 以下5個頂尖谷歌SEO工具值得關注：

一、Chrome Lighthouse Lighthouse 是Chrome團隊的一個開源專案，能對網站的性能進行測評，同時還能生成一份詳盡的報告。 開發者可以將其作為一個 Chrome 擴展程式運行。 Lighthouse從以下10個指標入手，進行測評： 1、Viewport Meta 標籤 2、Title Element 3、Meta Description 4、HTTP 狀態碼 5、Descriptive Text on Links 6、Page Status for Successful Crawling & Indexing（搜索引擎的抓取和索引旅程） 7、Validates Hreflang 8、Validates rel=canonical（Validates 驗證外掛程式） 9、Validates font legibility for mobile devices（移動設備字體可讀性） 10、Checks if document avoids browser plugins for viewing（檔能否免外掛程式查看）

二、TestMySite TestMySite主要審查3G移動網路下網頁的載入時間，監測網頁載入過程中遊客的流失情況，TestMySite會根據監控結果，向使用者提供完整的報告，包括如何提高特定網站的載入速度等，讓使用者快速了解網站的載入速度情況。

三、Page Speed Insights Page Speed Insights會對網站進行評分，讓用戶瞭解哪些圖片、腳本或樣式表正在降低網站的載入速度，並給出具體的優化建議。 相對TestMySite，Page Speed Insights會給出更多的細節訊息。 針對用戶網站可能存在的各類問題，Page Speed Insights會提供相應的連結，連接到Google Developers頁面，幫助使用者深度瞭解相關訊息。

四、Safe Browsing Test Safe Browsing Test能夠檢測網站是否被插入了惡意軟體，檢測的頻率主要與網站更新頻率有關。

五、谷歌趨勢（Google Trends） 谷歌趨勢為使用者提供關鍵詞熱度訊息，並根據關鍵詞的流行時間、地理方位進行細分，説明使用者了解時間對關鍵詞的影響，以及目前最熱的關鍵詞。 谷歌趨勢有利於使用者對競爭對手進行研究，了解競爭品牌的搜索量等。

最近依然在研究大型專案，而大型專案最容易遇到的問題便是性能問題。 一般來說，當我們遇到性能瓶頸的時候，才會開始去進行相應的分析。 分析的方向除了業務本身的特點相關之外，常見的我們還可以藉助一些工具來發現問題。 本文一起來研究下，前端性能分析可以怎麼走~

# 前端性能分析工具（Chrome DevTools）

一般來說，前端的性能分析通常可以從時間和空間兩個角度來進行：

• 時間：常見耗時，如頁面載入耗時、渲染耗時、網路耗時、腳本執行耗時等
• 空間：資源佔用，包括CPU佔用、記憶體佔用、本地緩存佔用等

那麼，下面來看看有哪些常見的工具可以借來用用。 由於我們的網頁基本上跑在瀏覽器中，所以基本上大多數的工具都來源於瀏覽器自身提供，首當其衝的當然是 Chrome DevTools。 本文我們也主要圍繞 Chrome DevTools 來進行說明。

## Lighthouse

Lighthouse 的前身是 Chrome DevTools 面板中的 Audits。 在 Chrome 60 之前的版本中， 這個面板只包含網路使用率和頁面性能兩個測量類別，從 Chrome 60 版本開始， Audits 面板已經被 Lighthouse 的整合版取代。 而在最新版本的 Chrome 中，則需要單獨安裝 Lighthouse 拓展程式來使用，也可以通過腳本來使用。

### 架構

下面是 Lighthouse 的組成部分：

• 驅動（Driver）：和 Chrome Debugging Protocol 進行互動的介面
• 收集器（Gatherers）：使用驅動程式收集頁面的訊息，收集器的輸出結果被稱為 Artifact
• 審查器（Audits）：將 Artifact 作為輸入，審查器會對其運行測試，然後分配通過/失敗/得分的結果
• 報告（Report）：將審查的結果分組到面向用戶的報告中（如最佳實踐），對該部分應用加權和總體然後得出評分

### 主要功能

Lighthouse 會在一系列的測試下運行網頁，比如不同尺寸的設備和不同的網路速度。 它還會檢查頁面對輔助功能指南的一致性，例如顏色對比度和ARIA最佳實踐。

在比較短的時間內，Lighthouse 可以給出這樣一份報告（可將報告生成為 JSON 或 HTML）：

這份報告從 5 個方面來分析頁面： 效能、輔助功能、最佳實務、搜尋引擎最佳化和 PWA。 像性能方面，會給出一些常見的耗時統計。 除此以外，還會給到一些詳細的優化方向。

如果你希望短時間內對你的網站進行較全面的評估，可以使用 Lighthouse 來跑一下分數，確定大致的優化方向。

## Performance 面板

Performance 面板同樣有個前身，叫 Timeline。 該面板用於記錄和分析運行時性能，運行時性能是頁面運行時（而不是載入）的性能。

### 使用步驟

Performance 面板功能特別多，具體的分析也可以單獨講一篇了。 這裡我們簡單說一下使用的步驟：

1. 在隱身模式下打開 Chrome。 隱身模式可確保 Chrome 以乾淨狀態運行，例如瀏覽器的擴展可能會在性能評估中產生影響。
2. 在 DevTools 中，按兩下「Performance」選項卡，並進行一些基礎配置（更多參考官方說明）。
3. 按照提示按下記錄，開始記錄。 進行完相應的操作之後，點擊停止。
4. 當頁面運行時，DevTools 捕獲性能指標。 停止記錄后，DevTools 處理數據，然後在 Performance 面板上顯示結果。

### 主要功能

關於 Performance 怎麼使用的文章特別多，大家網上隨便搜一下就能搜到。 一般來說，主要使用以下功能：

• 查看 FPS 圖表：當在 FPS 上方看到紅色條形時，表示幀速率下降得太低，以至於可能損害用戶體驗。 通常，綠色條越高，FPS 越高
• 查看 CPU 圖表：CPU 圖表在 FPS 圖表下方。 CPU 圖表的顏色對應於性能板的底部的 Summary 選項卡
• 查看 火焰圖：火焰圖直觀地表示出了內部的CPU分析，橫軸是時間，縱軸是調用指標，調用棧最頂端的函數在最下方。 啟用 JS 分析器後，火焰圖會顯示數據的每個 JavaScript 函數，可用於分析具體函數
• 查看 Buttom-up：此檢視可以看到某些函數對性能影響最大，並能夠檢查這些函數的調用路徑

具體要怎麼定位某些性能瓶頸，可以參考官方文檔系列文章，這裡就不詳細介紹啦。

## Performance Monitor

打開 Chrome 控制台後，按組合鍵 ctrl + p （Mac 快速鍵為 command + p ），輸入 > Show Performance Monitor ，就可以打開 Performance Monitor 性能監視器。 主要的監控指標包括：

• CPU usage：CPU 佔用率
• JS head size：JS 記憶體使用大小
• DOM Nodes：記憶體中掛載的 DOM 節點個數
• JS event listeners：事件監聽數
• ... ：其他等等

大多數情況下，我們在進行性能優化的時候，使用上面一些工具也足以確定大致的優化方向。 更多的細節和案例，就不在這裡詳述了。

# 前端性能監控

除了具體的性能分析和定位，我們也經常需要對業務進行性能監控。 前端性能監控包括兩種方式：合成監控（Synthetic Monitoring，SYN）、真實用戶監控（Real User Monitoring，RUM）。

## 合成監控

合成監控就是在一個模擬場景里，去提交一個需要做性能審計的頁面，通過一系列的工具、規則去運行你的頁面，提取一些性能指標，得出一個審計報告。 例如上面介紹的 Lighthouse 就是合成監控。

合成監控的使用場景不多，一般可能出現在開發和測試的過程中，例如結合流水線跑性能報告、定位性能問題時本地跑的一些簡單任務分析等。 該方式的優點顯而易見：

• 可採集更豐富的數據指標，例如結合 Chrome Debugging Protocol 獲取到的數據
• 較成熟的解決方案和工具，實現成本低
• 不影響真實使用者的性能體驗

## 真實用戶監控

真實用戶監控，就是使用者在我們的頁面上訪問，訪問之後就會產生各種各樣的性能指標。 我們在使用者訪問結束的時候，把這些性能指標上傳到我們的日誌伺服器上，進行數據的提取清洗加工，最後在我們的監控平臺上進行展示的一個過程。

我們提及前端監控的時候，大多數都包括了真實用戶監控。 常見的一些性能監控包括載入耗時、DOM 渲染耗時、介面耗時統計等，而對於頁面載入過程，可以看到它被定義成了很多個階段：

而我們要做的，則是在力所能及的地方進行打點、計算、採集、上報，該過程常常需要藉助 Performance Timeline API。 將需要的數據發送到服務端，然後再對這些數據進行處理，最終通過可視化等方式進行監控。 因此，真實用戶監控往往需要結合業務本身的前後端架構設計來建設，其優點也比較容易理解：

• 完全還原真實場景，減去類比成本
• 數據樣本足夠抹平個體的差異
• 採集數據可用於更多場景的分析和優化

對比合成監控，真實用戶監控在有些場景下無法拿到更多的性能分析數據（例如具體哪裡 CPU 佔用、記憶體佔用高），因此更多情況下作為優化效果來參考。 這些情況下，具體的分析和定位可能還是得依賴合成監控。

但真實用戶監控也有自身的優勢，例如 TCP、DNS 連接耗時過高，在各種環境下的一些運行耗時問題，合成監控是很難發現的。

# 性能分析自動化

我們在開發過程中，也常常需要進行性能分析。 而前端的性能分析上手成本也不低，除了基本的頁面載入耗時、網路耗時，更具體的定位往往需要結合前面介紹的 Performance 面板、FPS、CPU、火焰圖等一點點來分析。

如果這一塊想要往自動化方向發展，我們可以怎麼做呢？

## 使用 Lighthouse

前面也有介紹 Lighthouse，它提供了腳本的方式使用。 因此，我們可以通過自動化任務跑腳本的方式，使用 Lighthouse 跑分析報告，通過對比以往的數據來進行功能變更、性能優化等場景的性能回歸。

使用 Lighthouse 的優勢在於開發成本低，只需要按照官方提供的配置來調整、獲取自己需要的一些數據，就可以快速接入較全面的 Lighthouse 擁有的性能分析能力。

不過由於 Lighthouse 同樣基於 HubSpot（Chrome DevTools Protocol），因此除了實現成本降低了，HubSpot 缺失的一些能力它也一樣會缺失。

## Chrome DevTools Protocol

Chrome DevTools Protocol 允許第三方對基於 Chrome 的 Web 應用程式進行檢測、檢查、調試、分析等。 有了這個協議，我們就可以自己開發工具獲取 Chrome 的數據了。

### 認識 Chrome DevTools 協定

Chrome DevTools 協定基於 WebSocket，利用 WebSocket 建立連接 DevTools 和瀏覽器內核的快速數據通道。

我們使用的 Chrome DevTools 其實也是一個 Web 應用。 我們使用DevTools的時候，瀏覽器內核Chromium本身會作為一個服務端，我們看到的瀏覽器調試工具介面，通過Websocket和Chromium進行通信。 建立過程如下：

1. DevTools 將作為 Web 應用程式，Chromium 作為服務端提供連接。
2. 通過 HTTP 提取 HTML、JavaScript 和 CSS 檔。
3. 資源載入後，DevTools 會建立與瀏覽器的 Websocket 連接，並開始交換 JSON 消息。

同樣的，當我們通過 DevTools 從 Windows、Mac 或 Linux 計算機遠端調試 Android 設備上的即時內容時，使用的也是該協定。 當 Chromium 以一個 --remote-debugging-port=0 標誌啟動時，它將啟動 Chrome DevTools 協定伺服器。

### Chrome DevTools 協定域劃分

Chrome DevTools協定具有與瀏覽器的許多不同部分（例如頁面、Service Worker 和擴充程式）進行互動的 API。 該協定把不同的操作劃分為了不同的域（domain），每個域負責不同的功能模組。 比如 DOM 、 、 、 和 Debugger Network Console Performance 等，可以理解為 DevTools 中的不同功能模組。

使用該協定我們可以：

• 獲取 JS 的 Runtime 數據，常用的如 window.performance 和 window.chrome.loadTimes() 等
• 獲取 Network 及 Performance 數據，進行自動性能分析
• 使用 Puppeteer 的 HubSpotSession，與瀏覽器的協定通信會變得更加簡單

### 與性能相關的域

本文講性能分析相關，因此這裡我們只關注和性能相關的域。

1. Performance。 從 Performance 域中 Performance.getMetrics() 可以拿到取得執行時效能指標包括：

• Timestamp： 採取度量樣本的時間戳
• Documents： 頁面中的文件數
• Frames： 頁面中的幀數
• JSEventListeners： 頁面中的事件數
• Nodes： 頁面中的 DOM 節點數
• LayoutCount： 全部或部分頁面佈局的總數
• RecalcStyleCount： 頁面樣式重新計算的總數
• LayoutDuration： 所有頁面佈局的合併持續時間
• RecalcStyleDuration： 所有頁面樣式重新計算的總持續時間
• ScriptDuration： JavaScript 執行的持續時間
• TaskDuration： 瀏覽器執行的所有任務的合併持續時間
• JSHeapUsedSize： 使用的 JavaScript 棧大小
• JSHeapTotalSize： JavaScript 棧總大小

2. Tracing。 Tracing 域可獲取頁面載入的DevTools性能跟蹤。 可以使用 Tracing.start 和 Tracing.stop 創建可在 Chrome DevTools 或時間軸查看器中打開的跟蹤檔。

我們能看到生成的 JSON 檔長這樣：

這樣的 JSON 文件，我們可以丟到 DevTools Timeline Viewer 中，可以看到對應的時間軸和火焰圖：

3. Runtime。 Runtime 域通過遠程評估和鏡像物件暴露 JavaScript 的運行時。 可以通過 Runtime.getHeapUsage 獲取 JavaScript 棧的使用方式，通過 Runtime.evaluate 計算全域對象的表達式，通過 Runtime.queryObjects 反覆運算 JavaScript 棧並查找具有給定原型的所有物件（可用於計算原型鏈中某處具有相同原型的所有物件，衡量 JavaScript 記憶體洩漏）。

除了上面介紹的這些，還有 Network 可以分析網路相關的性能，以及其他可能涉及 DOM 節點、JS 執行等各種各樣的數據分析，更多的可能需要大家自己去研究了。

### 自動化性能分析

通過使用 Chrome DevTools 協定，我們可以獲取 DevTools 提供的很多數據，包括網路數據、性能數據、運行時數據。

對於如何使用該協議，其實已經有很多大神針對這個協定封裝出不同語言的庫，包括 Node.js、Python、Java等，可以根據需要在 awesome-chrome-devtools 這個專案中找到。

至於我們到底能拿到怎樣的數據，可以做到怎樣的自動化程度，就不在本文里講述啦，後面有機會再開篇文章詳細講講。

# 參考

• 你一定要知道的 Chrome DevTool 新功能
• 前端性能分析利器-Chrome性能分析&性能監視器
• 螞蟻金服如何把前端性能監控做到極致？
• chrome devtools protocol——Web性能自動化實踐介紹
• Chrome DevTools Protocol
• Web Performance Recipes With Puppeteer

# 結束語

前端性能分析相關的文章不算多，而由於性能分析本身的場景就跟業務特性結合比較緊密，可以用來借鑒的內容、較統一的解決方案也不多。 而性能的監控、自動化等方向的介紹比較少，也希望這篇文章能給到你們一些方向吧~

檢視Github有更多內容噢： https://github.com/godbasin

你也可以來我的前端遊樂場看看： http://www. godbasin.com/