Question

我首先应该说我是从PHPStorm的内置网络服务器运行我的网站，但我认为问题出在我的方法中，而不是环境。

我正在重新设计过时的游戏网站。我认为通过AJAX加载我的PHP依赖内容而不是包含在只能运行一次的页面顶部是个好主意。

在此示例中，页面加载速度非常快，但有2个部分具有独立的AJAX加载内容，这些内容加载时间异常长。方框内的3条蓝线表示正在加载。

相关的jquery和javascript内容在html正文中，因为该网站使用了一个模板（包含页眉，页脚以及每个页面所需的基本内容），并且只包含中间的唯一页面内容，例如 - 包括＆＃39; main.php＆＃39 ;; index.php没有头部或正文，它只包含js和html。但是，我等到$（document）.ready运行任何javascript，所以我不认为这很重要。

第一个加载是新闻部分，因为它在javascript中首先被调用。这只是从mysql表中获取单个元素。仅此一项需要2秒钟。

接下来是我的时间轴上的最后3条推文，我运行了一个非常高效，简化的Twitter时间线检索PHP脚本，这也需要大约2秒。

另外请考虑我还没有实现getGames.php来从数据库中检索所有必要的游戏信息，广泛的缩略图目前只是占位符，所以总的来说我的网站将需要更长时间来加载所有它的内容。

无论如何，我意识到，如果我只是包括“getTweets.php＆＃39;和＆＃39; getNews.php＆＃39;，原始内容似乎加载得更快，没有必要的ajax。但是，回显的数据会打印在页面上。

问题是，我可能永远不会再在这个特定的页面上调用这些AJAX函数，所以在这个页面上使用AJAX的原因只是一致性和思考，但还有其他页面（新闻部分）例如，我将不得不使用AJAX通过getNews.php获取新闻文章。很明显，我不想拥有两个几乎完全相同的PHP代码的文件，但是我无法看到任何使用AJAX和包含的优雅解决方案。也许我可以有一个很棒的大ajax.php，可以在一次调用中返回所有必要的页面数据，而不是用不同的PHP多次调用AJAX？我不知道......

我确定php代码本身没有任何问题（从数据库中获取推文或新闻都是以效率编写的），只是我的方法。我不打算包含任何代码，我认为它不会让我的问题更容易理解，但无论如何：

index.php，javascript部分：

function ajax(page, inputData, outputHandler, errorHandler) {
    $.ajax({
        type: "POST",
        url: page,
        data: inputData,
        success: function(data){
            outputHandler(JSON.parse(data));
        },
        error:errorHandler
    });
}

$(function() {

        $("#tweet-container").append($.parseHTML(loadingIcon));
        $("#news-container").append($.parseHTML(loadingIcon));

        ajax("/ajax/getNews.php", { }, function(data) {
            $("#news-container").empty();
            for (var i = 0; i < data.length; i++) {
                var date = data[i].dateadded;
                date = $.timeago(date);
                var text = data[i].news;
                text = text.replace(/<br\s*[\/]?>/gi, "\n");
                text = $.trim($(text).text());
                //'+ data[i].author+'
                text = '<img src="/images/Frosty.png" alt="%s" align="left" style="padding:6px 5px; background:pink; margin-right:5px;"/>' + text;
                var title = data[i].title;

                var newsData = { header: date, title:title, content:text };
                var article = Mustache.render(newsTemplate, newsData);
                $("#news-container").append(article);
            }
            $(".news-content").dotdotdot( { height:200 } );
            $($(Mustache.render(footerTemplate, { link:"/news", target:"_self", content:"Read More"} ))).appendTo($("#news-container"));
        } );

        ajax("/ajax/getTweets.php", { count:3 }, function(data) {
            $("#tweet-container").empty();
            for (var i = 0; i < data.length; i++) {
                var text = processTweetURLs(data[i].text);
                var date = $.timeago(data[i].date);

                var tweetData = { header:date, content:text };
                var tweet = Mustache.render(tweetTemplate, tweetData);
                $(tweet).appendTo($("#tweet-container"));
            }
            $(".twitter-content").dotdotdot();
            $($(Mustache.render(footerTemplate, { link:"https://twitter.com/gp_studios", target:"_blank", content:"More Tweets"} ))).appendTo($("#tweet-container"));
        } );

        createGameBoxGrid(GAME_BOX_WIDE, ".featured-games-list", 3, [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
        $(".main-left").height( $(".main-center").height() );

        createGameBoxGrid(GAME_BOX_SMALL, ".main-category-games-list", 9, [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
    } );

getNews.php

<?php
    include($_SERVER["DOCUMENT_ROOT"]."/class/Connection.php");
    $mysql = new Connection();
    $articles = [];
    //SUBSTRING(news,1,1000)
    if ($result = $mysql->query("SELECT id, title, news, author, dateadded FROM news ORDER BY dateadded DESC LIMIT 1")) {
        while ($row = $result->fetch_assoc()) {
            array_push($articles, [ "id"=>$row["id"], "title"=>$row["title"], "news"=>$row["news"], "author"=>$row["author"], "dateadded"=>$row["dateadded"] ] );
        }
    }
    echo json_encode($articles);
?>

我上面写的内容有点像waffley但是有必要了解所有相关信息。因此，用更简单的术语来表达更像是问题：

为什么AJAX与在页面完全加载之前运行它相比如此之慢？
我的AJAX PHP回显了一个很长且经常很复杂的JSON，我如何使用相同的AJAX脚本并包含？我已经尝试围绕div标签中的include（一种我根本不喜欢的方法），但如果json包含html，它会被解释为这样，并且会受到一些损坏。< / p>
任何使这项工作更好的一般提示？

Answer 1

您可能遇到的问题是浏览器限制了到同一服务器的连接数。另请参阅此question on SO。

因此，如果您将代码放在$(document).ready()函数中，实际发生的是DOM准备好了，所以所有图像都开始加载，并且在有可用的连接之前，您的ajax调用将不会通过同一台服务器。

所以你的ajax请求可以很快，但是起步较晚，给人留下长时间通话的印象。

您可以通过将所有静态资产（如图像）放在不同的子域中来解决此问题。

但是，您也可以将用于ajax调用的相同脚本用作包含，这样您就不必重复代码。然后你可以包含它或使用ajax调用它并得到相同的结果。

您可以使用以下内容：

if (!isset($some_enviroment_variable))
{
  // ajax call
  // set up environment
}

// do your php controller stuff

// output the results

页面加载时的多个AJAX请求很慢。不好的方法？

1 个答案: