Emoji: Optimize emoji loader with sessionStorage, willReadFrequently, and OffscreenCanvas.

* Use `sessionStorage` to remember the previous results of calls to `browserSupportsEmoji()` for 1 week.
* Optimize reading from canvas by supplying the `willReadFrequently` option for the 2D context.
* When `OffscreenCanvas` is available, offload `browserSupportsEmoji()` to a web worker to prevent blocking the main thread. This is of primary benefit to Safari which does not yet support `willReadFrequently`.
* Remove obsolete support for IE11 since promises are now utilized. Nevertheless, ES3 syntax is maintained and IE11 will simply short-circuit.

Props westonruter, dmsnell, peterwilsoncc, valterlorran, flixos90, spacedmonkey, joemcgill.
Fixes #58472.

Built from https://develop.svn.wordpress.org/trunk@56074


git-svn-id: http://core.svn.wordpress.org/trunk@55586 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2023-06-27 17:24:25 +00:00
parent 1afbc5b8a7
commit 80abb55903
3 changed files with 289 additions and 79 deletions

View File

@ -2,65 +2,189 @@
* @output wp-includes/js/wp-emoji-loader.js
*/
( function( window, document, settings ) {
var src, ready, ii, tests;
/**
* Emoji Settings as exported in PHP via _print_emoji_detection_script().
* @typedef WPEmojiSettings
* @type {object}
* @property {?object} source
* @property {?string} source.concatemoji
* @property {?string} source.twemoji
* @property {?string} source.wpemoji
* @property {?boolean} DOMReady
* @property {?Function} readyCallback
*/
// Create a canvas element for testing native browser support of emoji.
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext && canvas.getContext( '2d' );
/**
* Support tests.
* @typedef SupportTests
* @type {object}
* @property {?boolean} flag
* @property {?boolean} emoji
*/
/**
* IIFE to detect emoji support and load Twemoji if needed.
*
* @param {Window} window
* @param {Document} document
* @param {WPEmojiSettings} settings
*/
( function wpEmojiLoader( window, document, settings ) {
if ( typeof Promise === 'undefined' ) {
return;
}
var sessionStorageKey = 'wpEmojiSettingsSupports';
var tests = [ 'flag', 'emoji' ];
/**
* Checks whether the browser supports offloading to a Worker.
*
* @since 6.3.0
*
* @private
*
* @returns {boolean}
*/
function supportsWorkerOffloading() {
return (
typeof Worker !== 'undefined' &&
typeof OffscreenCanvas !== 'undefined' &&
typeof URL !== 'undefined' &&
URL.createObjectURL &&
typeof Blob !== 'undefined'
);
}
/**
* @typedef SessionSupportTests
* @type {object}
* @property {number} timestamp
* @property {SupportTests} supportTests
*/
/**
* Get support tests from session.
*
* @since 6.3.0
*
* @private
*
* @returns {?SupportTests} Support tests, or null if not set or older than 1 week.
*/
function getSessionSupportTests() {
if (
typeof sessionStorage !== 'undefined' &&
sessionStorageKey in sessionStorage
) {
try {
/** @type {SessionSupportTests} */
var item = JSON.parse(
sessionStorage.getItem( sessionStorageKey )
);
if (
typeof item === 'object' &&
typeof item.timestamp === 'number' &&
new Date().valueOf() < item.timestamp + 604800 && // Note: Number is a week in seconds.
typeof item.supportTests === 'object'
) {
return item.supportTests;
}
} catch ( e ) {}
}
return null;
}
/**
* Persist the supports in session storage.
*
* @since 6.3.0
*
* @private
*
* @param {SupportTests} supportTests Support tests.
*/
function setSessionSupportTests( supportTests ) {
if ( typeof sessionStorage !== 'undefined' ) {
try {
/** @type {SessionSupportTests} */
var item = {
supportTests: supportTests,
timestamp: new Date().valueOf()
};
sessionStorage.setItem(
sessionStorageKey,
JSON.stringify( item )
);
} catch ( e ) {}
}
}
/**
* Checks if two sets of Emoji characters render the same visually.
*
* This function may be serialized to run in a Worker. Therefore, it cannot refer to variables from the containing
* scope. Everything must be passed by parameters.
*
* @since 4.9.0
*
* @private
*
* @param {CanvasRenderingContext2D} context 2D Context.
* @param {string} set1 Set of Emoji to test.
* @param {string} set2 Set of Emoji to test.
*
* @return {boolean} True if the two sets render the same.
*/
function emojiSetsRenderIdentically( set1, set2 ) {
function emojiSetsRenderIdentically( context, set1, set2 ) {
// Cleanup from previous test.
context.clearRect( 0, 0, canvas.width, canvas.height );
context.clearRect( 0, 0, context.canvas.width, context.canvas.height );
context.fillText( set1, 0, 0 );
var rendered1 = canvas.toDataURL();
var rendered1 = new Uint32Array(
context.getImageData(
0,
0,
context.canvas.width,
context.canvas.height
).data
);
// Cleanup from previous test.
context.clearRect( 0, 0, canvas.width, canvas.height );
context.clearRect( 0, 0, context.canvas.width, context.canvas.height );
context.fillText( set2, 0, 0 );
var rendered2 = canvas.toDataURL();
var rendered2 = new Uint32Array(
context.getImageData(
0,
0,
context.canvas.width,
context.canvas.height
).data
);
return rendered1 === rendered2;
return rendered1.every( function ( rendered2Data, index ) {
return rendered2Data === rendered2[ index ];
} );
}
/**
* Determines if the browser properly renders Emoji that Twemoji can supplement.
*
* This function may be serialized to run in a Worker. Therefore, it cannot refer to variables from the containing
* scope. Everything must be passed by parameters.
*
* @since 4.2.0
*
* @private
*
* @param {CanvasRenderingContext2D} context 2D Context.
* @param {string} type Whether to test for support of "flag" or "emoji".
*
* @return {boolean} True if the browser can render emoji, false if it cannot.
*/
function browserSupportsEmoji( type ) {
function browserSupportsEmoji( context, type ) {
var isIdentical;
if ( ! context || ! context.fillText ) {
return false;
}
/*
* Chrome on OS X added native emoji rendering in M41. Unfortunately,
* it doesn't work when the font is bolder than 500 weight. So, we
* check for bold rendering support to avoid invisible emoji in Chrome.
*/
context.textBaseline = 'top';
context.font = '600 32px Arial';
switch ( type ) {
case 'flag':
/*
@ -70,8 +194,9 @@
* the browser doesn't render it correctly (white flag emoji + transgender symbol).
*/
isIdentical = emojiSetsRenderIdentically(
context,
'\uD83C\uDFF3\uFE0F\u200D\u26A7\uFE0F', // as a zero-width joiner sequence
'\uD83C\uDFF3\uFE0F\u200B\u26A7\uFE0F' // separated by a zero-width space
'\uD83C\uDFF3\uFE0F\u200B\u26A7\uFE0F' // separated by a zero-width space
);
if ( isIdentical ) {
@ -86,8 +211,9 @@
* the browser doesn't render it correctly ([U] + [N]).
*/
isIdentical = emojiSetsRenderIdentically(
'\uD83C\uDDFA\uD83C\uDDF3', // as the sequence of two code points
'\uD83C\uDDFA\u200B\uD83C\uDDF3' // as the two code points separated by a zero-width space
context,
'\uD83C\uDDFA\uD83C\uDDF3', // as the sequence of two code points
'\uD83C\uDDFA\u200B\uD83C\uDDF3' // as the two code points separated by a zero-width space
);
if ( isIdentical ) {
@ -102,6 +228,7 @@
* the browser doesn't render it correctly (black flag emoji + [G] + [B] + [E] + [N] + [G]).
*/
isIdentical = emojiSetsRenderIdentically(
context,
// as the flag sequence
'\uD83C\uDFF4\uDB40\uDC67\uDB40\uDC62\uDB40\uDC65\uDB40\uDC6E\uDB40\uDC67\uDB40\uDC7F',
// with each code point separated by a zero-width space
@ -129,8 +256,9 @@
* sequence come from older emoji standards.
*/
isIdentical = emojiSetsRenderIdentically(
context,
'\uD83E\uDEF1\uD83C\uDFFB\u200D\uD83E\uDEF2\uD83C\uDFFF', // as the zero-width joiner sequence
'\uD83E\uDEF1\uD83C\uDFFB\u200B\uD83E\uDEF2\uD83C\uDFFF' // separated by a zero-width space
'\uD83E\uDEF1\uD83C\uDFFB\u200B\uD83E\uDEF2\uD83C\uDFFF' // separated by a zero-width space
);
return ! isIdentical;
@ -139,6 +267,48 @@
return false;
}
/**
* Checks emoji support tests.
*
* This function may be serialized to run in a Worker. Therefore, it cannot refer to variables from the containing
* scope. Everything must be passed by parameters.
*
* @since 6.3.0
*
* @private
*
* @param {string[]} tests Tests.
*
* @return {SupportTests} Support tests.
*/
function testEmojiSupports( tests ) {
var canvas;
if (
typeof WorkerGlobalScope !== 'undefined' &&
self instanceof WorkerGlobalScope
) {
canvas = new OffscreenCanvas( 300, 150 ); // Dimensions are default for HTMLCanvasElement.
} else {
canvas = document.createElement( 'canvas' );
}
var context = canvas.getContext( '2d', { willReadFrequently: true } );
/*
* Chrome on OS X added native emoji rendering in M41. Unfortunately,
* it doesn't work when the font is bolder than 500 weight. So, we
* check for bold rendering support to avoid invisible emoji in Chrome.
*/
context.textBaseline = 'top';
context.font = '600 32px Arial';
var supports = {};
tests.forEach( function ( test ) {
supports[ test ] = browserSupportsEmoji( context, test );
} );
return supports;
}
/**
* Adds a script to the head of the document.
*
@ -146,75 +316,115 @@
*
* @since 4.2.0
*
* @param {Object} src The url where the script is located.
* @param {string} src The url where the script is located.
*
* @return {void}
*/
function addScript( src ) {
var script = document.createElement( 'script' );
script.src = src;
script.defer = script.type = 'text/javascript';
document.getElementsByTagName( 'head' )[0].appendChild( script );
script.defer = true;
document.head.appendChild( script );
}
tests = Array( 'flag', 'emoji' );
settings.supports = {
everything: true,
everythingExceptFlag: true
};
/*
* Tests the browser support for flag emojis and other emojis, and adjusts the
* support settings accordingly.
*/
for( ii = 0; ii < tests.length; ii++ ) {
settings.supports[ tests[ ii ] ] = browserSupportsEmoji( tests[ ii ] );
// Create a promise for DOMContentLoaded since the worker logic may finish after the event has fired.
var domReadyPromise = new Promise( function ( resolve ) {
document.addEventListener( 'DOMContentLoaded', resolve, {
once: true
} );
} );
settings.supports.everything = settings.supports.everything && settings.supports[ tests[ ii ] ];
if ( 'flag' !== tests[ ii ] ) {
settings.supports.everythingExceptFlag = settings.supports.everythingExceptFlag && settings.supports[ tests[ ii ] ];
// Obtain the emoji support from the browser, asynchronously when possible.
new Promise( function ( resolve ) {
var supportTests = getSessionSupportTests();
if ( supportTests ) {
resolve( supportTests );
return;
}
}
settings.supports.everythingExceptFlag = settings.supports.everythingExceptFlag && ! settings.supports.flag;
if ( supportsWorkerOffloading() ) {
try {
/*
* Note that this string contains the real source code for the
* copied functions, _not_ a string representation of them. This
* is because it's not possible to transfer a Function across
* threads. The lack of quotes is intentional. The function names
* are copied to variable names since minification will munge the
* function names, thus breaking the ability for the functions to
* refer to each other.
*/
var workerScript =
'var emojiSetsRenderIdentically = ' + emojiSetsRenderIdentically + ';' +
'var browserSupportsEmoji = ' + browserSupportsEmoji + ';' +
'var testEmojiSupports = ' + testEmojiSupports + ';' +
'postMessage(testEmojiSupports(' + JSON.stringify(tests) + '));';
var blob = new Blob( [ workerScript ], {
type: 'text/javascript'
} );
var worker = new Worker( URL.createObjectURL( blob ) );
worker.onmessage = function ( event ) {
supportTests = event.data;
setSessionSupportTests( supportTests );
resolve( supportTests );
};
return;
} catch ( e ) {}
}
// Sets DOMReady to false and assigns a ready function to settings.
settings.DOMReady = false;
settings.readyCallback = function() {
settings.DOMReady = true;
};
supportTests = testEmojiSupports( tests );
setSessionSupportTests( supportTests );
resolve( supportTests );
} )
// Once the browser emoji support has been obtained from the session, finalize the settings.
.then( function ( supportTests ) {
/*
* Tests the browser support for flag emojis and other emojis, and adjusts the
* support settings accordingly.
*/
for ( var test in supportTests ) {
settings.supports[ test ] = supportTests[ test ];
// When the browser can not render everything we need to load a polyfill.
if ( ! settings.supports.everything ) {
ready = function() {
settings.readyCallback();
};
settings.supports.everything =
settings.supports.everything && settings.supports[ test ];
/*
* Cross-browser version of adding a dom ready event.
*/
if ( document.addEventListener ) {
document.addEventListener( 'DOMContentLoaded', ready, false );
window.addEventListener( 'load', ready, false );
} else {
window.attachEvent( 'onload', ready );
document.attachEvent( 'onreadystatechange', function() {
if ( 'complete' === document.readyState ) {
settings.readyCallback();
if ( 'flag' !== test ) {
settings.supports.everythingExceptFlag =
settings.supports.everythingExceptFlag &&
settings.supports[ test ];
}
} );
}
}
src = settings.source || {};
settings.supports.everythingExceptFlag =
settings.supports.everythingExceptFlag &&
! settings.supports.flag;
if ( src.concatemoji ) {
addScript( src.concatemoji );
} else if ( src.wpemoji && src.twemoji ) {
addScript( src.twemoji );
addScript( src.wpemoji );
}
}
// Sets DOMReady to false and assigns a ready function to settings.
settings.DOMReady = false;
settings.readyCallback = function () {
settings.DOMReady = true;
};
} )
.then( function () {
return domReadyPromise;
} )
.then( function () {
// When the browser can not render everything we need to load a polyfill.
if ( ! settings.supports.everything ) {
settings.readyCallback();
var src = settings.source || {};
if ( src.concatemoji ) {
addScript( src.concatemoji );
} else if ( src.wpemoji && src.twemoji ) {
addScript( src.twemoji );
addScript( src.wpemoji );
}
}
} );
} )( window, document, window._wpemojiSettings );

View File

@ -1,2 +1,2 @@
/*! This file is auto-generated */
!function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){p.clearRect(0,0,i.width,i.height),p.fillText(e,0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(t,0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(p&&p.fillText)switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s("\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!s("\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!s("\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!s("\ud83e\udef1\ud83c\udffb\u200d\ud83e\udef2\ud83c\udfff","\ud83e\udef1\ud83c\udffb\u200b\ud83e\udef2\ud83c\udfff")}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(e=t.source||{}).concatemoji?c(e.concatemoji):e.wpemoji&&e.twemoji&&(c(e.twemoji),c(e.wpemoji)))}(window,document,window._wpemojiSettings);
!function(a,n){var o,s,e;function i(e){if("undefined"!=typeof sessionStorage)try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function c(e,t){switch(t){case"flag":return p(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!p(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!p(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!p(e,"\ud83e\udef1\ud83c\udffb\u200d\ud83e\udef2\ud83c\udfff","\ud83e\udef1\ud83c\udffb\u200b\ud83e\udef2\ud83c\udfff")}return!1}function f(e){var t="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):a.createElement("canvas"),n=t.getContext("2d",{willReadFrequently:!0}),r=(n.textBaseline="top",n.font="600 32px Arial",{});return e.forEach(function(e){r[e]=c(n,e)}),r}function t(e){var t=a.createElement("script");t.src=e,t.defer=!0,a.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){a.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){if("undefined"!=typeof sessionStorage&&o in sessionStorage)try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="var emojiSetsRenderIdentically = "+p+";var browserSupportsEmoji = "+c+";var testEmojiSupports = "+f+";postMessage(testEmojiSupports("+JSON.stringify(s)+"));",r=new Blob([e],{type:"text/javascript"});return void(new Worker(URL.createObjectURL(r)).onmessage=function(e){i(n=e.data),t(n)})}catch(e){}i(n=f(s))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings);

View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.3-alpha-56073';
$wp_version = '6.3-alpha-56074';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.