带有被动事件监听器的Wordpress和最佳实践 [英] Wordpress and best practice with passive event listeners

问题描述

因此，我已经在chrome网站上进行了审核，谷歌表示我应该使用被动事件监听器。

并手动添加，但我认为这不是个好主意。

解决方案

很酷，我遇到了devlucky编写的解决方案，该解决方案提供了一小段JavaScript来解决问题。

查看本文

这是使侦听器被动的JavaScript。

 （function（）{
 varsupportsPassive = eventListenerOptionsSupported（）; 
 
 if（supportsPassive）{
 var addEvent = EventTarget.prototype.addEventListener; 
 ov erwriteAddEvent（addEvent）; 
} 
 
函数overwriteAddEvent（superMethod）{
 var defaultOptions = {
被动：true，
捕获：false 
}; 
 
 EventTarget.prototype.addEventListener = function（type，listener，options）{
 var useListenerListenerOptions = typeof options ==='object'; 
 var useCapture = UsesListenerOptions？ options.capture：选项; 
 
选项= usersListenerOptions吗？选项：{}; 
 options.passive = options.passive！==未定义？ options.passive：defaultOptions.passive; 
 options.capture = useCapture！==未定义？ useCapture：defaultOptions.capture; 
 
 superMethod.call（this，type，listener，options）; 
}; 
} 
 
函数eventListenerOptionsSupported（）{
 var support = false; 
 try {
 var opts = Object.defineProperty（{}，'passive'，{
 get：function（）{
 support = true; 
} 
}）; 
 window.addEventListener（ test，null，opts）; 
} catch（e）{} 
 
支持收益； 
} 
}）（）; 
  

So I have run an audit on a website in chrome and google says I should use passive event listeners.

I have looked through the code and identified it's coming from the wordpress emoji integration:

<script type="text/javascript">/*<![CDATA[*/window._wpemojiSettings={"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/mysite.com.au\/blog\/wp-includes\/js\/wp-emoji-release.min.js?ver=371b19f5ae5bed67ef4d578bd7a19944"}};!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b===c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);/*]]>*/</script> <style type="text/css">img.wp-smiley,img.emoji{display:inline !important;border:none !important;box-shadow:none !important;height:1em !important;width:1em !important;margin:0 .07em !important;vertical-align:-0.1em !important;background:none !important;padding:0 !important}</style> <script type='text/javascript'>var onepress_js_settings={"onepress_disable_animation":"","onepress_disable_sticky_header":"1","onepress_vertical_align_menu":"","hero_animation":"flipInX","hero_speed":"5000","hero_fade":"750","hero_duration":"5000","is_home":"","gallery_enable":"1"};</script> <script type='text/javascript'>var wtilp={"ajax_url":"https:\/\/www.snowys.com.au\/blog\/wp-admin\/admin-ajax.php"};</script>

Now I want to keep emoji support for wordpress but I want to add the passive listeners for better usability, how would I go about this.

I thought about removing it like in this link and adding it manually but I don't think this is a good idea.

解决方案

Cool I came across a solution written by devlucky who provides a small piece of javascript to fix the problem.

Check out this article

This is the javascript that made the listeners passive.

(function() {
  var supportsPassive = eventListenerOptionsSupported();  

  if (supportsPassive) {
    var addEvent = EventTarget.prototype.addEventListener;
    overwriteAddEvent(addEvent);
  }

  function overwriteAddEvent(superMethod) {
    var defaultOptions = {
      passive: true,
      capture: false
    };

    EventTarget.prototype.addEventListener = function(type, listener, options) {
      var usesListenerOptions = typeof options === 'object';
      var useCapture = usesListenerOptions ? options.capture : options;

      options = usesListenerOptions ? options : {};
      options.passive = options.passive !== undefined ? options.passive : defaultOptions.passive;
      options.capture = useCapture !== undefined ? useCapture : defaultOptions.capture;

      superMethod.call(this, type, listener, options);
    };
  }

  function eventListenerOptionsSupported() {
    var supported = false;
    try {
      var opts = Object.defineProperty({}, 'passive', {
        get: function() {
          supported = true;
        }
      });
      window.addEventListener("test", null, opts);
    } catch (e) {}

    return supported;
  }
})();

这篇关于带有被动事件监听器的Wordpress和最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！