Question

Here is my site.

如果将鼠标悬停在其中一个项目上并单击加号图标，则Ajax调用将消失，响应平均返回1-4秒。我不理解为什么它比使用admin-ajax.php的{{3}}慢得多（尝试将该网站上的某个项目悬停/点击进行比较）。 Ajax调用的所有图像都经过优化。我还优化了我的数据库表。我不确定我还能做些什么。

以下是两个网站的admin-ajax.php响应时间的比较。正如您所看到的，另一个站点需要480毫秒，而我的需要2秒：

enter image description here

以下是我设置Ajax调用的方法。对不起，我没有简化代码，因为我认为延迟的原因只能在完整的代码中找到。实际的Ajax调用大约是一半。

(function($) {

    // Function to allow an event to fire after all images are loaded
    $.fn.imagesLoaded = function () {

        var imgs = this.find('img[src!=""]');

        // If there are no images, just return an already resolved promise
        if (!imgs.length) {
            return $.Deferred().resolve().promise();
        }

        // For each image, add a deferred object to the array which resolves when the image is loaded
        var dfds = [];
        imgs.each(function(){

            var dfd = $.Deferred();
            dfds.push(dfd);
            var img = new Image();
            img.onload = function(){dfd.resolve();};
            img.src = this.src;

        });

        // Return a master promise object which will resolve when all the deferred objects have resolved
        // IE - when all the images are loaded
        return $.when.apply($, dfds);

    };

    // Function for additional styling
    function projectStyles() {

        // Check the first slide input
        $('#slider input:first').attr('checked', 'checked');

        $('#project-wrapper').addClass('activated');

        // Make the articles grey again after activation
        $('article.project').addClass('grayscale grayscale-fade').css('opacity', '0.4');

        // CSS effects
        $('.post-container').addClass('fadeInUp');
        $('.close-button').addClass('fadeInDown');

        // Remove pesky, sticky 'hover' class
        $('article.project').removeClass('hover');
    }

    // Make the max-height of the container exact for a smoother transition
    function matchContainerHeight() {
        var heightHandler = function() {
            var containerHeight = $('#project-container').outerHeight();
            $('#project-wrapper.activated').css('max-height', containerHeight);
        };
        setTimeout(heightHandler, 100);
        $(window).on('resize', heightHandler);
    }

    // Open the project container
    function openProject() {

        var post_id = $(this).data('id'), // data-id attribute for .post-link
            ajaxURL = site.ajaxURL; // Ajax URL localized from functions.php

        // Add a loading icon
        $('<span class="loading-icon"></span>').insertBefore(this);

        // Add the 'active' class to make sure the div stays dark while loading
        $(this).closest('article.project').addClass('active hover-sticky');

        // Make all the articles grey when an article is clicked
        $('article.project').addClass('grayscale grayscale-fade grayscale-sticky').css('opacity', '0.4');

        // No hover on images while a project is loading
        $('article.project img').addClass('nohover');

        // Remove all corner ribbons
        $('article').removeClass('current');
        $('.corner-ribbon').remove();

        // Add a corner ribbon to note the current activated project
        $(this).closest('article.project').removeClass('active').addClass('current');
        $('<div class="corner-ribbon">Current</div>').prependTo('article.current');

        // Call Ajax
        $.ajax({
            type: 'POST',
            url: ajaxURL,
            data: {'action': 'load-content', post_id: post_id },
            success: function(response) {

                // Wait until all images are loaded
                $('#project-container').html(response).imagesLoaded().then(function() {

                    // Fire again to rearrange the slide in the DOM
                    resize();

                    // Remove all 'hover' classes
                    $('article.project').removeClass('hover-sticky grayscale-sticky');
                    $('article.project img').removeClass('nohover');

                    // Remove the loading icon
                    $('.loading-icon').remove();

                    // If the user has scrolled...
                    if ($(window).scrollTop() !== 0) {

                        // First scroll the page to the top
                        $('html, body').animate({
                            scrollTop : 0
                        },400, function() {

                            matchContainerHeight();
                            projectStyles();

                        });

                    // If the user has not scrolled...
                    } else {

                        matchContainerHeight();
                        projectStyles();

                    }

                    return false;
                });
            }
        });
    }

    // User event
    $('#content').on('click', '.post-link', function(e) {
        e.preventDefault();

        var projectTitle = $(this).data('title'), // data-title attribute for .post-link
            projectSlug = $(this).data('slug'); // data-slug attribute for .post-link

        // Calls openProject() in context of 'this' (.post-link)
        openProject.call(this);

        $('head').find('title').text(projectTitle + ' | Keebs');
    });

})(jQuery);

这是Ajax响应文件。我使用的是ACF插件，但我尝试了没有任何ACF字段的响应，等待时间也是一样的。我也尝试删除my_load_ajax_content()函数中的所有内容，但等待时间仍然相同。所以我猜其他东西导致漫长的等待时间。我也尝试过GET而不是POST，但响应时间大致相同：

<?php
/**
 * Ajax functions
 */

// Return the post content to the AJAX call
function my_load_ajax_content () {

    $args = array(
        'p' => $_POST['post_id'],
        'post_type' => 'projects'
        );

    $post_query = new WP_Query( $args );
    while( $post_query->have_posts() ) : $post_query->the_post(); ?>

    <div class="post-container">
        <div id="project-left-content">
            <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
            <?php the_content(); ?>

            <?php if( get_field('client') ): ?>
                <div class="client">
                    Client(s): <?php the_field('client'); ?>
                </div>
            <?php endif; ?>

            <div class="project-cats">
                <?php
                    $cat_names = wp_list_pluck( get_the_category(), 'cat_name');
                    echo join( ', ', $cat_names );
                ?>
            </div>

            <?php if( get_field('url') ): ?>
                <div class="project-link">
                    <a class="first after" href="http://<?php the_field('url'); ?>" target="_blank"><?php the_field('url'); ?></a>
                </div>
            <?php endif; ?>
        </div>
        <div id="project-right-content">

            <?php if( have_rows('slides') ): ?>

                <div id="slider">

                    <!-- Slider Setup -->
                    <?php if( have_rows('slides') ):
                        $slideNumber = 0;
                        while ( have_rows('slides') ) : the_row();
                        $slideNumber++;
                    ?>

                        <input type="radio" name="slider" id="slide<?php echo $slideNumber; ?>">

                    <?php endwhile;endif; ?>

                    <!-- Slide -->
                    <?php if( have_rows('slides') ): ?>
                        <div id="slides">
                            <div id="overflow">
                                <div class="inner">

                                    <?php if( have_rows('slides') ):
                                    while ( have_rows('slides') ) : the_row();

                                        $slideImage = get_sub_field('slide_image');
                                    ?>

                                    <article>
                                        <img src="<?php echo $slideImage; ?>" alt="<?php the_title(); ?>">
                                    </article>

                                    <?php endwhile;endif; ?>

                                </div><!-- #inner -->
                            </div><!-- #overflow -->
                        </div><!-- #slides -->

                    <?php endif; ?>

                    <!-- Controls -->
                    <?php if( have_rows('slides') ):
                        $slideNumber = 0;
                    ?>
                        <div id="active">

                            <?php while ( have_rows('slides') ) : the_row();
                                $slideNumber++;
                            ?>
                                <label for="slide<?php echo $slideNumber; ?>"></label>
                            <?php endwhile; ?>

                        </div><!-- #active -->
                    <?php endif; ?>
                </div><!-- #slider -->
            <?php endif; ?>
        </div><!-- #project-right-content -->
    </div><!-- .post-container -->

    <?php
    endwhile;
    wp_die();
}

add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' ); // when the user is logged in
add_action ( 'wp_ajax_load-content', 'my_load_ajax_content' ); // when the user is not logged in

有人看到我应该采取不同的做法吗？

Answer 1

看起来您的网站托管在dreamhost上，而且最有可能是他们拥有的共享托管服务。您提到的其他网站看起来像是在自己的VPS上托管。共享托管通常因其数据库性能较慢而闻名。

您最好的选择可能是使用“WP Super Cache”或“W3 Total Cache”等缓存解决方案，在第一次请求时将网页保存到内存或磁盘，然后在绕过数据库的后续请求中提供服务。

这些都是wordpress插件，可以从admin插件部分轻松安装。

https://wordpress.org/plugins/wp-super-cache/ https://wordpress.org/plugins/w3-total-cache/

其他选项是尝试在数据库上创建索引以加快搜索速度。如果您知道如何安装Apache / mysql等，您还可以使用小型VPS（AmazonEC2免费套餐或5美元/月数字海洋等）。

Answer 2

我想建议你，而不是从你的php文件中回显HTML代码，你只需将主要数据（只有基于点击的原始信息）作为json响应返回，然后根据它生成html标签并附加它。从javascript创建HTML比回显HTML要快得多，特别是在ajax调用期间。我相信如果你这样做，你可以获得相当快的性能。任何大型或大型网站，他们不会在ajax响应中发送HTML。回应了包含关键信息的主要纯json响应。并且在此基础上生成div以更快地加载该部分。

Answer 3

我可以提出建议吗？

而不是像这样定义你的函数：

(function($)

尝试这样的事情：

jQuery(document).ready(function($) {

   $('selector').whatever();

  })

我自己还在学习Wordpress，但我发现将函数定义为使用jQuery可以有所作为。我认为这是因为Wordpress不确定您要使用哪个库。

与其他使用它的网站相比，为什么我的admin-ajax这么慢？

3 个答案: