我有一个非常大的网站，加载需要很长时间。大约需要 120 秒。我想要做的是加载网站的第一半加载第一。然后用户可以在加载其他部件的同时冲浪。
我想要做的是下面。
- 首先，这可能吗？
据我所知，是的，因为 Google PageSpeed 就是这样做的。但问题是，如果我使用 PageSpeed，我将不得不更改我的 DNS 服务器设置等。我想自己做这件事。
- 我怎样才能完成它？
- 我应该使用什么类型的技术？
鉴于页面具有.php扩展名并用 PHP 语言编写。
问问题
4824 次
14 回答
19
您可以使用延迟加载的概念。
您可以仅加载加载过程中需要的内容，然后使用 jquery 和 ajax 加载剩余的内容。
通过这种方式，用户可以轻松地浏览并与已加载的部分进行交互，而另一部分将异步加载。
一个简单的例子可能是，
如果你的页面内容有5个部分，需要立即加载2个
该页面将加载 2 个部分，因此加载时间比加载 5 个部分要少得多
加载文档后，您将使用 ajax 加载剩余的 3 个部分。Ajax 将使用一些参数向您网站的特定页面（可能命名为 AjaxRequestHandler.php）发送请求，该页面将处理您的请求并为此生成 html 并将其发送回您的主页，该主页将显示此返回的 html 并且这一切都是异步发生的，因此用户将能够与最初加载的 2 个部分进行通信
而且即使你是 Web 技术的新手，我想你也必须具备至少 ajax 和异步调用等方面的知识才能实现延迟加载。
编辑 ：
对于你的这个问题
除了 AJAX 有没有办法解决这个问题？
我认为如果他们可以提供帮助，您可以尝试 iframe。
在页面加载后加载页面中的主要内容而不加载 iframe，而在 iframe 中加载其他内容。
这个 jsFiddle
jsfiddle.net/cGDuV/
可以帮助您了解使用 iframe 进行延迟加载，在stackoverflow的这篇文章中提到。
如果你想避免使用 jquery，你可以使用 javascript。
于 2013-02-04T06:15:35.807 回答
9
您可以操纵输出缓冲区，使其尽早刷新，从而实现您在问题中发布的屏幕截图中的内容。 http://www.stevesouders.com/blog/2013/01/31/http-archive-adding-flush/
您可以延迟加载所有图像。这是一个 jquery 插件，可以轻松完成 http://www.appelsiini.net/projects/lazyload
您可以将所有 js 合并到一个文件中。与您的 css 文件相同。这将有助于提高速度。
您可以合并缓存、过期标头和 gzip/deflate 压缩 https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
我建议您以非阻塞异步方式加载您的 3rd 方 javascript 小部件垃圾（Google+ 按钮、类似按钮的 fabebook、社交、Twitter 的东西），这样它就不会在开始时减慢页面速度。 http://css-tricks.com/thinking-async/
尽可能优化您的图像。 http://kraken.io/
使用 CDN http://www.maxcdn.com/
最后测试您的网站，看看哪里是最大的瓶颈，以及您可以在哪里改进网站以优化速度。使用瀑布图功能 http://www.webpagetest.org/
于 2013-02-14T19:33:52.503 回答
3
您可以做的一件事是正常加载页面的所有基本内容（上半部分），然后使用 javascript/ajax 加载页面的后半部分。这是一种非常常见的技术（通常用于加载图像）。
这是 jQuery for Designers 的优秀教程，介绍了如何在页面加载后使用 jQuery 异步加载图像。http://jqueryfordesigners.com/image-loading/
话虽如此，两分钟的加载时间似乎非常过长。也许您应该检查是否有任何东西可能会降低您的服务器速度。
于 2013-02-04T06:15:04.677 回答
3
您需要确定网站加载缓慢的原因。您发送的数据大小是多少？Google 和 Firefox 拥有 Web 开发人员工具，可帮助您确定哪些元素的加载时间最长。一旦确定了罪魁祸首，请尝试异步加载最严重的违规者。
查看这篇关于异步请求的文章：https ://segment.io/blog/how-to-make-async-requests-in-php/
于 2013-02-12T16:29:31.007 回答
3
在我看来，你需要一个无尽的滚动解决方案。也就是说，每个“页面”的内容量是固定的（估计值可能是 1500 像素的高度）。当用户向下滚动一定量时，使用 jQuery 加载另一个“页面”。
如果您真的想无条件加载所有内容，只需使用相同的方法，并在文档准备好时触发下一页加载。循环页面加载器，直到加载整个内容。这样，您加载第一个“页面”，并将“首屏下方”的内容推迟到后续请求。
于 2013-02-18T15:04:37.363 回答
2
您想要的是 Facebook 所做的Bigpipe，这是一个相关的 SO 帖子：Facebook Bigpipe 技术算法
还有其他涉及各种 Javascript 的解决方案，但由于您希望PHP和 Facebook 使用PHP，您应该阅读 Bigpipe。Juho 甚至有一个用 PHP 编写的示例，因此应该可以满足您的 PHP 要求（但是是的，它仍然需要 js 而不是 AJAX）。
于 2013-02-19T01:44:39.387 回答
2
预取资源网页需要加载大文件的资源通常可以从更改从服务器请求这些文件的顺序中受益。有时，在需要之前下载文件是有意义的，以便在请求后立即可用。当可以提前加载页面所需的资源时，可以显着减少甚至消除该页面的用户感知网络延迟。当您运行 Google pagespeed 洞察并查看结果时，您将看到如何解决您网站中的问题。
一些加快网站加载速度的技巧：
- 减少 HTTP 请求
- 添加一个遥远的未来过期标头
- Gzip 页面的组件
- 缩小你的 JavaScript、CSS 和 HTML
加载网页时的另一件事，如果您将 php 与 smarty 一起使用，您可以使用此插件，通过将所有 js 和 css 资源的请求组合成一个 HTTP 请求，减少对服务器的 http 请求数量并加快网站加载速度.
或者，您可能正在寻找这些插件。
于 2013-02-19T07:12:56.570 回答
1
所有这些东西都必须在同一页面上吗？将内容拆分到多个页面是否有意义？可以将其中的一些延迟到该人请求之前吗？它可以分组到选项卡中吗？例如，隐藏的选项卡可能会被延迟加载。
认真考虑以其他方式重组内容。您也许可以想出一种替代方案来简化问题。
于 2013-02-04T07:45:59.950 回答
1
考虑到上面提到的所有内容，您可能会考虑使用 memcache 或以任何其他可能的方式缓存部分数据/html 代码，以便您每次都跳过它的生成。当然，这在很大程度上取决于数据更改的频率。
于 2013-02-15T15:16:11.853 回答
1
浏览器不会在文档进入时呈现文档吗？您放在文件顶部的任何内容都将首先被客户端接收，因此将首先显示。例如，当您尝试在线查看一个非常大的图像文件时，它会从上到下加载。网页也是如此。只需将要加载的内容放在页面顶部即可！
对问题一的回答：是 对问题二的回答：上面对问题三的回答：什么都没有，只需将页面按正确的顺序排列即可。
于 2013-02-18T04:46:49.973 回答
1
好吧，这个想法或多或少与上面 Pawan Nogariya 描述的相同。您将需要异步获取视图和数据，然后显示它们。但这意味着您永远不会重定向或回发到任何其他页面，而是会通过 ajaz 获得所有视图。这将使您像 Gmail 一样应用 SPA（单页应用程序）。而且，这也意味着您需要跟踪已渲染的内容和未渲染的内容，从而使您一团糟。因此，与其按照您的方式做所有事情，已经开发和流行的框架可以让您这样做，但它们也使其成为 SPA。这意味着您的应用程序不会像重定向那样“发布”到服务器，但一切都是使用 Ajax 完成的。
您可以使用 Backbone ( Backbone.js )、Knockout ( Knockout.js ) 和其他人来实现这一点。这些是基于 javascript 的框架，有助于实现您刚刚提出的问题，并且可以举例说明，而且教程也很容易获得。您可以将它与任何语言一起使用，就像我们将它与 C# (MVC) 一起用于相对较大的应用程序一样。
于 2013-02-18T12:46:16.670 回答
1
这将是丑陋的！您绝对应该考虑在加载第一个内容阶段之后使用 ajax 调用来加载页面片段！这将打破几乎所有已知的网络标准，但它可能会部分呈现网站......
话虽这么说：这是丑陋的东西
第一：去掉<html>你网站的标签，<head>从不使用<body>标签开始。echo ...
现在，在组的每个结束标记（比如</table>or </div>）使用之后，按照您希望加载的顺序（顶部优先）发送您的 html 代码flush(); ob_flush();这将立即将所有已知内容发送到浏览器。浏览器现在决定它是否可以呈现已知内容以及是否可以（基于浏览器的细节和用户设置），但几乎没有例外。一些浏览器喜欢等待结束的 body-tag，这就是我们放弃它的原因，其他浏览器甚至等待结束的 html 标签（safari afair），这也是我们放弃它的原因。如果您明智地使用 echo-flush 场景，您应该能够将页面拆分为可渲染的部分，大多数浏览器将在没有错误的情况下显示这些部分。
再次......不要这样做......它很糟糕，丑陋，甚至不接近任何网络标准
但是你要求的。
于 2013-02-18T13:43:33.973 回答
1
对于你的这个问题
除了 AJAX 有没有办法解决这个问题？
我认为如果他们可以提供帮助，您可以尝试 iframe。
在页面加载后加载页面中的主要内容而不加载 iframe，而在 iframe 中加载其他内容。
这个 jsFiddle
jsfiddle.net/cGDuV/
可以帮助您了解使用 iframe 进行延迟加载，在stackoverflow的这篇文章中提到。
如果你想避免使用 jquery，你可以使用 javascript。
于 2013-02-18T14:01:28.603 回答
-2
于 2013-02-16T19:58:34.253 回答