這是 Jerry 2021 年的第 66 篇文章，也是汪子熙公眾號總共第 343 篇原創文章。

國慶黃金周開始的前一天，9月30日，我所在的開發團隊收到了一個關于 Angular 應用的服務器端渲染(Server Side Render，簡稱為 SSR）的客戶 incident，讓我有機會學習如何使用 Chrome 開發者工具來分析 Web 應用的性能問題。

Jerry 之前曾經寫過一篇關于 Chrome 開發者工具的文章：Jerry和您聊聊Chrome開發者工具，本文算是該文的后續。

本來我是想用 Angular 應用為例來介紹工具的用法，但考慮到本公眾號一萬多讀者里面，絕大多數前端開發朋友們，使用的還是 SAP UI5，因此最后還是選擇了基于 SAP UI5 應用來介紹使用 Chrome Dev Tools 進行 Web 應用性能分析的使用步驟。

本文提及的 SAP UI5 應用，指通過 FreeStyle 方式開發的 SAP UI5 應用。通過 Fiori Elements 開發的 SAP UI5，不在本文討論之列。

根據我以往的工作經驗，如果一個 SAP UI5 應用出現了性能問題，很多時候性能瓶頸都出在該應用消費的后臺 API，比如 OData 服務或者其他 AJAX 調用。

同 Angular 相比，SAP UI5 框架為應用開發人員屏蔽了 Web 前端開發中的很多底層細節，比如 DOM 操作，CSS 的編輯，數據雙向綁定和事件注冊等邏輯，均使用 UI5 封裝之后的方式來完成。因此一個 SAP UI5 應用，純粹的前端代碼里，由于應用人員編碼失誤導致性能問題的概率相對 Angular 要低得多。

因此，為了演示 Chrome 開發者工具進行 SAP UI5 性能分析的使用方法，我在自己的 SAP UI5 腳手架應用里，故意編寫了一些會引起性能問題的前端代碼，然后通過 Chrome 開發者工具，把這些導致性能問題的代碼進行定位。

我這個 SAP UI5 腳手架應用可以通過如下 url 訪問：

https://wangzixi-diablo.github.io/ui5-toolset/webapp/index.html

這個 UI5 應用的視圖我采取 JavaScript 視圖類型實現，在視圖實現文件 App.view.js 的 createContent 方法里，我調用了一個函數 heavyFunction，該函數在一個 for 循環里創建了一萬個 div 標簽，添加到 DOM 樹中，然后插入一億個元素到數組中。

我期望的結果是，能夠使用 Chrome 開發者工具，對該 SAP UI5 應用進行性能分析，通過工具的幫助，將性能問題快速定位到這個 heavyFunction 函數。

其實使用 Chrome 開發者工具的 Performance 面板對 Web 應用進行性能分析，使用方式和 SAP ABAP 數據庫性能分析工具 ST05 非常類似，即開啟跟蹤模式，在該模式下運行數據庫事務(Web 應用)，然后關閉跟蹤模式，然后分析 ST05 (Chrome 開發者工具) 輸出的跟蹤結果。

首先打開一個 Chrome 隱身窗口，這是為了排除 Chrome 安裝的其他擴展對性能分析可能造成的影響。

打開 Chrome 開發者工具，選擇 Performance 標簽頁，打開設置選項，Network 選擇成 Slow 3G，CPU 選擇成六倍速降低：6x slowdown.

然后點擊 Record 圖標，開啟性能跟蹤模式：

刷新應用，使其在性能跟蹤模式下運行：

等待頁面顯示完畢后，點擊 Stop 按鈕，關閉跟蹤模式。
然后我們就能看到下圖所示的跟蹤結果：

大家請看下圖代表 CPU 執行活動的這根條狀圖，其中在兩個時間點之內，有大量密集的腳本執行(scripting)和渲染(rendering)的活動記錄。

我們首先詳細分析，為什么會有如此密集的 scripting 操作。移動下圖所示的兩根滑動條，縮小我們排查問題的時間戳范圍(range).

時間戳范圍越小，顯示的明細越具體。大家注意到上圖我用紅色矩形框高亮的 Main 下拉框了嗎？該下拉框之下，顯示的就是在指定的左右時間戳范圍內，Main 即主線程執行的 CPU 活動明細。

我們把 Main 下拉框顯示的內容拖至底部，一下子就發現了我們故意編寫的 heavyFunction 赫然在列，在我們指定的時間戳范圍內，總共花費了 6.799 秒的時間去執行。

點擊 App.view.js 的超鏈接，還能直接跳轉到對應的代碼去：

下面我們再調整左右時間戳滑動條，來研究 Rendering，即下圖紫色條代表的活動。我們觀察到，每一根紫色條，右上角都有一個紅色三角形圖標。鼠標放上去，tooltip 會顯示：Forced reflow is a likely performance bottleneck.

意思是，強制回流是應用一個可能的性能瓶頸。

上圖我們能觀察到 Recalculate Style 和 Layout 紫色條，分別是 Rendering 的兩種不同的操作類型。

我們在代碼編輯器里編寫的 HTML 代碼，在從服務器端被加載到瀏覽器并被解析，到呈現在最終用戶眼前，需經歷上圖所示的幾個步驟：執行 HTML 頁面里的 JavaScript 代碼，構建 DOM 樹，將文本格式的 CSS，轉換成瀏覽器可以理解的數據結構，計算元素樣式，生成渲染樹，遍歷渲染樹，計算渲染樹中每一個節點的大小和位置，創建待繪制列表，最終進行繪制(Paint)和合成(Composite).

而 Web 應用在使用過程中，由于用戶與頁面交互，導致 JavaScript 代碼執行，可能會使得頁面元素的大小及位置等屬性發生改變，從而觸發瀏覽器重新計算布局，最終重新渲染頁面。我們稱瀏覽器這種行為叫做回流(reflow)，即我們在上圖 Chrome 開發者工具里觀測到的警告信息：

Forced reflow is a likely performance bottleneck.

回到我們的例子，受到回流操作影響的元素總數為 10087，觸發回流操作的代碼：ResizeHandler-dbg.js.

為什么文件 ResizeHandler-dbg.js 的第 170 行會觸發瀏覽器回流呢？我們直接單擊上圖的超鏈接，可以直接定位到第 170 行代碼。

首先，在 Bar-dbg.js 的 onAfterRendering 鉤子函數(綠色)里，會調用 _handleResize(黃色), 檢測當前是否應該拋出 “resize” 事件。這個檢測最終被投遞交給 ResizeHandler.checkSizes(橙色)進行處理。

Resize 檢測邏輯也很簡單，比較 DOM 元素新舊 width 和 height 是否相同。若不相同，則如下圖紅色矩形框內代碼所示，觸發 resize 事件。

獲取 DOM 元素新的寬度的代碼正好位于 170 行，這行代碼訪問了元素屬性 offsetWidth.

按照這篇文檔的記錄，下列屬性或方法被 JavaScript 調用時，會迫使瀏覽器以同步的方式重新計算樣式，觸發布局操作即回流。

https://gist.github.com/paulirish/5d52fb081b3570c81e3a

瀏覽器這一機制本身沒有什么問題，但是如果某個時間點，有大量的頁面元素的上述屬性被訪問時，則很可能成為性能瓶頸。

回到本文的例子，因為我在 heavyFunction 函數里插入了一萬個 div 元素，在 resize 檢測時，這一萬個元素的 offsetWidth 屬性被訪問，造成了瀏覽器回流的不斷觸發，最終導致了大量的 CPU 時間被花費在了 rendering 之上。

總結

本文介紹的使用 Chrome 開發者工具來分析 Web 應用性能問題的步驟，只是該工具使用技巧的冰山一角。后續有機會，Jerry 會繼續把我在日常工作中學到的東西分享出來。

如果遇到 SAP UI5 應用出現性能問題，優先排查性能瓶頸是否由后臺 API 造成。對于 SAP UI5 應用的前端實現來說，因為 UI5 已經為應用開發人員做出了良好的封裝，因此絕大部分情形，應用開發人員無需手動操縱 DOM 元素和 CSS 樣式，所以也不大可能出現類似本文 heavyFunction 函數里模擬的極端情況。

無論如果，如果你懷疑你的 SAP UI5 應用的前端也可能有性能問題，此時無需胡亂猜測，用本文介紹的步驟一試便知分曉。

感謝閱讀。

Jerry 的 SAP UI5 專題

• 在沒有任何前端開發經驗的基礎上, 創建第一個 SAP Fiori Elements 應用

• 答網友提問：使用 SAP Fiori Tools 創建的 Fiori Elements 應用，如何進行二次開發？

• 本地開發好的 SAP Fiori Elements 應用，如何部署到 ABAP 服務器上

• 深入掌握 SAP Fiori Elements 工作原理的前提條件：理解 Smart Field

• 深入理解 SAP Fiori Elements 工作原理系列之二：如何給 SAP Fiori Elements 應用添加自定義按鈕

• SAP Fiori Elements 框架里 Smart Table 控件的工作原理介紹

• SAP Fiori Elements List Report Smart Table 列項目寬度計算的奧妙

• 作為一名 ABAP 資深顧問，下一步可以選擇哪一門 SAP 技術作為主攻方向？

• SAP UI5應用開發人員了解UI5框架代碼的意義

• SAP UI5 module懶加載機制

• SAP UI5 控件渲染機制

• HTML原生事件 VS SAP UI5 Semantic事件

• SAP UI5控件元數據的元數據實現

• SAP UI5控件的實例數據修改和讀取邏輯

• SAP UI5控件數據綁定的實現原理

• SAP UI5控件數據綁定的三種模式：One Way, Two Way和OneTime實現原理比較

• 談談 SAP UI5 的視圖控件 ID，以及其和 Angular 視圖的異同

• 對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？

• SAP UI5 OData謠言粉碎機：極短時間內發送兩個Odata request,前一個會自動被cancel掉嗎？

• SAP UI 搜索分頁技術

• 如何在 SAP UI5 應用中集成第三方庫 ：一個在移動設備上查看 Web 應用打印調試信息的小技巧

• 基于 OData 模型和 JSON 模型的 SAP UI5 表格控件行項目的添加和刪除實現

• 紀念特洛伊英雄 Sinon - SAP UI5 Mock Server 使用步驟和工作原理介紹

• 本地修改遠端 SAP UI5 框架文件的一個小技巧

• 一個詳盡的面向 SAP UI5 初學者的教程 - 如何在 SAP UI5 中繪制圖表 Chart

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的使用工具分析 SAP UI5 应用前端执行的性能问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。