如何让页面加载感觉更快？答案

【问题标题】：How to make page loading feel faster?如何让页面加载感觉更快？
【发布时间】：2020-01-13 14:48:55
【问题描述】：

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

例如，如果一个页面有一些.css、.js、.png 文件等，是否会先加载css，从而更快地显示内容？

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

注意过多的 HTTP 连接。建立 HTTP 连接需要时间，如果您的 HTML 文件中链接了许多元素，它很容易占用加载时间。

如果您有许多小图标、字形等，请将它们组合成一个精灵，以便只加载一张图像。例如，Facebook 使用了 sprite 技术 - 如果您检查它加载的图像，您会看到这一点。

您还可以将 CSS 文件合并到一个文件中 - 与 Javascript 文件相同。

此外，如果您的 JavaScript 在加载时会影响页面内容，请确保使用在 DOM 准备就绪时通知您的事件，而不是等待不会触发的正文 loadevent直到加载所有资源，例如图像、CSS 文件、JavaScript 等。

【讨论】：

【解决方案3】：

js 文件会阻止页面加载，直到它们被执行。如果可能，请在关闭正文之前包括那些

【讨论】：

【解决方案4】：

首先确保您的虚拟主机没有慢速服务器。这可能发生在非常便宜的共享网站虚拟主机上。比你应该检查你是否从你的 html 输出中删除了所有不必要的东西。您可以检查您的内容是动态的还是静态的。如果是动态的，请尝试将其转换为静态内容。

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

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

【讨论】：

【解决方案5】：

您可以节省页面加载时间以使用以下技巧：- CSS 图片精灵，而不是为每个目的调用每张图片，这将最小化您网站的 HTTP 请求，删除不必要的 div 标签或HTML-Markup 和 CSS

中的不必要代码

我们可以通过CSS获得好的结果，所以我们不应该在那里使用Jscripts。应该始终保持干净的 HTML 标记，没有任何不敬的代码。

组合文件是一种减少 HTTP 请求数量的方法，方法是将所有脚本组合成一个脚本，类似地将所有 CSS 组合成一个样式表。当脚本和样式表因页面而异时，合并文件更具挑战性，但将这部分作为发布过程的一部分可以缩短响应时间。

【讨论】：

【解决方案6】：

解决方案很简单，将所有不同的文件合并到一个大文件中，然后使用 zip 压缩该文件。不幸的是，如果您手动执行此操作，您将遇到维护问题。该单个压缩文件不再可编辑。因此，在编辑完其中一个原始源文件后，您必须将其与其他文件重新组合并重新压缩。

【讨论】：