diff options
| author | Tim Zallmann <tzallmann@gitlab.com> | 2018-03-01 14:58:07 +0300 |
|---|---|---|
| committer | Tim Zallmann <tzallmann@gitlab.com> | 2018-03-01 14:58:07 +0300 |
| commit | 163931573571e26f425d5e0f138290b587abfc99 (patch) | |
| tree | d5c68e8c0caee84fb964cd8b627b8e527945a402 /doc | |
| parent | 4bc0900089e79430c61be0758062b0fddd078139 (diff) | |
| parent | cccde4b1cace9c4686825eba2d4eabff1a34433e (diff) | |
Merge branch 'docs-anim-perf' into 'master'
Add animation performance guide to frontend docs
See merge request gitlab-org/gitlab-ce!17234
Diffstat (limited to 'doc')
| -rw-r--r-- | doc/development/fe_guide/performance.md | 12 |
1 files changed, 12 insertions, 0 deletions
diff --git a/doc/development/fe_guide/performance.md b/doc/development/fe_guide/performance.md index 14ac1133cc0..98e43931a02 100644 --- a/doc/development/fe_guide/performance.md +++ b/doc/development/fe_guide/performance.md @@ -36,6 +36,15 @@ If you are asynchronously adding content which contains lazy images then you nee `gl.lazyLoader.searchLazyImages()` which will search for lazy images and load them if needed. But in general it should be handled automatically through a `MutationObserver` in the lazy loading function. +### Animations + +Only animate `opacity` & `transform` properties. Other properties (such as `top`, `left`, `margin`, and `padding`) all cause +Layout to be recalculated, which is much more expensive. For details on this, see "Styles that Affect Layout" in +[High Performance Animations][high-perf-animations]. + +If you _do_ need to change layout (e.g. a sidebar that pushes main content over), prefer [FLIP][flip] to change expensive +properties once, and handle the actual animation with transforms. + ## Reducing Asset Footprint ### Page-specific JavaScript @@ -87,6 +96,7 @@ General tips: - Compress and minify assets wherever possible (For CSS/JS, Sprockets and webpack do this for us). - If some functionality can reasonably be achieved without adding extra libraries, avoid them. - Use page-specific JavaScript as described above to dynamically load libraries that are only needed on certain pages. +- [High Performance Animations][high-perf-animations] ------- @@ -105,3 +115,5 @@ General tips: [d3]: https://d3js.org/ [chartjs]: http://www.chartjs.org/ [page-specific-js-example]: https://gitlab.com/gitlab-org/gitlab-ce/blob/13bb9ed77f405c5f6ee4fdbc964ecf635c9a223f/app/views/projects/graphs/_head.html.haml#L6-8 +[high-perf-animations]: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ +[flip]: https://aerotwist.com/blog/flip-your-animations/ |