PHP - 优化加载过程
我运行一个基于 PHP 的登陆页面,其中包含一个大标题图形和一个 div,其中包含常见的 JavaScript 共享按钮,例如下面的 Twitter、Stumpleupon 和 Facebook。这些按钮会减慢下面所有内容的加载过程。
所以我希望网站的重要部分首先显示,不太重要的部分应该在最后加载。
如何存档? 谢谢 迈克尔
I run a PHP based landing page with a big header graphic and a div with the common JavaScript sharing buttons like Twitter, Stumpleupon and Facebook below. These buttons are slowing down the loading process for everthing that's below.
So I'ld like that the important parts of the website show up first and the less important parts should get loaded at the end.
How to archive that?
Thanks
Michael
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
最简单的方法是将所有 JavaScript 代码移至文档底部。它可能需要一些修改(即使用 DOM 函数而不是
document.write
)或重新设计,但将使网站在这些小工具完全加载之前可用。设置async
和 < code>defer 是一种优雅但也复杂的替代方案。连接多个 JavaScript 文档也有帮助,特别是对于并发连接数较少的旧版浏览器。您还可以将图形(主要是图标/徽标等)与 CSS 精灵 结合起来。在最前沿,
data:
URL 允许嵌入图像进入 HTML 文档的源代码。在 Yahoo 最佳实践中了解有关这些技术的更多信息。通过 gzip 压缩 HTML 和 CSS 文档可以获得额外的加速。 JavaScript 文件也可以被压缩,但是缩小(例如使用 YUI 压缩器)往往会取得更大的收获。您还应该为静态资源指定缓存指令。
在服务器端,您确实应该使用 php 字节码缓存器,例如 APC 。 Google 提供了一些有关 PHP 最佳实践的其他提示。
一般资源:
The simplest way is to move all the JavaScript code to the bottom of the document. It may require some modification (i.e. use DOM functions instead of
document.write
) or restyling, but will make the site usable before these gadgets are fully loaded. Setting theasync
anddefer
is an elegant, but also complicated, alternative.Concatenating multiple JavaScript documents helps, too, especially with older browsers with a low number of concurrent connections. You can also combine graphics(mostly icons/logos etc) with CSS sprites. On the cutting edge,
data:
URLs allow embedding images into the source of the HTML document. Read more about these techniques in the Yahoo Best Practices.Additional speedup can be gained by gzipping HTML and CSS documents. JavaScript files can be compressed too, but minification (for example with the YUI compressor) tends to achieve even greater gains. You should also specify caching directives for static resources.
On the server side, you should really be using a php bytecode cacher like APC. Google has some additional tips on php best practices.
General resources:
这是一个很好的问题,还有比我写得更多的作者更好的问题。事实上,雅虎给出这篇文章!工作人员试一试 - 这是关于该主题的权威文档,并且非常容易遵循:
http://developer .yahoo.com/performance/rules.html
另一个答案建议将 JavaScript 移动到页面底部。这可能会有所帮助,但不会解决您的所有问题,并且不会对您的图像加载有太大帮助。根据 Yahoo! 的指南,您最好将大量较小的图像替换为 CSS spritesheet 中包含的单个图像,以减少 HTTP 请求开销,并确保为所有内容启用缓存。
您还可以(高级!)做一些聪明、棘手的事情,例如只将重要的内容放在文档中,并在初始加载后使用 AJAX 动态加载 javascript(位于页面底部)。完全的。漂亮!
Great question, and one which better authors than I have written mountains about. In fact, give this article by Yahoo! staff a shot - it's the definitive document on the subject, and pretty easy to follow:
http://developer.yahoo.com/performance/rules.html
Another answer suggests moving your Javascript to the bottom of the page. This is likely to help, but won't solve all your problems and won't do much to help your images load. From Yahoo!'s guide, you would do well trading numerous smaller images for single images contained in a CSS spritesheet to cut down on HTTP request overhead, and make sure to enable caching for all your content.
You can also (advanced!) do clever, tricky stuff like only putting the important stuff in the document at all, and having javascript (located at the bottom of the page) dynamically load in the "extras" using AJAX after the initial load is complete. Spiffy!
就像其他人所说的那样,您需要将 javascript 放在底部。也许 headjs 库让这个任务对你来说更容易一些?
Like others are saying you need to put javascript at the bottom. Maybe headjs library makes this task a little bit easier for you?