我想知道是否有一种方法可以故意减慢页面加载速度？
我正在本地主机上测试我的HTML和PHP页面，我想看看当页面加载变慢时我的加载动画等等表现如何。
我意识到这是一个罕见的请求，因为大多数开发人员只关注加速页面加载，但我认为可能有一种方法，使用JavaScript/jQuery或PHP来进行此类测试。
谢谢任何帮助！
注意：我正在MAMP上进行测试，因此是在Mac OS 10.7上运行的Apache服务器。
有意减慢HTML/PHP页面加载速度以进行测试
43
- stefmikhail
4
6好的，你可以用3200波特的调制解调器替换你的网络连接... - Blazemonger
如果您想要减缓每个请求（包括图像），则必须在服务器或操作系统级别上进行设置；您使用的是哪个服务器/操作系统？ - Arnaud Le Blanc
@mblase75 - 给你点赞和赞赏，因为你有一种非常犀利的幽默感 ;) - stefmikhail
@arnaud576875 - 我正在使用MAMP，因此这是Apache和Mac OS 10.7。 - stefmikhail
8个回答
17
你可以使用php的sleep($seconds)函数来延迟页面加载。但是，如果想在页面处理完成前向用户的浏览器发送任何内容，你需要使用ob_implicit_flush(true);打开隐式输出缓冲区刷新，否则你的页面在加载完成之前不会有任何内容。仅调用sleep是行不通的。
- Cyclone
3
2非常好的答案。我会查看你提供的链接。我相信这个问题在链接中有答案，但是
ob_implicit_flush(true);是php.ini的一部分吗？ - stefmikhail没关系，我应该先检查链接。它在PHP文件本身中被称为。谢谢，我会尝试一下！ - stefmikhail
没问题！让我知道进展如何。 - Cyclone
16
在Chrome中，您可以使用开发人员工具模拟缓慢的互联网连接。该工具位于最右侧的“网络”选项卡下。您可以使用预设值例如“快速G3”，也可以创建自己的上传、下载和ping的确切数值。
参考：https://helpdeskgeek.com/networking/simulate-slow-internet-connection-testing/
- Nicolo Lüscher
1
1Firefox在“网络”下有类似的设置。默认情况下，会出现一个下拉菜单，显示“无限制”，但你可以选择其他选项来有意地减缓页面速度。 - Kiko
3
这是我会尝试的方法：
使用php资源作为图像的来源：
在gifLoader.php中，读取您的图像文件，在循环中以字节为单位输出它，并设置延迟。
使用Chrome的“设备模式”：此工具具有网络调节功能，可让您查看页面在带有慢网络带宽的设备上如何呈现。 它还具有许多其他功能，允许您模拟各种设备上的功能，例如屏幕大小和触摸。
https://developer.chrome.com/devtools/docs/device-mode
<img src="images/gifLoager.php" />
在gifLoader.php中，读取您的图像文件，在循环中以字节为单位输出它，并设置延迟。
$fp = fopen( $path, 'rb');
while(!feof($fp)) {
print(fread($fp, 1024));
flush();
Sleep(1);
}
fclose($fp);
在输出二进制数据之前，不要忘记适当地设置头部信息。
参考资料：
https://dev59.com/HUnSa4cB1Zd3GeqPQ8lz
http://php.net/manual/en/function.sleep.php
http://www.gamedev.net/topic/427622-php-and-file-streaming-script-with-resume-capability/
使用Chrome的“设备模式”：此工具具有网络调节功能，可让您查看页面在带有慢网络带宽的设备上如何呈现。 它还具有许多其他功能，允许您模拟各种设备上的功能，例如屏幕大小和触摸。
https://developer.chrome.com/devtools/docs/device-mode
- xtrem
4
这听起来是一种非常有创意的方法，我很喜欢。但我想知道：这样做不会延迟加载 loader gif 图像本身吗？我想通过延迟页面内容的加载来测试 loader gif 和其他加载设置；而不是 loader gif 本身的加载。然而，我认为我可以轻松地更改您的代码以延迟页面上一个或多个图像的加载；从而延迟页面加载并演示 loader gif 等。我是对的吗？ - stefmikhail
1你说得对。我想我误解了你的问题。我的答案更偏向于延迟图像的加载。不过，你可以使用相同的概念来处理任何其他资源。这显然是一种hack方法。更好的方法是使用“网络仿真器”。这样的工具非常常见，它们允许您模拟低带宽网络。请参见：https://dev59.com/w3NA5IYBdhLWcg3wF5uO。 - xtrem
谢谢。我已经调查过了，除非我弄错了，你提供的链接中没有任何资源适用于Mac。你知道有什么好的开源网络仿真器吗？你知道MAMP中是否有一种方法或者MAMP的插件可以模拟慢速网络连接或高流量吗？ - stefmikhail
请查看此帖子中提供的资源：https://dev59.com/mnVC5IYBdhLWcg3w-WSs - xtrem
2
稍微使用一点JS的setTimeout就可以解决问题。
setTimeout(function()
{
// Delayed code in here
alert('You waited 5 seconds to see me'); // Waits 5 seconds, then alerts this
}, 5000); // 5000 = 5 seconds
- Joe
5
1有个名字和我差不多的人同时回答这个问题，感觉有点毛骨悚然，哈哈。 - Joel A. Villarreal Bertoldi
@Joe - 如果它能正常工作，这似乎是最简单的方法。我应该将
setTimeout()包裹在什么里面？ - stefmikhail当然可以:P 将它放在
<script type="text/javascript">CODE HERE</script>中，然后将任何想要延迟的内容放在“Delayed code in here”注释所在的位置。请参见修改后的帖子以获取基本示例。例如，您可能默认情况下已经显示了加载GIF，因此将隐藏代码放在超时内，它将等待5秒钟，然后隐藏您的加载GIF。 - Joe@Joe - 哦，我明白你的意思了。这只是延迟了加载gif的移除，它并没有真正地模拟缓慢的页面加载，对吧？ - stefmikhail
这真的取决于你如何设置它 :) 如果你有在页面加载时运行的JS，你可以将其放在延迟内，然后稍后执行。如果你想要延迟PHP脚本完成，那么你需要像Cyclone提到的那样使用
sleep。两种方法都是正确的，只是看你想怎么做 :) - Joe1
你可以使用sleep()：
<?php
// Delays for 10 seconds.
sleep(10);
?>
...
html here
...
- Joel A. Villarreal Bertoldi
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接