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.Follow up for #1815602: Introduce a polyfill for matchMedia
Problem/Motivation
The matchmedia polyfill is slow when there're a lot of pictures, because for each evaluation of a media query and new div is build to evaluate the media query.
Proposed resolution
Add caching to the polyfill.
Remaining tasks
We added this to picture for Drupal 7 (commit) and did some profiling, the same has to be done for matchmedia.js
Code can be tested at http://picturefill7.h011.attiks.com/pictures
User interface changes
None
API changes
None
| Comment | File | Size | Author |
|---|---|---|---|
| #10 | 1848500-performance-optimized-matchmedia-10.patch | 6.47 KB | Lukas von Blarer |
| #4 | 1848500-matchmedia-caching-4.patch | 1.76 KB | Lukas von Blarer |
Comments
Comment #1
attiks CreditAttribution: attiks commentedComment #2
Lukas von BlarerYou created a patch for the 7.x module. Would you port it? Should I?
Comment #3
attiks CreditAttribution: attiks commented#2You may do it if you want
PS: Matchmedia is not part of picture in D8, it's used by other parts as well, so moving back to javascript.
Comment #4
Lukas von BlarerHere are the changes made to picture 7.x ported to 8.x
Comment #6
attiks CreditAttribution: attiks commentedtrailing whitespace
PS: Try creating your patch using
git diffComment #7
attiks CreditAttribution: attiks commentedRelated: there's a 'pure' javascript implementation for matchmedia as well: https://github.com/weblinc/matchMedia which is a lot faster than native media queries implementation.
The Drupal 7 picture module supports both and the improvement is visible on slower (mobile) browsers.
Comment #8
Lukas von BlarerHow stable is this? Should the script be replaced entirely?
Comment #9
attiks CreditAttribution: attiks commentedIt is stable and works over well. The only thing that needs to be done is test all core functionality that depends on this.
Comment #10
Lukas von BlarerAttaching a patch and changing title. I did not test the patch until now. What depends on matchmedia?
Comment #11
Lukas von BlarerComment #12
attiks CreditAttribution: attiks commentedThere's a new faster - js only - implementation available at https://github.com/weblinc/media-match, might be a good alternative as well
Comment #13
sunNote that the divergence of this library from upstream came up in:
#2203431: [meta] Various asset (JavaScript) libraries have to be updated to a (minified) stable release prior to 8.0.0
It would be great if we could either contribute our changes to the original upstream library so that we can replace our fork with the upstream version, or replace our current fork with a completely new/different library, as seemingly proposed in recent comments here.
Comment #14
droplet CreditAttribution: droplet commentedSome rewritten have been done in upstream. I'm closing this issue. welcome to reopen. Thanks :) #2207629: Update matchMedia library to latest release