The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.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 | luksak |
| #4 | 1848500-matchmedia-caching-4.patch | 1.76 KB | luksak |
Comments
Comment #1
attiks commentedComment #2
luksakYou created a patch for the 7.x module. Would you port it? Should I?
Comment #3
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
luksakHere are the changes made to picture 7.x ported to 8.x
Comment #6
attiks commentedtrailing whitespace
PS: Try creating your patch using
git diffComment #7
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
luksakHow stable is this? Should the script be replaced entirely?
Comment #9
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
luksakAttaching a patch and changing title. I did not test the patch until now. What depends on matchmedia?
Comment #11
luksakComment #12
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 commentedSome rewritten have been done in upstream. I'm closing this issue. welcome to reopen. Thanks :) #2207629: Update matchMedia library to latest release