[wp-trac] [WordPress Trac] #31701: Emoji: Avoid enqueueing JS by default

[WordPress Trac]

#31701: Emoji: Avoid enqueueing JS by default
-----------------------------+--------------------------------------
 Reporter:  obenland         |       Owner:
     Type:  defect (bug)     |      Status:  new
 Priority:  normal           |   Milestone:  4.2
Component:  General          |     Version:  trunk
 Severity:  major            |  Resolution:
 Keywords:  emoji has-patch  |     Focuses:  javascript, performance
-----------------------------+--------------------------------------

Comment (by pento):

 Replying to [comment:14 azaozz]:
 > Maybe we can use only one "settings" filter. No need to filter each
 setting separately (`emoji_url`, `emoji_ext`, etc.). Combine them in an
 array and pass it through one?

 I'm inclined to keep them as separate filters - there shouldn't be a need
 to filter the JS file names. I'm totally okay with changing that if
 there's a use case, though.

 > Sometimes widow.load fires much later than expected. Can take up to 5-10
 sec. etc. Usually caused by a slow loading image or script. Would it be
 better to run the emoji JS on DOM ready? Seems that `DOMContentLoaded` is
 supported in all browsers that also support addEventListener, i.e. all
 except IE8 and older: http://caniuse.com/#feat=domcontentloaded,
 https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded.

 How about using the `readystatechange` event? It's supported everywhere,
 and seems to happen just before `DOMContentLoaded`, but after the DOM is
 ready for interaction.

 > If the wp-emoji and twemoji scripts are concatenated together (which is
 a good idea), we won't need to wait for loading. In theory we can load
 late in the footer and run as soon as the file is loaded. In practice we
 can set a var in wp-emoji-loader.js on DOM ready, then when wp-emoji.js
 loads, we can check that var and either bind to DOMContentLoaded or
 window.load, or run if that has already fired.

 I don't like putting `wp-emoji-loader.js` in the footer. Having it in the
 header means it starts loading the JS file as soon as possible. Adding an
 extra flag to `wp-emoji-loader.js` to determine when the DOM is loaded
 seems like a waste, when `document.readyState` gives us the information we
 need.

 > May be missing something but looks like `waitForTwemoji()` inserts
 another script node every 50ms while waiting.

 Oops! I'll fix that in the next patch. Thanks. :-)

--
Ticket URL: <https://core.trac.wordpress.org/ticket/31701#comment:15>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform