WordPress.org

Make WordPress Core

Changeset 38869


Ignore:
Timestamp:
10/22/2016 11:59:56 PM (4 years ago)
Author:
peterwilsoncc
Message:

Emoji: Load polyfill responsibly.

Improve performance of Emoji tests and loading of the polyfill.

Reduces the number of tests to determine browser support for emoji to those most likely to fail. Adds the defer flag to the loaded scripts for browsers lacking support.

Props superpoincare for perf testing, peterwilsoncc.
Fixes #37817.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/bookmarklet.min.js

    r37603 r38869  
    1 (function(a,b,c,d){function e(a,c){if("undefined"!=typeof c){var d=b.createElement("input");d.name=a,d.value=c,d.type="hidden",p.appendChild(d)}}var f,g,h,i,j,k,l,m,n,o=a.encodeURIComponent,p=b.createElement("form"),q=b.getElementsByTagName("head")[0],r="_press_this_app",s=!0;if(d){if(!c.match(/^https?:/))return void(top.location.href=d);if(d+="&u="+o(c),c.match(/^https:/)&&d.match(/^http:/)&&(s=!1),a.getSelection?h=a.getSelection()+"":b.getSelection?h=b.getSelection()+"":b.selection&&(h=b.selection.createRange().text||""),d+="&buster="+(new Date).getTime(),s||(b.title&&(d+="&t="+o(b.title.substr(0,256))),h&&(d+="&s="+o(h.substr(0,512)))),f=a.outerWidth||b.documentElement.clientWidth||600,g=a.outerHeight||b.documentElement.clientHeight||700,f=800>f||f>5e3?600:.7*f,g=800>g||g>3e3?700:.9*g,!s)return void a.open(d,r,"location,resizable,scrollbars,width="+f+",height="+g);i=q.getElementsByTagName("meta")||[];for(var t=0;t<i.length&&!(t>200);t++){var u=i[t],v=u.getAttribute("name"),w=u.getAttribute("property"),x=u.getAttribute("content");x&&(v?e("_meta["+v+"]",x):w&&e("_meta["+w+"]",x))}j=q.getElementsByTagName("link")||[];for(var y=0;y<j.length&&!(y>=50);y++){var z=j[y],A=z.getAttribute("rel");"canonical"!==A&&"icon"!==A&&"shortlink"!==A||e("_links["+A+"]",z.getAttribute("href"))}b.body.getElementsByClassName&&(k=b.body.getElementsByClassName("hfeed")[0]),k=b.getElementById("content")||k||b.body,l=k.getElementsByTagName("img")||[];for(var B=0;B<l.length&&!(B>=100);B++)n=l[B],n.src.indexOf("avatar")>-1||n.className.indexOf("avatar")>-1||n.width&&n.width<256||n.height&&n.height<128||e("_images[]",n.src);m=b.body.getElementsByTagName("iframe")||[];for(var C=0;C<m.length&&!(C>=50);C++)e("_embeds[]",m[C].src);b.title&&e("t",b.title),h&&e("s",h),p.setAttribute("method","POST"),p.setAttribute("action",d),p.setAttribute("target",r),p.setAttribute("style","display: none;"),a.open("about:blank",r,"location,resizable,scrollbars,width="+f+",height="+g),b.body.appendChild(p),p.submit()}})(window,document,top.location.href,window.pt_url);
     1(function(a,b,c,d){function e(a,c){if("undefined"!=typeof c){var d=b.createElement("input");d.name=a,d.value=c,d.type="hidden",p.appendChild(d)}}var f,g,h,i,j,k,l,m,n,o=a.encodeURIComponent,p=b.createElement("form"),q=b.getElementsByTagName("head")[0],r="_press_this_app",s=!0;if(d){if(!c.match(/^https?:/))return void(top.location.href=d);if(d+="&u="+o(c),c.match(/^https:/)&&d.match(/^http:/)&&(s=!1),a.getSelection?h=a.getSelection()+"":b.getSelection?h=b.getSelection()+"":b.selection&&(h=b.selection.createRange().text||""),d+="&buster="+(new Date).getTime(),s||(b.title&&(d+="&t="+o(b.title.substr(0,256))),h&&(d+="&s="+o(h.substr(0,512)))),f=a.outerWidth||b.documentElement.clientWidth||600,g=a.outerHeight||b.documentElement.clientHeight||700,f=f<800||f>5e3?600:.7*f,g=g<800||g>3e3?700:.9*g,!s)return void a.open(d,r,"location,resizable,scrollbars,width="+f+",height="+g);i=q.getElementsByTagName("meta")||[];for(var t=0;t<i.length&&!(t>200);t++){var u=i[t],v=u.getAttribute("name"),w=u.getAttribute("property"),x=u.getAttribute("content");x&&(v?e("_meta["+v+"]",x):w&&e("_meta["+w+"]",x))}j=q.getElementsByTagName("link")||[];for(var y=0;y<j.length&&!(y>=50);y++){var z=j[y],A=z.getAttribute("rel");"canonical"!==A&&"icon"!==A&&"shortlink"!==A||e("_links["+A+"]",z.getAttribute("href"))}b.body.getElementsByClassName&&(k=b.body.getElementsByClassName("hfeed")[0]),k=b.getElementById("content")||k||b.body,l=k.getElementsByTagName("img")||[];for(var B=0;B<l.length&&!(B>=100);B++)n=l[B],n.src.indexOf("avatar")>-1||n.className.indexOf("avatar")>-1||n.width&&n.width<256||n.height&&n.height<128||e("_images[]",n.src);m=b.body.getElementsByTagName("iframe")||[];for(var C=0;C<m.length&&!(C>=50);C++)e("_embeds[]",m[C].src);b.title&&e("t",b.title),h&&e("s",h),p.setAttribute("method","POST"),p.setAttribute("action",d),p.setAttribute("target",r),p.setAttribute("style","display: none;"),a.open("about:blank",r,"location,resizable,scrollbars,width="+f+",height="+g),b.body.appendChild(p),p.submit()}})(window,document,top.location.href,window.pt_url);
  • trunk/src/wp-includes/js/wp-emoji-loader.js

    r38717 r38869  
    11( function( window, document, settings ) {
    22    var src, ready, ii, tests;
     3
     4    /*
     5     * Create a canvas element for testing native browser support
     6     * of emoji.
     7     */
     8    var canvas = document.createElement( 'canvas' );
     9    var context = canvas.getContext && canvas.getContext( '2d' );
    310
    411    /**
     
    815     * @since 4.2.0
    916     *
    10      * @param type {String} Whether to test for support of "simple", "flag", "diversity" or "unicode8" emoji.
     17     * @param type {String} Whether to test for support of "flag" or "emoji4" emoji.
    1118     * @return {Boolean} True if the browser can render emoji, false if it cannot.
    1219     */
    1320    function browserSupportsEmoji( type ) {
    14         var canvas = document.createElement( 'canvas' ),
    15             context = canvas.getContext && canvas.getContext( '2d' ),
    16             stringFromCharCode = String.fromCharCode,
    17             flag, flag2, tonedata, tone, tone2, technologist, technologist2;
     21        var stringFromCharCode = String.fromCharCode,
     22            flag, flag2, technologist, technologist2;
    1823
    1924        if ( ! context || ! context.fillText ) {
    2025            return false;
    2126        }
     27
     28        // Cleanup from previous test.
     29        context.clearRect( 0, 0, canvas.width, canvas.height );
    2230
    2331        /*
     
    3442                 * This works because the image will be one of three things:
    3543                 * - Two empty squares, if the browser doesn't render emoji
    36                  * - Two squares with 'A' and 'U' in them, if the browser doesn't render flag emoji
    37                  * - The Australian flag
     44                 * - Two squares with 'U' and 'N' in them, if the browser doesn't render flag emoji
     45                 * - The United Nations flag
    3846                 *
    3947                 * The first two will encode to small images (1-2KB data URLs), the third will encode
    4048                 * to a larger image (4-5KB data URL).
    4149                 */
    42                 context.fillText( stringFromCharCode( 55356, 56806, 55356, 56826 ), 0, 0 );
     50                context.fillText( stringFromCharCode( 55356, 56826, 55356, 56819 ), 0, 0 );
    4351                if ( canvas.toDataURL().length < 3000 ) {
    4452                    return false;
     
    6472
    6573                return flag !== flag2;
    66             case 'diversity':
    67                 /*
    68                  * This tests if the browser supports the Emoji Diversity specification, by rendering an
    69                  * emoji with no skin tone specified (in this case, Santa). It then adds a skin tone, and
    70                  * compares if the emoji rendering has changed.
    71                  */
    72                 context.fillText( stringFromCharCode( 55356, 57221 ), 0, 0 );
    73                 tonedata = context.getImageData( 16, 16, 1, 1 ).data;
    74                 tone = tonedata[0] + ',' + tonedata[1] + ',' + tonedata[2] + ',' + tonedata[3];
    75 
    76                 context.fillText( stringFromCharCode( 55356, 57221, 55356, 57343 ), 0, 0 );
    77                 // Chrome has issues comparing arrays, and Safari has issues converting arrays to strings.
    78                 // So, we create our own string and compare that, instead.
    79                 tonedata = context.getImageData( 16, 16, 1, 1 ).data;
    80                 tone2 = tonedata[0] + ',' + tonedata[1] + ',' + tonedata[2] + ',' + tonedata[3];
    81 
    82                 return tone !== tone2;
    83             case 'simple':
    84                 /*
    85                  * This creates a smiling emoji, and checks to see if there is any image data in the
    86                  * center pixel. In browsers that don't support emoji, the character will be rendered
    87                  * as an empty square, so the center pixel will be blank.
    88                  */
    89                 context.fillText( stringFromCharCode( 55357, 56835 ), 0, 0 );
    90                 return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
    91             case 'unicode8':
    92                 /*
    93                  * To check for Unicode 8 support, let's try rendering the most important advancement
    94                  * that the Unicode Consortium have made in years: the burrito.
    95                  */
    96                 context.fillText( stringFromCharCode( 55356, 57135 ), 0, 0 );
    97                 return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
    98             case 'unicode9':
    99                 /*
    100                  * Do Unicode 9 emoji render?
    101                  * ¯\_(ツ)_/¯
    102                  */
    103                 context.fillText( stringFromCharCode( 55358, 56631 ), 0, 0 );
    104                 return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
    10574            case 'emoji4':
    10675                /*
     
    12998
    13099        script.src = src;
    131         script.type = 'text/javascript';
     100        script.defer = script.type = 'text/javascript';
    132101        document.getElementsByTagName( 'head' )[0].appendChild( script );
    133102    }
    134103
    135     tests = Array( 'simple', 'flag', 'unicode8', 'diversity', 'unicode9', 'emoji4' );
     104    tests = Array( 'flag', 'emoji4' );
    136105
    137106    settings.supports = {
Note: See TracChangeset for help on using the changeset viewer.