Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Using classes in JavaScript triggers a stylesheet invalidation, resulting in a hit on rendering performance. We should replace this usage wherever possible with using .data() instead. Functionally, things will be the same, but without invalidating stylesheets.
This is a meta issue to track down and make the following changes:
- #2348321: Upgrade to jQuery Once 2.x
- Find additional uses and add your issue here!
Comment | File | Size | Author |
---|---|---|---|
#8 | core-js-once-data-2180921-3.patch | 4.63 KB | capynet |
#4 | core-js-once-data-2180921-2.patch | 4.4 KB | nod_ |
Comments
Comment #1
nod_Quick and dirty solution. We can't use
$().data()
because this needs to be exposed to CSS and other JS on the page and we can get away with native selectors so everything works out well. There is a slight perf impact, about 4/5ms on chrome compared to using classes but not a big deal compared to what's going on inside the functions that are called with.once()
and considering we're not messing with the styling is a big plus.Ideally I'd like to enforce the use of an id (so you can't call
$().once(function () {});
) and remove the function parameter so that once is only used for filtering a set of jQuery objects (so you can't do$().once('my-one-and-only', function () {})
)The only valid way to use once would then be:
That's how it's done in core now anyway.
If you ask me, the once thing ought to be a no-jQuery script.
Comment #2
nod_Ah sorry removed the auto increment thing in that patch, didn't mean to. Anyway it's NW really.
Comment #3
nod_Ok before we get into API changes of jQuery.once() here is an API-compatible version that uses the
data-drupal-once
attribute to do it's magic.Comment #4
nod_With the patch.
Comment #5
RobLoach> We can't use $().data() because this needs to be exposed to CSS and other JS on the page
jQuery Once's job is simply to act on an element once. If CSS needs to react in a certain way, then it should add a specific class accordingly:
``` javascript
$('.myelement').once().addClass('specialcase');
```
Thanks for the pull request. Let's talk over there:
https://github.com/RobLoach/jquery-once/pull/5
Let's keep changes upstream, put out a release, and then update it here afterwards.
Comment #6
nod_Postponed on upstream.
Comment #7
droplet CreditAttribution: droplet commentedrecalculation of style??
I think it will:
It won't
no active + i class in your stylesheets.
Comment #8
capynet CreditAttribution: capynet commentedRe rolled.
Comment #9
sunThe library has been changed upstream. We need to update our copy in core to the latest available code now.
Unless there is a tagged release already, it's fine if we're going to temporarily update to the latest master. — Since the change to upstream has not been battle-tested against real code/implementations, it's possible that we might even find bugs.
Comment #10
RobLoach#2348321: Upgrade to jQuery Once 2.x
Comment #11
RobLoachMoving this to be a META issue for all the cases we find where .data() could/should be used.
Comment #12
LewisNymanComment #13
nod_dup of several other issues. Now jquery once uses data attributes too.