Javascript 为什么我的管理ajax与其他也使用它的网站相比速度如此之慢？

如果您将鼠标悬停在其中一个项目上并单击加号图标，Ajax调用将发出，响应将在平均1-4秒后返回。我不明白为什么它比同样使用

admin ajax.php

（试着悬停/点击该站点上的一个项目进行比较）的应用程序要慢。Ajax调用的所有图像都经过了优化。我还优化了我的数据库表。我不知道我还能做什么

下面是两个站点的

admin ajax.php

响应时间的比较。如您所见，另一个站点需要480ms，而我的站点需要2s：

下面是如何设置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);

---

有人认为我应该做些不同的事情吗？

我能提个建议吗

不要像这样定义函数：

(function($) 

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

   $('selector').whatever();

  })

试着这样做：

(function($) 

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

   $('selector').whatever();

  })

---

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

看起来您的网站是在dreamhost上托管的，很可能是在他们提供的共享托管服务上托管的。你提到的另一个网站看起来像是由自己的VPS托管的。共享主机通常以其缓慢的数据库性能而闻名

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

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

---

另一个选择是尝试在数据库上创建索引，以加快搜索速度。如果您知道如何安装Apache/mysql等，也可以考虑使用小型VPS（AmazonEC2免费层或digital ocean每月5美元等）。我想建议您，与其从php文件中回显HTML代码，不如返回主数据（仅基于点击的原始信息）作为json响应，然后根据该响应生成html标记并附加它。从javascript创建HTML比回显HTML快得多，特别是在ajax调用期间。我相信如果你这样做，你可以得到相当快的性能。任何大型或大型网站，他们都不会发送ajax响应中的HTML。主要是包含关键信息的纯json响应。在此基础上，生成div以更快地加载节。

在这种情况下，问题在于服务器端代码。您的硬件是什么样的？这是唯一一个速度慢的页面还是网站感觉很慢？@Kami该网站实际上只是在等待Ajax响应加载单个项目时速度慢。特别是根据PageSpeed的“TTFB”。页面本身很好。通过“硬件”，你是在问我关于我的主机的问题吗？你能减少你的图像大小，比如优化，这样可以加快你的网站，查看链接了解更多信息。这只是一个建议，我并不是说这是真正的原因。你只是在重复：-//当点击一篇文章时，将所有文章变成灰色$（'article.project'）。addClass（'grayscale grayscale fade grayscale sticky'）。css（'opacity'，'0.4'）；删除其中一个并缩短动画制作的时间限制。如果成功，请在调整大小之前放置所有removeClass代码。希望它能减少一些时间。这对我来说很有意义，但我该如何开始呢？我以前从未使用过JSON。如何从JS创建HTML模板？它会出现在Ajax成功回调中吗？在php文件中，您会将数据放在一个键值对的变量中。例如：$data['first_name']=$row['first_name']$数据['last_name']=$row['last_name']；现在使用echo$data变量：echo json_encode（$data）；现在在json调用结束后：javascript:success:function（response）{//这里只是var obj=jQuery.parseJSON（response）；alert（obj.name）；//name是键，然后您可以使用var boxhtml=''+obj.name+''生成html；并使用$（'.container'）.html（boxhtml）将其附加到div中；我不确定我是否理解，但我会尽力解决。此外，在PHP文件中，我尝试删除

my_load\u ajax\u content（）中的所有内容

函数，但Ajax响应时间是相同的。这难道不意味着使用JSON不会影响它，还有其他问题吗？不，不。问题是生成HTML内容然后在Ajax响应中回显它需要花费太多时间。我使用这种仅呈现数据的技术对许多站点进行了优化在HTML中设置它，性能会大大提高，但是如果我删除了

my\u load\u ajax\u content（）

（要测试）中的内容，这意味着没有HTML可生成。那么为什么ajax响应仍然需要相同的时间呢？