jquery - WordPress 上缓慢的 JQuery CSS 布局调用(强制回流)

Question

我们目前在运行某些自定义调整大小/布局功能的 WordPress 主题方面存在性能问题。它们主要与随屏幕滚动的“粘性”菜单有关，在屏幕滚动或调整窗口大小时调用。禁用它们会立即解决问题，但会使主题无法使用，因为当您调整大小时或滚动时，菜单不再响应(如预期)

总而言之，它们可能需要 3.5 秒以上的时间才能完成，并且会对用户体验产生重大影响。在 Google Chrome 中，向下钻取最终将我们引向这里:

更多信息:

• 性能问题仅在 Google Chrome 上很明显。没有其他浏览器受到影响。
• 该站点没有推送任何代码更改，性能缓慢下降并且“卡顿”成为一个问题。
• 这个问题在服务器代码开发期间很明显当前驻留在(服务器 Alpha)上，代码被移动到另一个完全独立的集群(服务器测试版)，问题立即消失。上的相同代码其他服务器(服务器测试版)此时在类似测试中没有相同的问题。
• 网站托管在 Apache(服务器 Alpha)上，PHP5 版本稍旧。资源上未启用缓存，例如CSS
• 调用是来自“hillter”主题的 MenuResize() 和 MenuSticky()。
• 主要时间花在编写脚本上，而不是绘画上，主要用于分解时间。

可能的原因:

以下是我的一些最佳猜测:

• 未显示相同问题的开发托管站点(服务器测试版)从网络和处理能力的 Angular 来看要优越得多。它在物理上也更接近我们。缓慢的调用是否有可能每次都通过网络从当前托管服务器(服务器 Alpha)拉取 CSS(因为缓存被禁用)，而我们看到的缓慢时间实际上是 JQuery 脚本再次检索 CSS？

代码:

/*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')) { //....

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