Question

我们目前在运行一些自定义调整大小/布局功能的WordPress主题时存在性能问题。它们主要涉及粘性＆＃39;随屏幕滚动的菜单，在屏幕滚动或调整窗口大小时调用。禁用它们可以立即解决问题但会使主题无法使用，因为当您调整大小或滚动时，菜单不再响应（正如预期的那样）

总之，他们可以花费超过3.5秒来完成并对用户体验产生重大影响。从谷歌浏览器中，深入研究最终将我们带到了这里：

更多信息：

性能问题仅在Google Chrome上显而易见。没有其他浏览器受到影响。
该网站没有推送代码更改，性能缓慢降低和＆＃39; janking＆＃39;成了问题。
在服务器上开发代码期间，问题很明显目前驻留在（服务器Alpha），代码被移动到另一个完全独立群集（服务器测试版），问题立即消失。相同的代码其他服务器（服务器测试版）在此时此类测试中没有相同的问题。
该网站托管在Apache（Server Alpha）上，版本略高于PHP5。资源未启用缓存，例如CSS
来自＆＃39; hillter＆＃39;的调用是MenuResize（）和MenuSticky（）。主题。
主要的时间是在脚本中，而不是绘画，在时间中断。

可能的原因：

以下是我最好的猜测：

开发主机站点（服务器测试版）没有显示相同的问题，远远优于网络和处理能力的角度。它也在物理上更接近我们。是否有可能慢速调用每次都从当前托管服务器（Server Alpha）通过网络提取CSS（禁用缓存），而我们看到的缓慢时间实际上是再次检索CSS的JQuery脚本？

代码：

/*Menu Sticky*/
function MenuSticky() {

    if($('#header_content').length) {

        var $this = $('#header_content'),
            size_point = $this.data().responsive,
            window_w = window.innerWidth,
            window_scroll = $(window).scrollTop(),
            top_h = $('#header .header_top').innerHeight(),
            this_h = $this.innerHeight(),
            top_bar = 0;


        if($('body').hasClass('admin-bar')) {
            top_bar = parseInt($('html').css('marginTop').replace('px', ''));
        }

        if(size_point == undefined || size_point == '') {
            size_point = 1199;
        }

        if( window_scroll > (top_h + top_bar) ) {

            if(($this).hasClass('sticky-enable') == true) {

                $this.addClass('header-sticky').css('top', top_bar + 'px');
                // $('#header').append('<div class="fix-sticky" style="height: '+this_h+'px"></div>')
                if(window_w <= size_point) {
                    $this.find('.header_menu').css('top', this_h + top_bar + 'px');
                }
            }

        } else {
            $this.removeClass('header-sticky').css('top', '');
            // $('#header').find('.fix-sticky').remove();
            if(window_w <= size_point) {
                $this.find('.header_menu').css('top', (this_h + top_h + top_bar) + 'px');
            }
        }

        if($this.hasClass('header-sticky')) {
            if(window_w <= 600) {
                $this.css('top', '');
                $this.find('.header_menu').css('top', this_h + 'px');
            } else {
                $this.css('top', top_bar + 'px');
            }
        }
        console.log('test');
    }
}

/* Menu Resize */
function MenuResize() {

    if ($('#header_content').length) {

        var $this = $('#header_content'),
            size_point = $this.data().responsive,
            window_scroll = $(window).scrollTop(),
            top_h = $('#header .header_top').innerHeight(),
            this_h = $this.innerHeight(),
            window_w = window.innerWidth,
            top_bar = 0;

        if($('body').hasClass('admin-bar')) {
            top_bar = parseInt($('html').css('marginTop').replace('px', ''));
        }

        if (size_point == undefined || size_point == '') {
            size_point = 1199;
        }

        if (window_w <= size_point) {
            $this.addClass('header_mobile').removeClass('header_content');
        } else {
            $('.menu-bars').removeClass('active');
            $this.removeClass('header_mobile').addClass('header_content');
            $('#header_content .header_menu').css({
                'top': ''
            }).removeClass('active').find('ul').css('display', '');
        }

        if($this.hasClass('header-sticky')) {

            $this.css('top', top_bar + 'px');
        } else {
            $this.css('top', '');
        }
    }
}

 $(document).ready(function () {
    $(window).load(function () {
        $('#hillter-preloader').delay(1000).fadeOut('400', function () {
            $(this).fadeOut()
        });
        $('body').append('<div class="awe-popup-overlay" id="awe-popup-overlay"></div><div class="awe-popup-wrap" id="awe-popup-wrap"><div class="awe-popup-content"></div><span class="awe-popup-close" id="awe-popup-close"></div>');
        GalleryIsotope();
        GuestBookMasonry();
        AttractionMap();
        ContactMap();
    });

    $(window).scroll(function (event) {
        MenuSticky();
    });

    $(window).resize(function (event) {
        ParallaxScroll();
        PopupCenter();
        MenuResize();
        MenuSticky();
        AttractionClick();
    }).trigger('resize');

    // Fix calendar in tab hillter.
    $('.apb-product_tab-header a').on('shown.bs.tab', function() {
        if ( $('#calendar').length ) {
            $('#calendar, #calendar2').fullCalendar('render');
        }
    });

    $('.awe-overlay').each(function() {
        var el = $(this);
        if ( el.parents('.vc_row').length != 0 ) {
            el.parents('.vc_row').css({
              'position': 'relative'
            })  ;
            el.css({
              'position': 'absolute'
            });
        }
    });
});

}）

Answer 1

也许是因为您在每个卷轴上选择了所有内容。

$(window).scroll(function (event) {
    MenuSticky();
});

function MenuSticky() {

    if($('#header_content').length) { //.....
    if($('body').hasClass('admin-bar')) { //....

每次滚动，然后调整大小。你一次又一次地选择一堆元素。这对DOM很重要。最好做点什么。

var $body = $('body'),
    $header_content = $('#header_content');

$(window).scroll(function (event) {
    MenuSticky();
});

function MenuSticky() {

    if($header_content.length) { //.....
    if($body.hasClass('admin-bar')) { //....

还有更多。但这是一般的想法。

Answer 2

<强>解决方案

我们进行了以下步骤：

缩小CSS
将CSS从DOM移至链接文件
启用所有缓存，浏览器和服务器端。改进了JQuery 可能
采取janw的建议，并除了考虑不需要的东西之外

仍然很慢。 3.8s的脚本编写时间很慢。

真正的问题，这个：

该网站具有西班牙语内容，在其中一个传输中，它会显示一个特殊字符已损坏，在Chrome浏览器中生成此输出。在JQuery DOM解析期间，它遇到了这个块，所有的地狱都输了。简单的修复，纠正人物。

最终页面加载时间：Sub 2s。

慢速JQuery CSS布局调用WordPress（强制回流）

2 个答案: