WEB开发中如何提高网页速度-优快云博客

本文链接：https://blog.youkuaiyun.com/zhoujian1027/article/details/6486779

本文介绍了15种提高网页加载速度的方法，包括优化图像使用、采用静态HTML页面、合理使用表格和iframe、压缩JavaScript文件等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

资料来源于网络，自己整理了一下。

一．不要使用图像来表示文本

我们浏览网页实际上是将虚拟主机中的网页内容下载到本地硬盘，再用浏览器解释查看的。下载网页的快慢在显示速度上占了非常大比重，所以，网页本身所占的空间越小，那么浏览速度就会越快。这就需求在做网页的时候遵循一切从简的原则，如:不要使用太大的Flash动画、图片等资源。干净、简洁的页面会给人一种思路明朗的感觉。

使用图像表示文本的最常见示例就是在导航栏中。但是它们的加载速度很慢。此外，图像仍然不能由搜索引擎直接索引，因此，使用图像进行导航不利于搜索引擎优化。一种适用于 CSS 样式的特定导航类型就是选项卡式导航。

二．尽量使用静态HTML页面

众所周知，ASP、PHP、JSP等程式实现了网页信息的动态交互，运行起来的确非常方便，因为他们的数据交互性好，能非常方便地存取、更改数据库的内容，使网站“动”起来，如:论坛、留言板等。不过这类程式必须先由服务器执行处理后，生成HTML页面，然后再“送”往客户端浏览，这就不得不耗费一定的服务器资源。如果在虚拟主机上过多地使用这类程式，网页显示速度肯定会慢，所以没有必要，请尽量使用静态的HTML页面。

三．切忌将整个页面内容塞到一个Table中

　　有时为了追求页面统一对齐，将整个页面的内容都塞进了一个Table(表格)里，然后再由单元格td来划分各个“块”的布局，这种网站的显示速度是绝对慢的。因为Table要等里面所有的内容都加载完毕后才显示出来的，如果某些内容无法访问，就会拖延整个页面的访问速度。正确的做法是:将内容分割到几个具有相同格局的Table中去。

四.使用iframe嵌套另一页面（如广告）

如果你要在网站上插入一些广告代码，又不想让这些广告网站影响速度的话，那么，使用iframe最合适不过了。方法是:将这些广告代码放到一个独立的页面去，然后在首页用如下的代码将该页面嵌入即可，这样就不会因为广告页面的延迟而拖了整个首页的显示。

marginWidth=0 frameborder="0" src="http://www.ninedns.com"></iframe>

五．检查 cookie 使用情况

cookie 可能是很小的文件，但是浏览器仍然需要下载它们。较大的 cookie 所需的下载时间更长，进而增加了浏览器加载网页的时间。正因为如此，尽可能缩小 cookie 来最小化对浏览器响应时间的影响非常重要。

此外，设置一个较早的 expire 日期或者根本不设置 expire 日期，会缩短响应时间。

六．Js和CSS尽量使用外部文件，不使用内联

与 cookie 类似，JavaScript 文件的下载也需要时间，这不可避免地会降低整个页面的加载速度。因此明智地使用 JavaScript并优化脚本的大小和速度。

缩短 JavaScript 下载时间的另一种方式是使用外部文件，而不是包含脚本内联。这种方法也适用于 CSS，因为浏览器会缓存外部化的文本，而（在 HTML 页面自身中）以内联方式编码的 CSS 或 JavaScript 每次都会随 HTML 一起加载。要通过在 HTML 中引用 CSS 和 JavaScript 代码来外部化它们，可以使用具有以下形式的代码：

七．尽可能避免使用表格

表格被用作网页的主要构建块，但是作为页面布局元素，使用表格现在被认为是糟糕的做法。有时候，您必须使用表格（并且它们被认为是显示表格数据的出色实践）。如果是这样，明确地指定表格单元格、行和列的宽度和高度，否则，浏览器必须执行许多操作来计算如何显示它们，这会降低页面加载速度：

八．压缩和缩小 JavaScript 文件

JavaScript 文件可能非常大，这意味着在某些情形中，它们的下载时间可能比所有其他组件下载时间之和还长。解决此问题的一种方法是压缩 JavaScript 文件。您可以使用 GNU zip (gzip) 来完成此任务，因为许多浏览器都支持这种压缩算法。

另一种替代方法是缩小文件。这种方法删除代码中所有不必要的字符，比如制表符（tab）、新行和空格。它删除代码中的注释和空白，进一步缩小文件大小。外部和内部样式表都可以缩小。两种最流行的缩小工具是 JSMin 和 YUI Compressor

九．使用 PNG 格式的图像

Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 图像格式都已过时了：Portable Network Graphic (PNG) 是未来流行的格式。当然，您可以说 GIF 和 JPEG 已经消亡，或者 PNG 没有任何缺陷，但是所有事物都有各自的优缺点，PNG 以最佳的文件大小提供了出色的质量。因此，如果进行选择的话，应该尽可能使用 PNG 图像。

十．延迟脚本加载

移除完全不需要的 JavaScript 代码能够加快加载和处理速度。但是如果代码已经非常精简并且必须在页面中包含 JavaScript 代码的话，该怎么办？

在这种情形下，一种提升页面下载速度的潜在方式是将脚本放在页面的底部，使页面加载更迅速。通常，浏览器只能（从同一个域）下载不超过两个并行对象，如果一个对象是一段 JavaScript 代码，那么在该脚本下载完之前，其他页面组件的下载将会暂停。如果将 JavaScript 代码放在页面底部，（在大多数情况下）它将在最后下载，这时所有其他组件都已下载完。

使用 Firebug 扩展跟踪加载缓慢的文件，我敢打赌您的 JavaScript 文件是下载最慢的文件。压缩 JavaScript 文件会有所帮助，但是仅仅这样可能还不够。您可以使用以下代码片段延迟 JavaScript 的加载：

十一．使用AJAX

当统称为 Asynchronous JavaScript + XML (Ajax) 的技术在两年前出现时，这些技术为处理页面请求和响应提供了一种革命性方法。然而，拨号用户可能从来没机会体验其真正的优势，因为在许多情形下，Ajax 需要在浏览器与服务器之间大量通信。因此，如果您能够保持 Ajax 调用简短和准确，可以避免用户花费无止尽的时间来等待元素刷新或响应。

十二．在沙箱中测试代码（针对项目新增功能）

还有一个经常被遗忘的常用技巧。尽管清醒的 Web 开发人员通常会在启动应用程序之前对其进行测试，但是有时候测试会使他们不那么重视维护任务，或者新功能添加得太快，并且未经过充分考虑或测试。结果，余下的脚本减缓了应用程序的速度。

如果您添加一项新功能，可以首先在沙箱里（完全脱离了应用程序的其余部分）进行测试，查看它作为单个函数的行为。通过这种方式，您可以反复检查，并分析性能和响应时间，无需考虑 Web 应用程序的其余部分。然后，当新功能的行为符合预期时，可以将其引入到应用程序的其余部分中，运行其他测试，保证功能本身的行为符合预期。

十三．在合适的时候使用 Google Gears

使用 Google Gears是避免用户反复下载同一内容的另一种好方法。Gears 允许用户离线访问 Web 应用程序，但是也允许将页面元素持久化到用户的计算机上。因此，频繁加载但未进行更新的内容可以存储在 Gears 数据库中，该数据库是一个 SQLite3 关系数据库管理系统。对同一内容的所有 next 请求都可以从数据库（而不是服务器）直接加载。

十四．讲究网站计数器代码放置的技巧

　　在网页里放置计数器能统计网站的访问流量，为站长和广告商家提供访问依据，不过，不管功能有多强大的网站统计系统，都会有出故障的时候。如果直接把统计代码放到页面内容的前面，或放在一个Table或div标签里，那么在计数器不能访问的时候，你的页面上那个Table或div就会产生几十秒钟的延迟，导致页面非常长时间才能访问。所以，要提高网站的速度，就要讲究统计代码放置的位置，正确的方法是:把统计代码放到页面的最下面，并且不要和页面内容同在一个Table或div标签里。能在页面代码的最下方直接放置统计代码，或在最下方独立做一个Table或div来放置计数器。这样，在计数器不能访问的时候，你的网站速度也不会受到丝毫影响。