优化页面加载速度：先显示部分内容，再异步加载耗时函数结果-php教程-PHP中文网

优化页面加载速度：先显示部分内容，再异步加载耗时函数结果

霞舞

发布： 2025-09-18 22:20:00

原创

803人浏览过

优化页面加载速度：先显示部分内容，再异步加载耗时函数结果

摘要

本文将探讨如何优化网页加载体验，特别是在页面包含需要较长时间执行的函数时。我们将介绍一种利用 AJAX 技术，先快速呈现页面的主要内容，然后异步加载耗时函数结果的方法，有效提升用户感知速度和整体用户体验。这种策略避免了用户长时间的空白等待，使页面交互更加流畅。

正文

传统的 PHP 页面渲染方式是服务器端完全执行完毕后，才将整个页面发送给浏览器。这意味着如果页面中包含一个耗时较长的函数，用户必须等待该函数执行完毕后才能看到任何内容。这种体验非常糟糕。为了解决这个问题，我们可以采用先显示部分页面内容，然后异步加载耗时函数结果的策略。

使用 AJAX 实现异步加载

核心思想是利用 AJAX (Asynchronous JavaScript and XML) 技术。 AJAX 允许我们在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。具体步骤如下：

初始页面加载： 页面加载时，先渲染并显示不需要等待耗时函数结果的部分。
客户端发起 AJAX 请求： 使用 JavaScript (例如，使用 jQuery 的 $.ajax() 方法) 向服务器端发起一个请求，请求执行耗时函数并返回结果。
服务器端处理请求： 服务器端接收到 AJAX 请求后，执行耗时函数，并将结果以 JSON 或 HTML 格式返回给客户端。
客户端更新页面： 客户端接收到服务器端返回的结果后，使用 JavaScript 将结果插入到页面中预留的位置。

代码示例

以下是一个简单的示例，展示了如何使用 AJAX 实现异步加载：

HTML (index.php):

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

<!DOCTYPE html>
<html>
<head>
    <title>异步加载示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $.ajax({
                url: "long_function.php", // 请求处理耗时函数的 PHP 文件
                type: "GET",
                dataType: "html", // 期望返回 HTML 格式的数据
                success: function(data){
                    $("#part2").html(data); // 将返回的数据插入到 id 为 "part2" 的元素中
                },
                error: function(xhr, status, error) {
                    console.error("AJAX 请求失败: " + status + " - " + error);
                    $("#part2").html("<p>加载数据失败，请稍后重试。</p>"); // 显示错误信息
                }
            });
        });
    </script>
</head>
<body>
    <div id='part1'>
        <p>这里是页面第一部分内容</p>
    </div>
    <div id='part2'>
        <p>正在加载数据...</p>
    </div>
    <div id='part3'>
        <p>这里是页面第三部分内容</p>
    </div>
</body>
</html>

登录后复制

PHP (long_function.php):

<?php
// 模拟一个耗时较长的函数
function long_function() {
    sleep(3); // 模拟 3 秒的延迟
    $part2_content = "<p>这是从耗时函数返回的内容。</p>";
    return $part2_content;
}

echo long_function();
?>

登录后复制

解释：