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

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

Jerry 之前曾經寫過一篇關於 Chrome 開發者工具的文章：[Jerry和您聊聊Chrome開發者工具](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484306&idx=1&sn=314d749da91a94064ef1e258657a0974&chksm=ead5b105dda23813addbca28689e3fcc22c0b47cb2d4f49557ec796edfa8fe88c43d2c70567a&scene=21#wechat_redirect)，本文算是該文的後續。

![](https://img-blog.csdnimg.cn/img_convert/6499c26fdf6ea82ec9e4c827108e2723.png)
本來我是想用 Angular 應用為例來介紹工具的用法，但考慮到本公眾號一萬多讀者裡面，絕大多數前端開發朋友們，使用的還是 SAP UI5，因此最後還是選擇了基於 SAP UI5 應用來介紹使用 Chrome Dev Tools 進行 Web 應用效能分析的使用步驟。

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

![](https://img-blog.csdnimg.cn/img_convert/4c927f5be4bde1706635ca83bad8223d.png)

根據我以往的工作經驗，如果一個 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

![](https://img-blog.csdnimg.cn/img_convert/77b7f2e2dd185e38920dd272283b9b55.png)

這個 UI5 應用的檢視我採取 JavaScript 檢視型別實現，在檢視實現檔案 App.view.js 的 createContent 方法裡，我呼叫了一個函式 heavyFunction，該函式在一個 for 迴圈裡建立了一萬個 div 標籤，新增到 DOM 樹中，然後插入一億個元素到陣列中。

![](https://img-blog.csdnimg.cn/img_convert/36b41ce5f07e746fd9a50b4ad677e425.png)
我期望的結果是，能夠使用 Chrome 開發者工具，對該 SAP UI5 應用進行效能分析，透過工具的幫助，將效能問題快速定位到這個 heavyFunction 函式。

其實使用 Chrome 開發者工具的 Performance 皮膚對 Web 應用進行效能分析，使用方式和 SAP ABAP 資料庫效能分析工具 ST05 非常類似，即開啟跟蹤模式，在該模式下執行資料庫事務(Web 應用)，然後關閉跟蹤模式，然後分析 ST05 (Chrome 開發者工具) 輸出的跟蹤結果。

首先開啟一個 Chrome 隱身視窗，這是為了排除 Chrome 安裝的其他擴充套件對效能分析可能造成的影響。

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

然後點選 Record 圖示，開啟效能跟蹤模式：

![](https://img-blog.csdnimg.cn/img_convert/653798f5c1fa286c706ee7da8dce91a6.png)

重新整理應用，使其在效能跟蹤模式下執行：

![](https://img-blog.csdnimg.cn/img_convert/f625f0346f5b5e32561ebc12e6775403.png)

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

![](https://img-blog.csdnimg.cn/img_convert/364176af7084eb44e0c1a6645726f927.png)
大家請看下圖代表 CPU 執行活動的這根條狀圖，其中在兩個時間點之內，有大量密集的指令碼執行(scripting)和渲染(rendering)的活動記錄。

![](https://img-blog.csdnimg.cn/img_convert/333a037ba0d7699dea0036a8fabb8311.png)
我們首先詳細分析，為什麼會有如此密集的 scripting 操作。移動下圖所示的兩根滑動條，縮小我們排查問題的時間戳範圍(range).

![](https://img-blog.csdnimg.cn/img_convert/9d440c7a33fbd47b7253861f96ec06df.png)
時間戳範圍越小，顯示的明細越具體。大家注意到上圖我用紅色矩形框高亮的 Main 下拉框了嗎？該下拉框之下，顯示的就是在指定的左右時間戳範圍內，Main 即主執行緒執行的 CPU 活動明細。

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

![](https://img-blog.csdnimg.cn/img_convert/687c928e68d94a6eb994a76cdfb65606.png)

點選 App.view.js 的超連結，還能直接跳轉到對應的程式碼去：

![](https://img-blog.csdnimg.cn/img_convert/2abf0e391e1148361cb4a5a5cee368a4.png)

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

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

![](https://img-blog.csdnimg.cn/img_convert/3c78de9909129ed437e3c6b688ae328e.png)

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

![](https://img-blog.csdnimg.cn/img_convert/454b788f2ca9a19df851315f31a01f5c.png)

我們在程式碼編輯器裡編寫的 HTML 程式碼，在從伺服器端被載入到瀏覽器並被解析，到呈現在終端使用者眼前，需經歷上圖所示的幾個步驟：執行 HTML 頁面裡的 JavaScript 程式碼，構建 DOM 樹，將文字格式的 CSS，轉換成瀏覽器可以理解的資料結構，計算元素樣式，生成渲染樹，遍歷渲染樹，計算渲染樹中每一個節點的大小和位置，建立待繪製列表，最終進行繪製(Paint)和合成(Composite).

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

Forced reflow is a likely performance bottleneck.

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

![](https://img-blog.csdnimg.cn/img_convert/479dcbba407c2bdbaab9e1b9f813bd94.png)

為什麼檔案 ResizeHandler-dbg.js 的第 170 行會觸發瀏覽器迴流呢？我們直接單擊上圖的超連結，可以直接定位到第 170 行程式碼。

首先，在 Bar-dbg.js 的 onAfterRendering 鉤子函式(綠色)裡，會呼叫 _handleResize(黃色), 檢測當前是否應該丟擲 "resize" 事件。這個檢測最終被投遞交給 ResizeHandler.checkSizes(橙色)進行處理。

![](https://img-blog.csdnimg.cn/img_convert/dc305fa342b7c4cd73b962c1376c97a8.png)

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

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

按照這篇文件的記錄，下列屬性或方法被 JavaScript 呼叫時，會迫使瀏覽器以同步的方式重新計算樣式，觸釋出局操作即迴流。

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

![](https://img-blog.csdnimg.cn/img_convert/2bc3ccfb17efa37cff33d074187ec94d.png)

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

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

![](https://img-blog.csdnimg.cn/img_convert/00de0c898829b814a9cd948bbc68c055.png)

![](https://img-blog.csdnimg.cn/img_convert/cf45a8739da1e9103efc41d6e1b19791.png)

總結

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

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

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

感謝閱讀。

![](https://img-blog.csdnimg.cn/img_convert/7e24fae942ba38af26e67212f0cd8d1f.png)
**Jerry 的 SAP UI5 專題**

*   [在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492035&idx=1&sn=8373625310d71b4c8cc73612756a8168&chksm=ead65354dda1da4239a6442c577efee19b826d92b7372d4a551cd7af1957bd82fc002e34c2fe&scene=21#wechat_redirect)

*   [答網友提問：使用 SAP Fiori Tools 建立的 Fiori Elements 應用，如何進行二次開發？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492113&idx=1&sn=5d004d151e59ac262a15fdf79869934c&chksm=ead65086dda1d99092e784b7937cc23a6641f7692e0048d31412c427e8042fa071a9fe8f4691&scene=21#wechat_redirect)

*   [本地開發好的 SAP Fiori Elements 應用，如何部署到 ABAP 伺服器上](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492152&idx=1&sn=b4f365a645779e1c57064b747d64ea61&chksm=ead650afdda1d9b9761fef55001935a8bd12aeda621a78edeafa7ee4cc154121bf76d7ab42c1&scene=21#wechat_redirect)

*   [深入掌握 SAP Fiori Elements 工作原理的前提條件：理解 Smart Field](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492283&idx=1&sn=716ba26a34b3cb071ba58c74945ad9da&chksm=ead6502cdda1d93a7c4b2efc5144ed77dfd619edd045e3ca7dcdd0e74221b605ad54b06fe4b6&scene=21#wechat_redirect)

*   [深入理解 SAP Fiori Elements 工作原理系列之二：如何給 SAP Fiori Elements 應用新增自定義按鈕](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492320&idx=1&sn=8e294788e4002f1a1d2efd00d075eee0&chksm=ead65077dda1d961f69684f665d4ad0be1b442a2e316b633a05834c75d50f3198e7a6efdb781&scene=21#wechat_redirect)

*   [SAP Fiori Elements 框架裡 Smart Table 控制元件的工作原理介紹](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492348&idx=1&sn=f134e5418350197afcae1d4836de9be0&chksm=ead6506bdda1d97d5401bb675857409d4ea09897b86fdaa639fc72fd74116c4e7a2bbd1d7d0d&scene=21#wechat_redirect)

*   [SAP Fiori Elements List Report Smart Table 列專案寬度計算的奧妙](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492410&idx=1&sn=fb80aeae21e11046848a6d67951374ce&chksm=ead651addda1d8bbdd08ee6c24c60116b45511c752b0b09b2cf20226bb1e1b0eff7ac495ef28&scene=21#wechat_redirect)

*   [作為一名 ABAP 資深顧問，下一步可以選擇哪一門 SAP 技術作為主攻方向？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492596&idx=1&sn=fe2ee727f1bad79006dd6fd13e875a89&chksm=ead65163dda1d875118de8db11f7aa64706e0428bce3c0b387c27ee31a76e11119e24e42049a&scene=21#wechat_redirect)

*   [SAP UI5應用開發人員瞭解UI5框架程式碼的意義](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490638&idx=1&sn=2d48eeb6c0004950adaa97703e648796&chksm=ead5aed9dda227cf7b42b0f5f002a2517648f941695db22ddc09afa8725e1ca7960d69f4863e&scene=21#wechat_redirect)

*   [SAP UI5 module懶載入機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490700&idx=1&sn=5aa8829849e249b31cc390e644b0cc6b&chksm=ead5ae1bdda2270d5c99f2e6b0649f4ad3e4eafc00f43be88fa89cfce8de134d0db24db3d9e7&scene=21#wechat_redirect)

*   [SAP UI5 控制元件渲染機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490725&idx=1&sn=a99eaa85624d62fd9a8d5eb0fe382ace&chksm=ead5ae32dda2272447f691827b4a960dac4188adb9c82f8c29815531ba9a7939530153b00f17&scene=21#wechat_redirect)

*   [HTML原生事件 VS SAP UI5 Semantic事件](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490756&idx=1&sn=72ad4fbfc919bc53a136ac2871890e46&chksm=ead5ae53dda227453a4e9d92400a6c2e17957b3040db928102d42a86a7d295d023b938c2c1ec&scene=21#wechat_redirect)

*   [SAP UI5控制元件後設資料的後設資料實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491142&idx=1&sn=82b67f87d392f7e6a9c233f5a3f9b14b&chksm=ead5acd1dda225c7bec3b4c41e80c189a8b74359ececbff761bebacd2f8189633cac5f7a84a2&scene=21#wechat_redirect)

*   [SAP UI5控制元件的例項資料修改和讀取邏輯](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491167&idx=1&sn=5b69e73118bfee9f399d941bc4be026f&chksm=ead5acc8dda225de8e92d10c3909280dfcb7d754b985ba268c1ed5e836137709ef23ac140744&scene=21#wechat_redirect)

*   [SAP UI5控制元件資料繫結的實現原理](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491196&idx=1&sn=d5516ab572a9a292f40014361ddc1453&chksm=ead5acebdda225fd6cc100f2a5f9281d30aaeb238aa3801473c20614f093fb074c9c179337d5&scene=21#wechat_redirect)

*   [SAP UI5控制元件資料繫結的三種模式：One Way, Two Way和OneTime實現原理比較](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491221&idx=1&sn=abaecc29eec83383f38ef5d79e98fa79&chksm=ead5ac02dda22514745c0762ecbed0b56116d9c80595cb1f4bc5fb863629da60cd71edefdd54&scene=21#wechat_redirect)

*   [談談 SAP UI5 的檢視控制元件 ID，以及其和 Angular 檢視的異同](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492187&idx=1&sn=a8dbaa645c472b5c22771e512ed1b971&chksm=ead650ccdda1d9dab86ba16fb71ea5e90aa15918f3e3ac2c4237c9f5f03d51a12dac40280e70&scene=21#wechat_redirect)

*   [對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492258&idx=1&sn=7d3910109f2721dc316c0b8890091690&chksm=ead65035dda1d923924a5b186d4296a65d6efe2d08d8f4705abc52c42b349b2e95c255337f21&scene=21#wechat_redirect)

*   [SAP UI5 OData謠言粉碎機：極短時間內傳送兩個Odata request,前一個會自動被cancel掉嗎？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491291&idx=1&sn=237b0f4a83ffa8e047c7510d64a20dd6&chksm=ead5ac4cdda2255ae10700efd736c8f21d11bbf328149034a0d3df848667db2c6b13cf316fed&scene=21#wechat_redirect)

*   [SAP UI 搜尋分頁技術](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484840&idx=1&sn=3e6d5397faa6f69579992337e7125bac&chksm=ead5b73fdda23e29a594a833d6c68d1fc26ac8077c54997b4d2b666fd1815e1d05c227ca3fa7&scene=21#wechat_redirect)

*   [如何在 SAP UI5 應用中整合第三方庫 ：一個在移動裝置上檢視 Web 應用列印除錯資訊的小技巧](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492659&idx=1&sn=dd2b61252e04d2c22ed9eef6761a7fc3&chksm=ead656a4dda1dfb27ff0a6a61357455c29fa5ddf679686e482f28216637899a58c31803e1b87&scene=21#wechat_redirect)

*   [基於 OData 模型和 JSON 模型的 SAP UI5 表格控制元件行專案的新增和刪除實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493534&idx=1&sn=709f31930e7e535d094a40dc41183691&chksm=ead65509dda1dc1f87e0737788466fb87e88e97faa947d497890128ee79ecc5aa50e1a2843b4&scene=21#wechat_redirect)

*   [本地修改遠端 SAP UI5 框架檔案的一個小技巧](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493620&idx=1&sn=ad41d7ee4fdefe71df939d9d566d37ef&chksm=ead65563dda1dc7544789be7d88e917a50421066d3ecce2aa0a7f964821a02d9e846e4d20d4a&scene=21#wechat_redirect)

*   [一個詳盡的面向 SAP UI5 初學者的教程 - 如何在 SAP UI5 中繪製圖表 Chart](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493675&idx=1&sn=a42add888b38990958cde12897216255&chksm=ead65abcdda1d3aad7b2a7b2166e3f95b09a83f88d30aaf4e6830324e3e48eac86b09bf95166&scene=21#wechat_redirect)

使用工具分析 SAP UI5 應用前端執行的效能問題

相關文章