Browser Performance Testing · Gitlab 中文文檔

# Browser Performance Testing > 原文：[https://docs.gitlab.com/ee/user/project/merge_requests/browser_performance_testing.html](https://docs.gitlab.com/ee/user/project/merge_requests/browser_performance_testing.html) * [Overview](#overview) * [Use cases](#use-cases) * [How browser performance testing works](#how-browser-performance-testing-works) * [Configuring Browser Performance Testing](#configuring-browser-performance-testing) * [Configuring degradation threshold](#configuring-degradation-threshold) * [Performance testing on Review Apps](#performance-testing-on-review-apps) * [GitLab versions 12.3 and older](#gitlab-versions-123-and-older) # Browser Performance Testing[](#browser-performance-testing-premium "Permalink") [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/3507) in [GitLab Premium](https://about.gitlab.com/pricing/) 10.3. 如果您的應用程序提供 Web 界面，并且您正在使用[GitLab CI / CD](../../../ci/README.html) ，則可以快速確定瀏覽器中待處理代碼更改對渲染性能的影響. ## Overview[](#overview "Permalink") GitLab 使用[Sitespeed.io](https://www.sitespeed.io) （一種免費的開源工具）來測量網站的渲染性能. GitLab 構建的[Sitespeed 插件](https://gitlab.com/gitlab-org/gl-performance)在名為`browser-performance.json`的文件中輸出所分析的每個頁面的性能得分，該數據可以顯示在合并請求中. ## Use cases[](#use-cases "Permalink") 考慮以下工作流程： 1. 營銷團隊的成員正在嘗試通過添加新工具來跟蹤參與度. 2. 通過瀏覽器性能指標，他們可以看到他們的更改如何影響最終用戶頁面的可用性. 3. 指標顯示，更改后，頁面的性能得分有所下降. 4. 查看詳細報告時，他們看到`<head>`包含了新的 JavaScript 庫，這會影響加載頁面的速度. 5. 他們向前端開發人員尋求幫助，他們將庫設置為異步加載. 6. 前端開發人員批準合并請求，并授權將其部署到生產中. ## How browser performance testing works[](#how-browser-performance-testing-works "Permalink") 首先，在`.gitlab-ci.yml`文件中定義一個生成[瀏覽器性能報告工件的作業](../../../ci/pipelines/job_artifacts.html#artifactsreportsperformance-premium) . 然后，GitLab 會檢查此報告，比較源分支和目標分支之間每一頁的關鍵性能指標，并在合并請求中顯示信息. 有關性能作業的示例，請參閱" [配置瀏覽器性能測試"](#configuring-browser-performance-testing) . **注意：**如果"瀏覽器性能"報告沒有可比較的數據，例如，當您第一次在`.gitlab-ci.yml`添加"瀏覽器性能"作業時，"瀏覽器性能"報告小部件將不會顯示. 它必須在目標分支（例如`master` ）上至少運行一次，然后才能在針對該分支的合并請求中顯示. [![Browser Performance Widget](https://img.kancloud.cn/45/46/45465846dc607f3da9501fde7e324170_982x606.png)](img/browser_performance_testing.png) ## Configuring Browser Performance Testing[](#configuring-browser-performance-testing "Permalink") 這個例子顯示如何運行[sitespeed.io 容器](https://hub.docker.com/r/sitespeedio/sitespeed.io/)使用 GitLab CI / CD 上的代碼和[sitespeed.io](https://www.sitespeed.io)使用泊塢窗功能于泊塢窗. 1. 首先，使用[Docker-in-Docker 構建](../../../ci/docker/using_docker_build.html#use-docker-in-docker-workflow-with-docker-executor)設置 GitLab Runner. 2. 在`.gitlab-ci.yml`文件中，按如下所示配置默認的瀏覽器性能測試 CI 作業： ``` include: template: Verify/Browser-Performance.gitlab-ci.yml performance: variables: URL: https://example.com ``` **注意：**對于 12.4 之前的版本，請參閱[舊版 GitLab](#gitlab-versions-123-and-older)的信息. 如果您正在使用 Kubernetes 集群，請使用[`template: Jobs/Browser-Performance-Testing.gitlab-ci.yml`](https://gitlab.com/gitlab-org/gitlab/blob/master/lib/gitlab/ci/templates/Jobs/Browser-Performance-Testing.gitlab-ci.yml) . 上面的示例在 CI / CD 管道中創建了一個`performance`作業，并針對您在`URL`定義的網頁運行 sitespeed.io 以收集關鍵指標. 該示例使用的 CI / CD 模板自 12.4 起已包含在所有 GitLab 安裝中，但不適用于 Kubernetes 集群. 如果您使用的是 GitLab 12.3 或更早版本，則必須[手動添加配置](#gitlab-versions-123-and-older) 該模板將[GitLab 插件用于 sitespeed.io](https://gitlab.com/gitlab-org/gl-performance) ，并將完整的 HTML sitespeed.io 報告保存為" [瀏覽器性能"報告工件](../../../ci/pipelines/job_artifacts.html#artifactsreportsperformance-premium) ，您可以稍后下載和分析該[工件](../../../ci/pipelines/job_artifacts.html#artifactsreportsperformance-premium) . 此實現始終采用最新的瀏覽器性能工件. 如果啟用了[GitLab Pages，](../pages/index.html)則可以直接在瀏覽器中查看報告. 您還可以使用環境變量自定義作業： * `SITESPEED_IMAGE` ：配置要用于作業的 Docker 映像（默認為`sitespeedio/sitespeed.io` ），而不是映像版本. * `SITESPEED_VERSION` ：配置要用于作業的 Docker 映像的版本（默認`13.3.0` ）. * `SITESPEED_OPTIONS` ：根據需要配置任何其他 sitespeed.io 選項（默認為`nil` ）. 有關更多詳細信息，請參閱[sitespeed.io 文檔](https://www.sitespeed.io/documentation/sitespeed.io/configuration/) . For example, you can override the number of runs sitespeed.io makes on the given URL, and change the version: ``` include: template: Verify/Browser-Performance.gitlab-ci.yml performance: variables: URL: https://www.sitespeed.io/ SITESPEED_VERSION: 13.2.0 SITESPEED_OPTIONS: -n 5 ``` ### Configuring degradation threshold[](#configuring-degradation-threshold "Permalink") 在 GitLab 13.0 中[引入](https://gitlab.com/gitlab-org/gitlab/-/issues/27599) . 您可以配置降級警報的敏感度，以避免針對度量指標的小幅下降獲得警報. 這是通過設置`DEGRADATION_THRESHOLD`變量來完成的. 在以下示例中，僅當" `Total Score`指標下降 5 分或更多時，才會顯示警報： ``` include: template: Verify/Browser-Performance.gitlab-ci.yml performance: variables: URL: https://example.com DEGRADATION_THRESHOLD: 5 ``` `Total Score`指標基于 sitespeed.io 的[教練表現得分](https://www.sitespeed.io/documentation/sitespeed.io/metrics/#performance-score) . 在[教練文檔中](https://www.sitespeed.io/documentation/coach/how-to/#what-do-the-coach-do)有更多信息. ### Performance testing on Review Apps[](#performance-testing-on-review-apps "Permalink") 上面的 CI YAML 配置非常適合在靜態環境下進行測試，并且可以擴展為動態環境，但是還需要一些額外的步驟： 1. `performance`作業應在動態環境啟動后運行. 2. 在`review`工作中： 1. 生成帶有動態 URL 的 URL 列表文件. 2. 將文件另存為工件，例如，在作業`script`使用`echo $CI_ENVIRONMENT_URL > environment_url.txt` . 3. 將列表作為 URL 環境變量（可以是 URL 或包含 URL 的文件）傳遞給`performance`作業. 3. 現在，您可以針對所需的主機名和路徑運行 sitespeed.io 容器. 您的`.gitlab-ci.yml`文件如下所示： ``` stages: - deploy - performance include: template: Verify/Browser-Performance.gitlab-ci.yml review: stage: deploy environment: name: review/$CI_COMMIT_REF_SLUG url: http://$CI_COMMIT_REF_SLUG.$APPS_DOMAIN script: - run_deploy_script - echo $CI_ENVIRONMENT_URL > environment_url.txt artifacts: paths: - environment_url.txt only: - branches except: - master performance: dependencies: - review variables: URL: environment_url.txt ``` ### GitLab versions 12.3 and older[](#gitlab-versions-123-and-older "Permalink") 自推出以來，瀏覽器性能測試經歷了幾處更改. 在本節中，我們將詳細介紹這些更改以及如何基于 GitLab 版本運行測試： * 在 GitLab 12.4 中提供[了一個工作模板](https://gitlab.com/gitlab-org/gitlab/blob/master/lib/gitlab/ci/templates/Verify/Browser-Performance.gitlab-ci.yml) . * 在 13.2 中，使用其他模板變量將該功能從`Performance`重命名為`Browser Performance` . 出于兼容性原因，模板中的作業名稱仍然是`performance` ，但可以在以后的迭代中重命名以匹配. * 對于 11.5 至 12.3，沒有可用的模板，必須按以下方式手動定義作業： ``` performance: stage: performance image: docker:git variables: URL: https://example.com SITESPEED_VERSION: 13.3.0 SITESPEED_OPTIONS: '' services: - docker:stable-dind script: - mkdir gitlab-exporter - wget -O ./gitlab-exporter/index.js https://gitlab.com/gitlab-org/gl-performance/raw/master/index.js - mkdir sitespeed-results - docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:$SITESPEED_VERSION --plugins.add ./gitlab-exporter --outputFolder sitespeed-results $URL $SITESPEED_OPTIONS - mv sitespeed-results/data/performance.json performance.json artifacts: paths: - performance.json - sitespeed-results/ reports: performance: performance.json ``` * 對于 11.4 和更早版本，應按以下方式定義作業： ``` performance: stage: performance image: docker:git variables: URL: https://example.com services: - docker:stable-dind script: - mkdir gitlab-exporter - wget -O ./gitlab-exporter/index.js https://gitlab.com/gitlab-org/gl-performance/raw/master/index.js - mkdir sitespeed-results - docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:6.3.1 --plugins.add ./gitlab-exporter --outputFolder sitespeed-results $URL - mv sitespeed-results/data/performance.json performance.json artifacts: paths: - performance.json - sitespeed-results/ ``` 建議升級到最新版本并使用模板，以確保您收到最新更新，包括對 sitespeed.io 版本的更新.