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