Performance

原文：https://docs.gitlab.com/ee/development/fe_guide/performance.html

Performance

Best Practices

Realtime Components

在为实时功能编写代码时，我们必须牢记以下几点：

  1. 不要使服务器超载请求.
  2. 它应该是实时的.

因此，我们必须在发送请求和实时感之间取得平衡. 创建实时解决方案时，请使用以下规则.

  1. 服务器将通过在标头中发送Poll-Interval来告诉您要轮询多少. 使用它作为轮询间隔. 这样，系统管理员就可以轻松更改轮询速率 . Poll-Interval: -1表示您应禁用轮询，并且必须实施轮询.
  2. HTTP 状态不同于 2XX 的响应也应禁用轮询.
  3. 使用公共库进行轮询.
  4. 仅对活动的选项卡进行轮询. 请使用” 可见性” .
  5. 使用常规的轮询间隔，不要使用退避轮询或抖动，因为间隔将由服务器控制.
  6. 后端代码很可能将使用 etags. 您不会也不应检查状态304 Not Modified . 浏览器将为您进行转换.

Lazy Loading Images

为了缩短首次渲染的时间，我们对图像使用了延迟加载. 这是通过在data-src属性上设置实际图像源来实现的. 渲染 HTML 并加载 JavaScript 后，如果图像在当前视口中，则data-src的值将自动移至src .

  • 通过将src属性重命名为data-src并添加类lazy来准备 HTML 中的图像以进行延迟加载.
  • 如果您使用的是 Rails image_tag帮助器，则默认情况下将延迟加载所有图像，除非提供了lazy: false .

如果要异步添加包含惰性图像的内容，则需要调用函数gl.lazyLoader.searchLazyImages() ，它将搜索惰性图像并在需要时加载它们. 但通常应通过延迟加载功能中的MutationObserver自动处理它.

Animations

仅设置动画opacity和transform属性. 其他属性（例如top ， left ， margin和padding ）都导致重新计算 Layout，这要昂贵得多. 有关详细信息，请参见《 高性能动画 》中的”影响布局的样式”.

如果确实需要更改布局（例如，将主要内容压入的侧边栏），则最好使用FLIP一次更改昂贵的属性，并使用转换处理实际动画.

Reducing Asset Footprint

Universal code

main.js和commons/index.js中包含的代码将加载并在所有页面上运行. 除非在任何地方确实需要，否则请勿在这些文件中添加任何内容. 这些捆绑软件包括无处不在的库，例如vue ， axios和jQuery ，以及用于主导航和侧边栏的代码. 我们应该尽可能地从这些捆绑软件中删除模块，以减少代码占用量.

Page-specific JavaScript

Webpack 已配置为根据app/assets/javascripts/pages/*的文件结构自动生成入口点捆绑包. pages目录中的目录对应于 Rails 控制器和操作. 这些自动生成的捆绑包将自动包含在相应的页面中.

例如，如果要访问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

  • 保持精简入口点：页面专用的 JavaScript 入口点应尽可能精简. 这些文件免于单元测试，应主要用于实例化和依赖项，这些类和方法驻留在入口点脚本之外的模块中. 只需导入，读取 DOM，实例化，仅此而已.

  • 入口点可能是异步的： 不要假设运行入口点脚本时 DOM 已完全加载并且可用. 如果需要在 DOM 加载后运行某些代码，则应使用以下命令将事件处理程序附加到DOMContentLoaded事件：

    1. import initMyWidget from './my_widget';
    3. document.addEventListener('DOMContentLoaded', () => {
    4.   initMyWidget();
    5. });

  • 支持模块放置：

    • 如果类或模块特定于特定路由 ，请尝试将其定位在将要使用的入口点附近. 例如，如果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

对于不需要在页面加载后立即运行的任何代码（例如，模态，下拉列表和其他可以延迟加载的行为），您可以使用动态 import 语句将模块拆分为异步块. 这些导入返回一个 Promise，一旦脚本被加载，它将被解决：

  1. import(/* webpackChunkName: 'emoji' */ '~/emoji')
  2.   .then(/* do something */)
  3.   .catch(/* report error */)

生成这些动态导入时，请尝试使用webpackChunkName ，因为它将为块提供确定性的文件名，然后可以将其缓存在 GitLab 版本中的浏览器中.

更多信息，请参见webpack 的代码拆分文档 .

Minimizing page size

较小的页面大小意味着页面加载速度更快（在移动连接和连接不良时尤其重要），浏览器可以更快地解析页面，并且数据流量上限的用户使用的数据更少.

一般提示：

  • 不要添加新字体.
  • 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

Additional Resources