第一段引用上面的摘要：
本文旨在解决PHP页面中耗时函数阻塞页面渲染的问题。通过采用客户端异步加载技术（如AJAX），实现在页面初始加载时先显示主要内容，然后通过异步请求获取耗时函数的结果，并动态插入到页面中，从而显著提升用户体验。
当PHP脚本执行时，服务器会按照代码顺序执行，并将最终结果发送给客户端浏览器。如果脚本中包含耗时较长的函数，比如需要进行大量计算、访问外部API或数据库查询等，那么整个页面渲染会被阻塞，用户需要等待函数执行完毕才能看到完整内容，这会严重影响用户体验。为了解决这个问题，我们需要采用异步加载的策略，将耗时函数的执行放在客户端进行，先显示页面的主要内容，然后通过异步请求获取耗时函数的结果，并动态更新页面。
核心思想：
立即学习“PHP免费学习笔记（深入）”；
将耗时操作从PHP服务器端转移到客户端JavaScript，利用AJAX技术异步获取数据，避免阻塞页面初始渲染。
实现步骤：
-
修改PHP页面结构：
将需要异步加载的内容区域预留一个占位符，例如一个空的
元素，并赋予一个唯一的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 class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/2158" title="拍我AI"><img src="https://img.php.cn/upload/ai_manual/000/000/000/175680310874179.png" alt="拍我AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/2158" title="拍我AI">拍我AI</a> <p>AI视频生成平台PixVerse的国内版本</p> </div> <a href="/ai/2158" title="拍我AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div>创建PHP接口：
创建一个独立的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>注意事项：
- 错误处理： 在AJAX请求中加入错误处理机制，以便在请求失败时能够给出友好的提示。
- 加载指示： 在AJAX请求期间，显示一个加载指示器，例如“正在加载...”或一个动画，提升用户体验。
- 安全性： 确保PHP接口的安全性，避免未经授权的访问和数据篡改。
- CORS： 如果PHP接口和HTML页面位于不同的域名下，需要配置CORS（跨域资源共享）策略，允许跨域请求。
- 数据格式： 建议使用JSON格式进行数据传输，方便客户端解析。
- 替代方案： 除了AJAX，还可以使用fetch API 或 async/await 语法来实现异步加载。
总结：
通过使用异步加载技术，我们可以将耗时操作从服务器端转移到客户端，从而避免阻塞页面初始渲染，提升用户体验。这种方法特别适用于需要执行复杂计算、访问外部API或数据库查询的场景。记住，良好的用户体验是Web应用成功的关键因素之一。
