IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

PERF: Set --header-offset property only when changed (#15107)

Browse Source 
Calling `setProperty("--header-offset", newValue)` will always cause a 'Recalculate Style' event, even if the value is unchanged. On my browser, these 'Recalculate Style' events take about 6-7ms each time the `dockCheck` function is run.

This commit stores the 'previous' value in an instance variable, and only calls setProperty if the value has changed. This brings the total runtime of `dockCheck` down to about 70µs on my machine.
This commit is contained in:
David Taylor
2021-11-26 15:25:03 +00:00
committed by GitHub
parent 1441226b1a
commit 4d3eb3f1ac
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/discourse/app/components/site-header.js
View File

@@ -186,7 +186,13 @@ const SiteHeaderComponent = MountWidget.extend(
const headerRect = header.getBoundingClientRect(),
headerOffset = headerRect.top + headerRect.height,
doc = document.documentElement;
doc.style.setProperty("--header-offset", `${headerOffset}px`);
const newValue = `${headerOffset}px`;
if (newValue !== this.currentHeaderOffsetValue) {
this.currentHeaderOffsetValue = newValue;
doc.style.setProperty("--header-offset", newValue);
}
if (offset >= this.docAt) {
if (!this.dockedHeader) {
document.body.classList.add("docked");