如何使页面加载感觉更快？

Question

我想要减少我的页面加载和显示所花费的时间，假设我从一个空的浏览器缓存开始，并且这些页面可能会或可能不会在html文件中具有内联css和javascript。更改文件发送到浏览器的顺序是否会缩短显示时间，从而使页面看起来更快加载？

例如，如果一个页面有一些.css，.js，.png等文件，会先加载css，显示速度更快？

是否有加载文件类型的标准/特定顺序？

Answer 1

这里有几个步骤可以优化您的网页的性能。

• 把CSS放在顶部。

• 将javascript放在底部。

• 缓存一切。

• 设置远期未过期标题。

• 适当时返回304。

• 使用css和js的唯一url来传播更改。

• 除了使用ajax之外的任何地方。

Answer 2

首先确保您的webhoster没有缓慢的服务器。这可以发生在非常便宜的共享网站webhosters上。比你应该检查，你从你的html输出中删除所有unnessesary的东西。比你可以检查你的内容是动态的还是静态的。如果它是动态的，请尝试将其转换为静态内容。

在某些情况下，您可以简单地激活CMS的缓存功能，该功能也应该有助于更快地发送网站内容。只需慢速连接，使用gzip压缩输出流可能会更好。但是这会花费时间。服务器和客户端都必须进行压缩/解压缩。你也必须检查。

如果您使用javascript并且延迟执行，您也可以使用ready事件在加载html文档（而不是所有图像等）后执行您的JavaScript，就像使用document.onload事件一样。

Answer 3

js文件阻止页面加载，直到它们被执行。如果可能的话，请在关闭主体之前加入那些

Answer 4

雅虎有一篇很好的文章。

http://developer.yahoo.com/performance/rules.html

Answer 5

当心过多的HTTP连接。建立HTTP连接需要时间，如果HTML文件中链接了许多元素，它可以轻松地减轻加载时间。

如果你有很多小图标，字形等将它们组合成一个精灵，所以只加载一个图像。例如Facebook使用精灵技术 - 你可以看到，如果你检查它加载的图像。

您还可以将您的CSS文件合并到一个文件中 - 与JavaScript文件相同。另外，如果您的JavaScript在加载时会影响页面内容，那么请确保在DOM准备就绪时使用通知您的事件，而不是等待正在触发的正文事件load所有的资源，如图像，CSS文件，JavaScript等被加载。

Answer 6

您可以保存您的网页加载时间使用一些技巧，如： - CSS像精灵，而不是要求每一个单一用途的每一个形象，这将最大限度地减少您的网站的HTTP请求，从删除不必要的div标签或不必要的代码你HTML的标记 & CSS

在哪里，我们可以通过CSS取得了良好的效果，所以我们不应该使用Jscripts那里。 应该始终保持清洁的HTML标记没有任何不敬的代码。

组合文件是一种通过将所有脚本合并到一个脚本中，并将所有CSS合并到单个样式表中来减少HTTP请求数量的方法。当脚本和样式表因页面而异时，将文件组合起来更具挑战性，但使发布过程的这一部分能够缩短响应时间。

Answer 7

解决方案结果非常简单，将所有不同的文件合并成一个大文件并使用zip压缩该文件。不幸的是，如果你手动这样做，你会遇到维护问题。该单个压缩文件不再可编辑。因此，在编辑原始源文件之一后，您必须将其与其他文件重新组合并重新压缩。