避免多次加载Facebook按钮和统计数据

时间:2017-11-08 作者:Iurie

当我的网站加载单个帖子时,一些带有相关统计信息的Facebook按钮(共享、保存等)会显示在三个不同的位置:帖子的顶部和底部,以及网站的侧边栏。我认为,这会减缓网站负载,所以,问题是how to load these buttons and the associated statistics only once (在变量中),然后在多个位置显示它们?

我知道W3 Total Cache和其他类似的插件,但是其他方式呢?可能需要一些PHP代码?

1 个回复
最合适的回答,由SO网友:Celso Bessa 整理而成

lurie. 我会在前端使用香草Javascript。这样,就不需要使任何服务器缓存无效。这是一个untested 解决方案

Javascript文件——在主Javascript文件中使用ES6功能和forEach polyfill

\'use strict\';

/**
 * @summary Clones social buttons and insert them elsewhere
 *
 * Clones social buttons and insert them elsewhere in the DOM after the window.load event.
 * Can be used to clone anything else, in fact.
 *
 * @listens window.load
 *
 * @param string $sourceSelector a CSS3 element selector for the element to be cloned
 * @param array $wrappersSelectors an array of CSS3 element selectors to append the cloned elements
 * @returns voide
 */
function cloneSocialButtonsES6( sourceSelector = \'\', wrappersSelectors = [] ) {
    // get the source element
    var originalButtons = document.querySelector( sourceSelector );
    // if wrappersSelectors is empty or not-provided, bail and logs to console
    if ( wrappersSelectors.length === 0) {
        console.error(\'wrappersSelectors must be a non-empty array of CSS3 selectors\');
        return;
    }
    // for each item in wrappersSelectors array, clones the source element
    wrappersSelectors.forEach( function( wrapper ){
        // get the wrapper element in the DOM
        var wrapper = document.querySelector( wrapper );
        // for each wrapper in the array, clones the source element and appends it to wrapper
        var clone = originalButtons.cloneNode( true );
        wrapper.appendChild(clone);
    });
}

// lazy load cloneSocialButtons on window.load event
if ( window.addEventListener ) {
    window.addEventListener(\'load\', cloneSocialButtons, false);
}
else if (window.attachEvent) {
    window.attachEvent("onload", cloneSocialButtons);
}
else {
    window.onload = cloneSocialButtons;
};
此版本使用了某些ES6特性,如数组的forEach方法和函数参数的默认值。它更干净,但对浏览器的支持更少。

我建议您使用Polyfill之类的服务。或者使用克里斯·费迪南迪的阵法。按照his中的建议,forEach polyfillPocket Guides 您可以在单独的文件中使用可能需要的所有实用程序和多边形填充。

/**
 * Array.prototype.forEach() polyfill
 * @author Chris Ferdinandi
 * @license MIT
 */
if (window.Array && !Array.prototype.forEach) {
    Array.prototype.forEach = function (callback, thisArg) {
        thisArg = thisArg || window;
        for (var i = 0; i < this.length; i++) {
            callback.call(thisArg, this[i], i, this);
        }
    };
}
Javascript文件-没有forEach polyfill,浏览器支持更好,但更详细;

\'use strict\';

/**
 * @summary Clones social buttons and insert them elsewhere
 *
 * Clones social buttons and insert them elsewhere in the DOM after the window.load event.
 * Can be used to clone anything else, in fact.
 *
 * @listens window.load
 *
 * @param string $sourceSelector a CSS3 element selector for the element to be cloned
 * @param array $wrappersSelectors an array of CSS3 element selectors to append the cloned elements
 * @returns voide
 */
function cloneSocialButtons( sourceSelector, wrappersSelectors ) {
    sourceSelector = sourceSelector || \'\';
    wrappersSelectors = wrappersSelectors || [];
    // get the source element
    var originalButtons = document.querySelector( sourceSelector );
    // if wrappersSelectors is empty or not-provided, bail and logs to console
    var wrappersLength = wrappersSelectors.length;
    if ( wrappersLength === 0) {
        console.error(\'wrappersSelectors must be a non-empty array of CSS3 selectors\');
        return;
    }
    // for each item in wrappersSelectors array, clones the source element
    for (var i = 0; i < wrappersLength; i++) {
       // get the wrapper element in the DOM
       var wrapper = document.querySelector( wrappersSelectors[i] );
       // for each wrapper in the array, clones the source element and appends it to wrapper
       var clone = originalButtons.cloneNode( true );
       wrapper.appendChild(clone);
    }


}

// lazy load cloneSocialButtons on window.load event
if ( window.addEventListener ) {
    window.addEventListener(\'load\', cloneSocialButtons, false);
}
else if (window.attachEvent) {
    window.attachEvent("onload", cloneSocialButtons);
}
else {
    window.onload = cloneSocialButtons;
};
PHP函数放置在函数中。php或特定于站点的插件。

function wpse_285324_social_scripts() {
    wp_register_script( \'wpse_285324_social_buttons_cloner\', $path_to_the_javascript_script, array(\'\'), \'0.1.0\', true);
    wp_register_script( \'wpse_285324_social_buttons_cloner\');

};
add_action(\'wp_enqueue_scripts\', \'wpse_285324_social_scripts\');
重要提示我认为这是你的一个很好的起点。

如果有帮助,请告诉我。

结束

相关推荐

带有php 5.5和Zend opcache的WordPress

我目前将php更新/升级到5.5.11,并希望使用它附带的opcache我启用了缓存,并为php添加了一些设置。ini公司zend_extension=/usr/lib/php5/20131313/opcache.so opcache.memory_consumption=128 opcache.interned_strings_buffer=8 opcache.max_accelerated_files=4000 opcache.revalidate_freq=60&#x