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