我该怎么做才能减少HTML页面的加载时间？

Question

我该怎么做才能减少HTML页面的加载时间？

ont*_*ia_ 25 html javascript css performance

注意:这是一个社区维基帖

为了尽可能地提高用户体验,我该怎么做才能更有效地加载我的HTML页面？

Answer 1

ont*_*ia_ 19

在处理页面性能时,有一些重要的方法可以快速保持页面加载时间.

CSS组织

尝试最小化内联CSS样式,并将常用的CSS规则保存在外部样式表中.这有助于保留可重用的样式以供日后使用,缺少样式属性使您的HTML页面下载速度更快.

缩小

由于您的CSS和Javascript包含必须从您的服务器下载到客户端,因此较小的总是更好.雅虎有一个很棒的工具叫做YUI Compressor,它可以用来减少CSS和JavaScript的大小.像JQuery这样的流行图书馆也将提供其图书馆的缩小版和开发版.只需记住保留非缩小版本的副本以进行调试!

图像压缩

您可能需要考虑压缩图像.对于JPG文件,请尝试设置大约80%的压缩,并查看结果的外观.你可以玩水平,直到你得到一个体面的结果.对于PNG文件,您可能需要查看一些可用的PNG压缩工具.

CSS Sprites

保存HTTP请求的一个有趣策略是使用CSS Sprites.基本理论不是下载多个图像,而是简单地下载一个大图像,其中包含所有图像.这意味着浏览器只需要发出一个请求,而不是连续请求图像文件.CSS Sprites教程:它们是什么,为什么它们很酷,以及如何使用它们有关于该过程的一些很好的信息,包括如何从现有的多图像布局转换.

资源订购

在订购CSS和Javascript时,您希望首先使用CSS.原因是渲染线程具有渲染页面所需的所有样式信息.如果首先包含Javascript,则Javascript引擎必须先解析它,然后再继续使用下一组资源.这意味着渲染线程无法完全显示页面,因为它没有所需的所有样式.这是一个例子:

<link rel="stylesheet" type="text/css" href="/css/global.css" />
<link rel="stylesheet" type="text/css" href="/css/forms.css" />
<script type="text/javascript" src="/js/formvalidation.js"></script>

Run Code Online (Sandbox Code Playgroud)

跟踪/加盟脚本位置

许多网站使用跟踪和/或联盟脚本.如果远程主机出现问题,并且<head>标记中包含脚本,则浏览器必须等待下载才能继续进行.虽然这样的事情很好,但它们不应该减慢用户体验.建议将这些脚本移到页面底部,就在</body>标记之前:

<!-- HTML Here -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>

Run Code Online (Sandbox Code Playgroud)

缺少资产

缺少CSS和javascript文件意味着浏览器必须不必要地与服务器通信以获取不存在的文件.根据服务器的位置和丢失的文件数量,可能会导致页面加载速度变慢.

@Raynos:废话.这在SO上完全有效/可接受.所以不是论坛或其他什么. (7认同)
关于有效的HTML,显然是在渲染成本和通信成本之间进行权衡.例如,谷歌因不提供有效的HTML而臭名昭着,因为它有助于减少字节数(并且与其流量相关,它会增加). (3认同)
为什么丢失的资产会导致延迟？似乎'404`应该比加载资产本身更快. (2认同)
@KirkWoll这是一个诙谐的笑话. (2认同)

归档时间：	14 年，3 月前
查看次数：	2365 次
最近记录：	14 年，3 月前