Performance
Performance
在为实时功能编写代码时,我们必须牢记以下几点:
- 不要使服务器超载请求.
- 它应该是实时的.
因此,我们必须在发送请求和实时感之间取得平衡. 创建实时解决方案时,请使用以下规则.
- 服务器将通过在标头中发送来告诉您要轮询多少. 使用它作为轮询间隔. 这样,系统管理员就可以 .
Poll-Interval: -1
表示您应禁用轮询,并且必须实施轮询. - HTTP 状态不同于 2XX 的响应也应禁用轮询.
- 使用公共库进行轮询.
- 仅对活动的选项卡进行轮询. 请使用” 可见性” .
- 使用常规的轮询间隔,不要使用退避轮询或抖动,因为间隔将由服务器控制.
- 后端代码很可能将使用 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
自动处理它.
仅设置动画opacity
和transform
属性. 其他属性(例如top
, , margin
和padding
)都导致重新计算 Layout,这要昂贵得多. 有关详细信息,请参见《 高性能动画 》中的”影响布局的样式”.
Universal code
main.js
和commons/index.js
中包含的代码将加载并在所有页面上运行. 除非在任何地方确实需要,否则请勿在这些文件中添加任何内容. 这些捆绑软件包括无处不在的库,例如vue
, axios
和jQuery
,以及用于主导航和侧边栏的代码. 我们应该尽可能地从这些捆绑软件中删除模块,以减少代码占用量.
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,实例化,仅此而已.
- 企业版警告:对于 GitLab 企业版,特定于页面的入口点将覆盖具有相同名称的社区版对应点,因此,如果存在
ee/app/assets/javascripts/pages/foo/bar/index.js
,它将具有优先权在app/assets/javascripts/pages/foo/bar/index.js
. 如果要减少重复的代码,可以从另一个导入一个入口点. 不会自动完成此操作,以允许在覆盖功能方面具有灵活性.
Code Splitting
对于不需要在页面加载后立即运行的任何代码(例如,模态,下拉列表和其他可以延迟加载的行为),您可以使用动态 import 语句将模块拆分为异步块. 这些导入返回一个 Promise,一旦脚本被加载,它将被解决:
import(/* webpackChunkName: 'emoji' */ '~/emoji')
.then(/* do something */)
.catch(/* report error */)
生成这些动态导入时,请尝试使用 ,因为它将为块提供确定性的文件名,然后可以将其缓存在 GitLab 版本中的浏览器中.
更多信息,请参见 .
较小的页面大小意味着页面加载速度更快(在移动连接和连接不良时尤其重要),浏览器可以更快地解析页面,并且数据流量上限的用户使用的数据更少.
- 不要添加新字体.
- 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
- 用于测试网站的加载时间和大小.
- Google PageSpeed Insights 对网页进行评分,并提供反馈意见以改善网页.
- Browser Diet是社区构建的指南,其中列出了一些实用技巧,以提高网页性能.