# 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/)是社区构建的指南，其中列出了一些实用技巧，以提高网页性能.