Performance · Gitlab 中文文檔

# Performance > 原文：[https://docs.gitlab.com/ee/development/fe_guide/performance.html](https://docs.gitlab.com/ee/development/fe_guide/performance.html) * [Best Practices](#best-practices) * [Realtime Components](#realtime-components) * [Lazy Loading Images](#lazy-loading-images) * [Animations](#animations) * [Reducing Asset Footprint](#reducing-asset-footprint) * [Universal code](#universal-code) * [Page-specific JavaScript](#page-specific-javascript) * [Important Considerations](#important-considerations) * [Code Splitting](#code-splitting) * [Minimizing page size](#minimizing-page-size) * [Additional Resources](#additional-resources) # Performance[](#performance "Permalink") ## Best Practices[](#best-practices "Permalink") ### Realtime Components[](#realtime-components "Permalink") 在為實時功能編寫代碼時，我們必須牢記以下幾點： 1. 不要使服務器超載請求. 2. 它應該是實時的. 因此，我們必須在發送請求和實時感之間取得平衡. 創建實時解決方案時，請使用以下規則. 1. 服務器將通過在標頭中發送`Poll-Interval`來告訴您要輪詢多少. 使用它作為輪詢間隔. 這樣[，系統管理員](../../administration/polling.html)就可以[輕松更改輪詢速率](../../administration/polling.html) . `Poll-Interval: -1`表示您應禁用輪詢，并且必須實施輪詢. 2. HTTP 狀態不同于 2XX 的響應也應禁用輪詢. 3. 使用公共庫進行輪詢. 4. 僅對活動的選項卡進行輪詢. 請使用" [可見性"](https://github.com/ai/visibilityjs) . 5. 使用常規的輪詢間隔，不要使用退避輪詢或抖動，因為間隔將由服務器控制. 6. 后端代碼很可能將使用 etags. 您不會也不應檢查狀態`304 Not Modified` . 瀏覽器將為您進行轉換. ### Lazy Loading Images[](#lazy-loading-images "Permalink") 為了縮短首次渲染的時間，我們對圖像使用了延遲加載. 這是通過在`data-src`屬性上設置實際圖像源來實現的. 渲染 HTML 并加載 JavaScript 后，如果圖像在當前視口中，則`data-src`的值將自動移至`src` . * 通過將`src`屬性重命名為`data-src`并添加類`lazy`來準備 HTML 中的圖像以進行延遲加載. * 如果您使用的是 Rails `image_tag`幫助器，則默認情況下將延遲加載所有圖像，除非提供了`lazy: false` . 如果要異步添加包含惰性圖像的內容，則需要調用函數`gl.lazyLoader.searchLazyImages()` ，它將搜索惰性圖像并在需要時加載它們. 但通常應通過延遲加載功能中的`MutationObserver`自動處理它. ### Animations[](#animations "Permalink") 僅設置動畫`opacity`和`transform`屬性. 其他屬性（例如`top` ， `left` ， `margin`和`padding` ）都導致重新計算 Layout，這要昂貴得多. 有關詳細信息，請參見《 [高性能動畫](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/) 》中的"影響布局的樣式". 如果*確實*需要更改布局（例如，將主要內容壓入的側邊欄），則最好使用[FLIP](https://aerotwist.com/blog/flip-your-animations/)一次更改昂貴的屬性，并使用轉換處理實際動畫. ## Reducing Asset Footprint[](#reducing-asset-footprint "Permalink") ### Universal code[](#universal-code "Permalink") `main.js`和`commons/index.js`中包含的代碼將加載并在*所有*頁面上運行. 除非*在任何地方*確實需要，否則**請勿**在這些文件中**添加**任何內容. 這些捆綁軟件包括無處不在的庫，例如`vue` ， `axios`和`jQuery` ，以及用于主導航和側邊欄的代碼. 我們應該盡可能地從這些捆綁軟件中刪除模塊，以減少代碼占用量. ### Page-specific JavaScript[](#page-specific-javascript "Permalink") Webpack 已配置為根據`app/assets/javascripts/pages/*`的文件結構自動生成入口點捆綁包. `pages`目錄中的目錄對應于 Rails 控制器和操作. 這些自動生成的捆綁包將自動包含在相應的頁面中. 例如，如果要訪問[https://gitlab.com/gitlab-org/gitlab/-/issues](https://gitlab.com/gitlab-org/gitlab/-/issues) ，則將使用`index`操作訪問`app/controllers/projects/issues_controller.rb`控制器. 如果相應的文件位于`pages/projects/issues/index/index.js` ，它將被編譯成一個 webpack 包并包含在頁面中. **注意：**以前我們鼓勵在 haml 文件中使用`content_for :page_specific_javascripts`以及手動生成的 webpack 捆綁包. 但是，在此新系統下，您永遠不需要手動將入口點添加到`webpack.config.js`文件中.**提示：**如果不確定與給定頁面對應的控制器和動作，可以通過在 GitLab 內任何頁面上的瀏覽器開發人員控制臺中檢查`document.body.dataset.page`來找到. #### Important Considerations[](#important-considerations "Permalink") * **保持精簡入口點：**頁面專用的 JavaScript 入口點應盡可能精簡. 這些文件免于單元測試，應主要用于實例化和依賴項，這些類和方法駐留在入口點腳本之外的模塊中. 只需導入，讀取 DOM，實例化，僅此而已. * **入口點可能是異步的：** *不要*假設運行入口點腳本時 DOM 已完全加載并且可用. 如果需要在 DOM 加載后運行某些代碼，則應使用以下命令將事件處理程序附加到`DOMContentLoaded`事件： ``` import initMyWidget from './my_widget'; document.addEventListener('DOMContentLoaded', () => { initMyWidget(); }); ``` * **支持模塊放置：** * 如果類或模塊*特定于特定路由* ，請嘗試將其定位在將要使用的入口點附近. 例如，如果`my_widget.js`僅在`pages/widget/show/index.js`導入，則應將模塊放在`pages/widget/show/my_widget.js` ，并使用相對路徑`import initMyWidget from './my_widget';` （例如， `import initMyWidget from './my_widget';` ）. * 如果一個類或模塊被*多個路由使用* ，請將其放置在最接近的公共父目錄的共享目錄中，以作為導入它的入口點. 例如，如果將`my_widget.js`導入到`pages/widget/show/index.js`和`pages/widget/run/index.js`兩者中，則將模塊放置在`pages/widget/shared/my_widget.js` ，并使用相對路徑（例如`../shared/my_widget` ）. * **企業版警告：**對于 GitLab 企業版，特定于頁面的入口點將覆蓋具有相同名稱的社區版對應點，因此，如果存在`ee/app/assets/javascripts/pages/foo/bar/index.js` ，它將具有優先權在`app/assets/javascripts/pages/foo/bar/index.js` . 如果要減少重復的代碼，可以從另一個導入一個入口點. 不會自動完成此操作，以允許在覆蓋功能方面具有靈活性. ### Code Splitting[](#code-splitting "Permalink") 對于不需要在頁面加載后立即運行的任何代碼（例如，模態，下拉列表和其他可以延遲加載的行為），您可以使用動態 import 語句將模塊拆分為異步塊. 這些導入返回一個 Promise，一旦腳本被加載，它將被解決： ``` import(/* webpackChunkName: 'emoji' */ '~/emoji') .then(/* do something */) .catch(/* report error */) ``` 生成這些動態導入時，請嘗試使用`webpackChunkName` ，因為它將為塊提供確定性的文件名，然后可以將其緩存在 GitLab 版本中的瀏覽器中. 更多信息，請參見[webpack 的代碼拆分文檔](https://webpack.js.org/guides/code-splitting/#dynamic-imports) . ### Minimizing page size[](#minimizing-page-size "Permalink") 較小的頁面大小意味著頁面加載速度更快（在移動連接和連接不良時尤其重要），瀏覽器可以更快地解析頁面，并且數據流量上限的用戶使用的數據更少. 一般提示： * 不要添加新字體. * Prefer font formats with better compression, e.g. WOFF2 is better than WOFF, which is better than TTF. * 盡可能壓縮和縮小資產（對于 CSS / JS，Sprockets 和 webpack 可以為我們完成此工作）. * 如果可以在不添加額外庫的情況下合理地實現某些功能，請避免使用它們. * 如上所述，使用特定于頁面的 JavaScript 加載僅在某些頁面上需要的庫. * 盡可能使用代碼拆分動態導入來延遲加載最初不需要的代碼. * [High Performance Animations](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/) * * * ## Additional Resources[](#additional-resources "Permalink") * [WebPage Test，](https://www.webpagetest.org)用于測試網站的加載時間和大小. * [Google PageSpeed Insights 對](https://developers.google.com/speed/pagespeed/insights/)網頁進行評分，并提供反饋意見以改善網頁. * [Profiling with Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/) * [Browser Diet](https://browserdiet.com/)是社區構建的指南，其中列出了一些實用技巧，以提高網頁性能.