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

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

DDD

发布： 2025-09-18 22:10:01

原创

353人浏览过

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

第一段引用上面的摘要：

本文旨在解决PHP页面中耗时函数阻塞页面渲染的问题。通过采用客户端异步加载技术（如AJAX），实现在页面初始加载时先显示主要内容，然后通过异步请求获取耗时函数的结果，并动态插入到页面中，从而显著提升用户体验。

当PHP脚本执行时，服务器会按照代码顺序执行，并将最终结果发送给客户端浏览器。如果脚本中包含耗时较长的函数，比如需要进行大量计算、访问外部API或数据库查询等，那么整个页面渲染会被阻塞，用户需要等待函数执行完毕才能看到完整内容，这会严重影响用户体验。为了解决这个问题，我们需要采用异步加载的策略，将耗时函数的执行放在客户端进行，先显示页面的主要内容，然后通过异步请求获取耗时函数的结果，并动态更新页面。

核心思想：

立即学习“PHP免费学习笔记（深入）”；

将耗时操作从PHP服务器端转移到客户端JavaScript，利用AJAX技术异步获取数据，避免阻塞页面初始渲染。

实现步骤：

修改PHP页面结构：

将需要异步加载的内容区域预留一个占位符，例如一个空的zuojiankuohaophpcndiv>元素，并赋予一个唯一的ID。

<div id='part1'>
    <p>这里是内容的第一部分</p>
</div>
<div id='part2'>
    <p>内容第二部分</p>
    <div id="async-content">
        <!-- 这里将通过AJAX动态插入内容 -->
    </div>
</div>
<div id='part3'>
    <p>这里是内容的第三部分</p>
</div>

登录后复制

创建PHP接口：

度加剪辑

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

查看详情

创建一个独立的PHP文件（例如get_long_function_data.php），该文件包含耗时函数，并返回JSON格式的数据。

<?php
// get_long_function_data.php

function long_function() {
    // 模拟耗时操作
    sleep(5);
    $data = "这是耗时函数 long_function() 的结果";
    return $data;
}

$result = long_function();
$response = array("data" => $result);
header('Content-Type: application/json');
echo json_encode($response);
?>

登录后复制

编写JavaScript代码：

使用JavaScript和AJAX来异步调用PHP接口，获取数据，并将数据插入到占位符中。这里使用jQuery库简化AJAX操作。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $.ajax({
        url: "get_long_function_data.php",
        type: "GET",
        dataType: "json",
        success: function(response){
            $("#async-content").html(response.data);
        },
        error: function(xhr, status, error){
            console.error("AJAX请求失败: " + status + " - " + error);
            $("#async-content").html("加载数据失败，请稍后重试。");
        }
    });
});
</script>

登录后复制

完整示例代码：

将以上代码整合到一个完整的HTML文件中：

<!DOCTYPE html>
<html>
<head>
    <title>异步加载示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id='part1'>
        <p>这里是内容的第一部分</p>
    </div>
    <div id='part2'>
        <p>内容第二部分</p>
        <div id="async-content">
            <!-- 这里将通过AJAX动态插入内容 -->
            正在加载数据...
        </div>
    </div>
    <div id='part3'>
        <p>这里是内容的第三部分</p>
    </div>

    <script>
    $(document).ready(function(){
        $.ajax({
            url: "get_long_function_data.php",
            type: "GET",
            dataType: "json",
            success: function(response){
                $("#async-content").html(response.data);
            },
            error: function(xhr, status, error){
                console.error("AJAX请求失败: " + status + " - " + error);
                $("#async-content").html("加载数据失败，请稍后重试。");
            }
        });
    });
    </script>
</body>
</html>

登录后复制

注意事项：