如何进行快速的 ajax 实时搜索答案

【问题标题】：How to make a fast ajax live search如何进行快速的 ajax 实时搜索
【发布时间】：2014-02-26 20:35:36
【问题描述】：

您好，我正在尝试进行 ajax 实时搜索。它可以工作，但我希望它快点。目前我正在通过 php 处理 html，但即使我将处理更改为 js 并且只从 php 获取数据，它也只会将我的搜索时间从 2.1 秒提高到 1.8 秒（这是请求时间，但需要 4/5 秒让数据出现）

这是我的代码：

$("#searchfield").change(function() {
    term = $(this).val();
    if (searchReq != false) {
    searchReq.abort();
    }
    searchReq = $.get("/searchModal.php", {
        term : term
    }).done(function(data) {
        $("#liveSearch").html(data);
    });

});

编辑：

php代码：

搜索.php：

$files = filecontroller::search($term);

文件控制器：

public static function search($term, $by = false, $order = false) {
    connection::connect();

    $files = ($by && $order && validation::filesOrder($by, $order)) ? file::Search($term, $by, $order) : file::Search($term);

    return $files;
}

文件模型：

public static function Search($term, $by = 'date', $order = 'DESC') {

    $session_id = $_SESSION["user_id"];
    $term = mysql_real_escape_string($term);
    $query = mysql_query("SELECT * FROM files WHERE idUser = '$session_id' AND (name LIKE '%$term%' OR description LIKE '%$term%') ORDER BY $by $order");

    $files = self::CreateFromDb($query);
    return $files;

}

private static function CreateFromDb($query) {
    GLOBAL $imgDir; // just get the img dir from a config file
    GLOBAL $userDir; // same
    $files = array();
    while ($row = mysql_fetch_assoc($query)) {

        $file = new File();
        $file -> type = $row['type'];

        $file -> idFile = $row['idFile'];
        $file -> user = $row['idUser'];
        $file -> gallery = $row['idGallery'];
        $file -> name = htmlspecialchars($row['name']);
        $file -> description = htmlspecialchars($row['description']);
        $file -> date = $file -> timecheck($row['date']);
        $file -> size['kb'] = $row['size'];
        $file -> galleryName = Gallery::getName($file -> gallery);

        $files[] = $file;
    }

    return $files;
}

还有什么可以改进的吗？我在本地测试。

【问题讨论】：

听起来您的搜索查询速度较慢。您是否对这些进行了基准测试？
任何超过 1 秒的响应时间都意味着您在后端做错了什么，或者您的连接/托管/基础设施很糟糕。
你可以使用 Chrome 中的时间线和网络分析工具，例如，看看这个巨大的延迟是从哪里引入的。如果你在同一台机器上运行所有东西，它应该是 searchModal.php 由于某种原因很慢。请提供代码。
使用任何现代网络浏览器（IE8 及更高版本），您都需要打开开发者工具，找到网络选项卡并激活 AJAX 调用，以查看您遇到的网络延迟类型。既然你说这是本地主机，那么问题在于你的 PHP 脚本。
谢谢，我添加了 php 代码。在 chrome 上等待 2.20 秒，我使用 opera 进行调试，同样。

标签： php ajax search get live

【解决方案1】：

您的代码存在一些问题，但没有什么明显的问题。

一些起点：

找出慢的最好方法可能是检查profiling in PHP。
另一件事是您正在使用LIKE "%x%"，如果您的用户有很多文件，这会很慢（似乎不太可能，但谁知道）。检查 MySQL 慢查询日志。
您也在做一些磁盘访问，但它也不应该这么慢 - 除非在 Gallery::getName 或 timecheck 内部发生了奇怪的事情。
请注意，mysql 扩展名已被弃用。不过，这与速度无关，只是已经过时了。

【讨论】：

感谢您的提示。为什么要访问磁盘？ getName 只是得到一个 bd 名称（画廊只是一个伪文件夹），altrought 它做另一个查询，但我可以t get ride of it. Il 尝试分析，以前没有听说过这个技术。我会尝试检查请求是否也及时发出，因为启动请求需要很长时间（看起来它在 0ms 冻结了几秒钟），也许是一些 apache 或防病毒（localhost）问题？
如果您在本地运行整个程序，数据库很小，等等，防病毒软件实际上可能会减慢连接速度。好主意。

【解决方案2】：

回答

.change 有延迟，为了实时结果最好使用 .keyup。我只在用户停止输入时才使用超时来发出请求：

var searchTimeout;
var searchReq;

$("#searchfield").on('keyup', function() {
    term = $(this).val();

    if (searchTimeout) {
        clearTimeout(searchTimeout);
    }
    if (searchReq) {
        searchReq.abort();
    }

        searchTimeout = setTimeout(function(){
        if (term.length > 2) {
            searchController(term).then(function(data) {
            $("#liveSearch").html(data);
            });
        }
        else {
            $("#liveSearch").html("");
        }
    },500);

});

function searchController(term) {
    searchReq = $.ajax({
        type : "GET",
        url : "/searchModal.php",
        data : {
            term : term
        },
        async : true,
        context : this,
        beforeSend : function() {
        },
        complete : function() {

        }
    });
    return searchReq;

}

与 facebook 和其他大型网站相比，它仍然很慢。我想快速访问它的唯一方法是使用出色的服务器或缓存结果（我试图只回显一个没有 bd 请求的字符串，而且速度也很慢）。

【讨论】：