Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

PERF: Memoize element references for `dockCheck` (#21079) 

This is run frequently in a scroll listener. Removing the need for repeated `querySelector` calls makes those scroll handlers much faster.
This commit is contained in:
David Taylor 2023-04-12 14:17:43 +01:00 committed by GitHub
parent a328153ec2
commit db16700355
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,6 +29,7 @@ const SiteHeaderComponent = MountWidget.extend(
_scheduledRemoveAnimate: null, _scheduledRemoveAnimate: null,
_topic: null, _topic: null,
_itsatrap: null, _itsatrap: null,
_applicationElement: null,
@observes( @observes(
"currentUser.unread_notifications", "currentUser.unread_notifications",
@ -203,7 +204,7 @@ const SiteHeaderComponent = MountWidget.extend(
}, },
dockCheck() { dockCheck() {
const header = document.querySelector("header.d-header"); const header = this.header;
if (this.docAt === null) { if (this.docAt === null) {
if (!header) { if (!header) {
@ -212,7 +213,8 @@ const SiteHeaderComponent = MountWidget.extend(
this.docAt = header.offsetTop; this.docAt = header.offsetTop;
} }
const main = document.querySelector(".ember-application"); const main = (this._applicationElement ??=
document.querySelector(".ember-application"));
const offsetTop = main ? main.offsetTop : 0; const offsetTop = main ? main.offsetTop : 0;
const offset = window.pageYOffset - offsetTop; const offset = window.pageYOffset - offsetTop;
if (offset >= this.docAt) { if (offset >= this.docAt) {
@ -440,6 +442,8 @@ const SiteHeaderComponent = MountWidget.extend(
export default SiteHeaderComponent.extend({ export default SiteHeaderComponent.extend({
classNames: ["d-header-wrap"], classNames: ["d-header-wrap"],
classNameBindings: ["site.mobileView::drop-down-mode"], classNameBindings: ["site.mobileView::drop-down-mode"],
headerWrap: null,
header: null,
init() { init() {
this._super(...arguments); this._super(...arguments);
@ -452,13 +456,12 @@ export default SiteHeaderComponent.extend({
this.appEvents.on("site-header:force-refresh", this, "queueRerender"); this.appEvents.on("site-header:force-refresh", this, "queueRerender");
const headerWrap = document.querySelector(".d-header-wrap"); this.headerWrap = document.querySelector(".d-header-wrap");
let header; if (this.headerWrap) {
if (headerWrap) {
schedule("afterRender", () => { schedule("afterRender", () => {
header = headerWrap.querySelector("header.d-header"); this.header = this.headerWrap.querySelector("header.d-header");
const headerOffset = headerWrap.offsetHeight; const headerOffset = this.headerWrap.offsetHeight;
const headerTop = header.offsetTop; const headerTop = this.header.offsetTop;
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
"--header-offset", "--header-offset",
`${headerOffset}px` `${headerOffset}px`
@ -475,7 +478,7 @@ export default SiteHeaderComponent.extend({
for (let entry of entries) { for (let entry of entries) {
if (entry.contentRect) { if (entry.contentRect) {
const headerOffset = entry.contentRect.height; const headerOffset = entry.contentRect.height;
const headerTop = header.offsetTop; const headerTop = this.header.offsetTop;
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
"--header-offset", "--header-offset",
`${headerOffset}px` `${headerOffset}px`
@ -488,7 +491,7 @@ export default SiteHeaderComponent.extend({
} }
}); });
this._resizeObserver.observe(headerWrap); this._resizeObserver.observe(this.headerWrap);
} }
}, },