在過去的一個月里颂碘，我研究了關(guān)于Sauce Labs的一個很酷的新功能异赫，該功能有助于前端應(yīng)用的性能。

以下將是我最近的研究,在我們談?wù)撔阅軠y試時凭涂，大多數(shù)人都會想到壓力和負載測試祝辣，這涉及到測量后端系統(tǒng)的響應(yīng)。

現(xiàn)在已經(jīng)有很多很棒的工具可以用來加載測試應(yīng)用程序切油，但是Sauce的解決方案是專門為前端性能測試設(shè)計的蝙斜。

為什么需要這個？

現(xiàn)在許多現(xiàn)代應(yīng)用程序都使用JavaScript框架澎胡，如React和AngularJS這樣的前端庫孕荠。這些功能豐富的前端庫添需要增加一層對應(yīng)的度量標準幫助我們監(jiān)控性能。

因此，在本地機器上度量正在測試的應(yīng)用程序的呈現(xiàn)時間變得至關(guān)重要。

您可以獲得什么樣的性能數(shù)據(jù)柳譬？

Sauce能夠訪問與Chrome瀏覽器其他并行連接倒戏。?他們通過控制chrome driver和Chrome本身之間的通信來實現(xiàn)這一點晰洒。

這使得他們可以開始跟蹤瀏覽器，并從Chrome中獲取瀏覽器引擎中發(fā)生的任何事情的所有信息。

然后，他們使用谷歌提供的工具垦搬，如Lighthouse，來解析這些所有的數(shù)據(jù)艳汽。

因為跟蹤日志數(shù)據(jù)可能有大量的有效負載(有時高達10兆字節(jié))猴贰，而不使用諸如Sauce之類的東西，您可能無法使用它們河狐。

Sauce將掃描日志米绕，以便您輕松讀取所需性能指標。

你可以用sauce性能測量什么馋艺？

新的Sauce性能功能幾乎可以捕獲所有JavaScripts呈現(xiàn)指標栅干，包括：

Performance Score - 提供性能指標的加權(quán)平均值，有助于跟蹤團隊進度捐祠。

Page Load Time - 顯示頁面何時完全加載（或瀏覽器正式觸發(fā)onload事件時）碱鳞。

Speed Index - Google定義的頁面的視覺完整性。

Estimated Input Latency - 輸入響應(yīng)性是用戶如何感知應(yīng)用程序性能的關(guān)鍵因素雏赦。

Time to First Byte -? ?從服務(wù)器劫笙、相關(guān)應(yīng)用程序緩存或本地資源接收響應(yīng)的第一個字節(jié)之前所花費的時間。

Time to First Paint - 這是第一次在場景中繪制像素點的時間星岗。這個指標不包括默認的背景色填大，但包括任何用戶定義的背景色。

Time to First Contentful Paint - 當繪制任何內(nèi)容（文檔對象模型中定義的對象）時俏橘，將觸發(fā)第一個內(nèi)容繪制允华。?這可以是文本，圖像或畫布渲染寥掐。

Time to First Meaningful Paint - 第一個有意義的繪畫是瀏覽器提供的指標靴寂，用于衡量在網(wǎng)站上完全呈現(xiàn)最有意義的內(nèi)容所需的時間。?它相當于第一個內(nèi)容繪畫召耘，并描述了瀏覽器首次渲染任何文本百炬，圖像（包括背景圖像），非白色畫布或SVG之前的持續(xù)時間污它。?這包括具有掛起的Web字體的文本剖踊。?這是用戶可以開始使用頁面內(nèi)容的第一個時刻。

Time to Interactive - 從導(dǎo)航開始到布局穩(wěn)定衫贬，Web字體可見德澈，頁面響應(yīng)用戶輸入的秒數(shù)。?如果沒有任務(wù)阻塞至少50毫秒固惯，頁面將穩(wěn)定梆造。

Time to First CPU Idle - CPU處理所有頁面信息所需的時間。

DOM Content Loaded - 在完全加載和解析初始HTML文檔時葬毫，將觸發(fā)加載DOM內(nèi)容的事件镇辉，而無需等待樣式表，圖像和子幀完成加載供常。?應(yīng)該僅使用非常不同的事件加載來檢測完全加載的頁面摊聋。?將DOM內(nèi)容加載更合適時，將加載時間用作性能指標是一個流行的錯誤栈暇。

（*這些定義的參考資料來自?Google Lighthouse Docs?和?FireFox Developer docs.)

雖然服務(wù)器端因素影響這些度量麻裁，但是如果您能夠隔離它們并隨著時間的推移度量它們，那么您可以捕獲這些增量源祈。

這可以讓您了解應(yīng)用程序加載和呈現(xiàn)的速度煎源。

您還可以編寫代碼來檢查您沒有超出以前的基準測試。

它還提供了基于lighthouse計算的性能評分香缺，這是使用基本Selenium WebDriver通常無法獲得的數(shù)據(jù)手销。

如何在Selenum測試中添加sauce lab性能測試

要在Sauce Labs中開始捕獲性能值，您需要做的就是為現(xiàn)有的WebDriver測試添加兩個新功能图张。

extendedDebugging：true锋拖，

capturePerformance：true诈悍，

沒有sauce lab話，我需要非常麻煩的進行這方面的測試

要在過去做到這一點兽埃，我必須創(chuàng)建一個WinRunner腳本侥钳。然后，我必須添加一個循環(huán)計時器函數(shù)柄错，等待元素出現(xiàn)在應(yīng)用程序中舷夺。

然后，我將它添加到LoadRunner控制器中售貌，并使用HTTP Vuser協(xié)議對系統(tǒng)加載给猾。然后，WinRunner腳本將作為GUI Vuser在客戶機上運行颂跨，并保持本地呈現(xiàn)時間的計時敢伸。

當然，這并不準確毫捣，但在當時详拙，這是我實現(xiàn)這個功能的唯一方法。如果我以前有sauce lab蔓同，我就能省下很多時間饶辙。

為什么這很酷

是它與負載和壓力測試沒有特別的關(guān)系;?事實上，它是故意不考慮它們的斑粱。

當遇到性能下降的情況時弃揽，我們不可避免地會在用戶的行為中感覺到性能下降。

此時则北，大多數(shù)測試人員所做的第一件事就是運行一個負載和壓力測試矿微，認為這是一個性能問題。但是無論您只是使用幾個節(jié)點進行熱身尚揣，還是運行500個節(jié)點涌矢，都會發(fā)生這種行為。

它不是線性增長;它仍然是靜態(tài)的快骗。

這可能會讓你說“哦娜庇，天哪。這意味著UI中有些東西發(fā)生了變化方篮。例如名秀，有人引入了一些運行時間很長的DOM元素，或者有人增加了圖像的大小藕溅，等等匕得。

當我們看到性能問題時，我們傾向于運行負載和壓力測試巾表，而不理解它實際上是一個UI問題汁掠。

使用此工具略吨，您可以避免開銷，并使用它不僅幫助診斷UI問題考阱，還可以在您特別關(guān)心的頁面上輸入性能晋南，然后隨著時間的推移注意該頁面上的性能是否發(fā)生了變化。

你為什么要關(guān)心前端性能羔砾？

有一個搜索引擎優(yōu)化?（SEO）的B2C網(wǎng)站，每天有數(shù)百萬的點擊量偶妖。

他們有大約1萬個關(guān)鍵詞排名第一姜凄。

后來有一天，谷歌引入了一種名為Panda的算法趾访，它改變了谷歌對其搜索機器人查看web內(nèi)容的方式進行索引的方式态秧。

在改變之前，他們綜合考慮了反彈率和相關(guān)性等因素扼鞋。在Panda中申鱼，他們開始比以前的算法更重視頁面性能。

有一天突然這個網(wǎng)站排名開始下降云头。

花了幾個月的時間通過Lighthouse來檢查他們的頁面表現(xiàn)如何捐友。

如果他們當時就有了這個特性，并在Selenium腳本的旁邊運行溃槐，他們就會立即知道頁面加載何時開始變慢匣砖，并且不會受到如此巨大的SEO損失。

因此昏滴，如果您在零售或銀行業(yè)或某些BTC中搜索引擎優(yōu)化是至關(guān)重要的猴鲫，那么在測試中運行這些測試是非常寶貴的。

另外一個基于性能的測試工具叫做Speedo谣殊。

Speedo是一個NodeJS包拂共，使您能夠直接從命令行在Sauce上運行性能測試。

Speedo旨在幫助團隊開始進行性能測試姻几，因此它的設(shè)計易于使用宜狐，并且可以處理與運行前端性能測試和驗證性能回歸相關(guān)的復(fù)雜性。

Speedo可輕松集成任何CI / CD系統(tǒng)鲜棠，這是將Sauce Performance插入CI / CDpipeline 并開始捕獲性能的絕佳方式肌厨。

如果您有使用Sauce Labs的企業(yè)計劃并且正在使用Chrome（截至目前，性能指標只能在Google Chrome上捕獲）豁陆，則需要查看此新功能柑爸。

當然以上是和sauce labs 服務(wù)強綁定? 有沒有基于開源的免費的工具？

當然沒有盒音。表鳍。馅而。。 但是我們可以進行二次開發(fā) 自己在腳本中收集所需數(shù)據(jù) 拿 python selenium 舉個栗子

```?

''' Loosely based on the example code in http://www.obeythetestinggoat.com/

how-to-get-selenium-to-wait-for-page-load-after-a-click.html

'''

'''

Import the necessary packages required for execution

'''

from selenium import webdriver

''' Chrome web driver interface

'''

hyperlink = "http://lambdatest.com"

driver = webdriver.Chrome()

driver.get(hyperlink)

''' Use Navigation Timing? API to calculate the timings that matter the most '''?

navigationStart = driver.execute_script("return window.performance.timing.navigationStart")

responseStart = driver.execute_script("return window.performance.timing.responseStart")

domComplete = driver.execute_script("return window.performance.timing.domComplete")

''' Calculate the performance'''

backendPerformance_calc = responseStart - navigationStart

frontendPerformance_calc = domComplete - responseStart

print("Back End: %s" % backendPerformance_calc)

print("Front End: %s" % frontendPerformance_calc)

driver.quit()

```?

我們可以看到其實我們在腳本中 調(diào)用了一些瀏覽器對外暴露的接口 來實現(xiàn)性能監(jiān)控,然后可以利用圖表進行展示譬圣，當然如果有時間精力瓮恭，完全可以自己做一套定制化的服務(wù)。

本人：石頭 來自thoughtworks 西安

個人website：https://qaseven.cn