diff options
Diffstat (limited to 'doc/development/fe_guide/performance.md')
-rw-r--r-- | doc/development/fe_guide/performance.md | 44 |
1 files changed, 0 insertions, 44 deletions
diff --git a/doc/development/fe_guide/performance.md b/doc/development/fe_guide/performance.md index 432e66bee33..5e8581663b6 100644 --- a/doc/development/fe_guide/performance.md +++ b/doc/development/fe_guide/performance.md @@ -366,50 +366,6 @@ browser's developer console from any page in GitLab. parsed, `DOMContentLoaded` is not needed to bootstrap applications because all the DOM nodes are already at our disposal. -- **JavaScript that relies on CSS for calculations should use [`waitForCSSLoaded()`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/helpers/startup_css_helper.js#L34):** - GitLab uses [Startup.css](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/38052) - to improve page performance. This can cause issues if JavaScript relies on CSS - for calculations. To fix this the JavaScript can be wrapped in the - [`waitForCSSLoaded()`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/helpers/startup_css_helper.js#L34) - helper function. - - ```javascript - import initMyWidget from './my_widget'; - import { waitForCSSLoaded } from '~/helpers/startup_css_helper'; - - waitForCSSLoaded(initMyWidget); - ``` - - Note that `waitForCSSLoaded()` methods supports receiving the action in different ways: - - - With a callback: - - ```javascript - waitForCSSLoaded(action) - ``` - - - With `then()`: - - ```javascript - waitForCSSLoaded().then(action); - ``` - - - With `await` followed by `action`: - - ```javascript - await waitForCSSLoaded; - action(); - ``` - - For example, see how we use this in [`app/assets/javascripts/pages/projects/graphs/charts/index.js`](https://gitlab.com/gitlab-org/gitlab/-/commit/5e90885d6afd4497002df55bf015b338efcfc3c5#02e81de37f5b1716a3ef3222fa7f7edf22c40969_9_8): - - ```javascript - waitForCSSLoaded(() => { - const languagesContainer = document.getElementById('js-languages-chart'); - //... - }); - ``` - - **Supporting Module Placement:** - If a class or a module is _specific to a particular route_, try to locate it close to the entry point in which it is used. For instance, if |