1. 减少HTTP请求数。
(1) 合并JS文件和CSS文件。
(2) 合并框架图片及相对变动较少的图片或成一张，通过CSS背景切割来完成渲染。
(3) 合理使用本地Cache来缓存JS/CSS/IMAGE。
2. 减小被请求文件的大小，减少请求数据占用的网络带宽。
(1) 压缩JS体积：删除JS中空白换行、注释、混淆，把长变量换成短变量。
(2) 压缩CSS体积：删除CSS注释、写法尽量用简写。
(3) 使用(X)HTML+CSS方式搭建网站结构，提供CSS重用性，来减少(X)HTML文件大小。
(4) 使用服务器端GZIP压缩JS/CSS文件，缩小传输文件大小。
3. 通过版本化控制客户端缓存。
如何及时更新这些被缓存的文件呢？通过一个简单的配置，通过修改JS的版本来及时告诉浏览器，这些文件必须重新请求了，不要继续使用浏览器缓存中的数据了。方案有以下几个：
(1) 手动改这些JS的文件名。
(2) 手动改这些JS的路径。
(3) 通过URL Rewrite方式来重定位JS路径。
(4) 通过一个在高响应服务器上的JS配置告知页面，这个页面该链接哪些JS文件。
(5) 大版本不变，小版本不断追加，等一定时间后统一更新，高效利用缓存。
4. 帮页面减肥。
5. 删除页面中一些可有可无的内容。
主要指冗余的空格、制表符、空白行、双引号、单引号、注释等。
6. 删除网页代码中的空语句。
例如：
<span style='font-family:宋体'>你好<span lang=EN-US><o:p></o:p></span></span>
很明显，在“你好”后边的那些语句是没有任何作用的，我们可以把它删掉。
7. 删除HTML的默认属性。
HTML语言有很多默认属性，比如对齐、字体、颜色等，但网页制作软件会加入这些无用的代码。如：align属性默认是左对齐，所以在左对齐时我们没必要再写“align=left”。
8. 优化CSS。
例如：使用简写的CSS。
又或者：
<p class="decorated">1</p>
<p class="decorated">2</p>
<p class="decorated">3</p>
<p class="decorated">4</p>可以用p来包含：
<p class="decorated">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</p>9. Visibility快于Display。
10. 保持同一URL的大小写一致性。
Internet Explorer的缓冲区也是区别对待大小写字符串的。因此，作为Web开发者，一定要记住保持相同链接的URL字符串在不同位置的大小写的一致性。否则，就会在浏览器的缓冲区中存放同一位置的不同文件备份，也增加了下载同一位置内容的请求次数。
11. 让标记有始有终。
12. 不要将整个页面内容塞到一个Table中。
因为Table要等里面的所有内容都加在完毕后才显示出来，如果某些内容无法访问，则会拖延整个页面的访问速度。正确的做法是，将内容分割到几个具有相同格局的Table中去，不要全都塞到一个Table里。
13. 使用iframe嵌套另一个页面。
如果需要插入广告代码，又不想影响速度，那么使用iframe最合适不过了。不会因为广告代码延迟而影响页面的显示。
14. 把JavaScript移到HTMl文件末尾。
因为JavaScript在处理的过程中会阻塞后面的页面显示，并且也会使HTML请求被阻止。
15. 友情链接的学问。
(1) 只做文字链接，做文字链接是不会延迟网页速度的。
(2) 将所有链接放到一个独立的分页中区，然后在首页链接上该页。
(3) 如果友情链接一定要出现在首页，那么请将链接所在的整个Table放到页面的最下方，因为页面是由上到下逐行显示的。
(4) 友情链接的Logo图片先下载后再上传到自己的网页空间。
16. 图片优化。
(1) 减少图片数：去除不必要的图片。
(2) 降低图像质量：JPG格式的图片，降低5%的图片看起来变化不是很大，但文件大小变化很明显。
(3) 使用恰当的格式：JPG一般用于展示风景、人物、艺术照的摄影作品，有时也用在电脑截屏上；GIF提供的颜色较少，可用在一些对颜色要求不高的地方，如网站Logo、按钮、表情等；PNG格式能提供透明背景，一般用于需要背景透明显示或对图像质量要求较高的网页上。
17. 网址后加斜杠。
当服务器收到这样一个地址，需要时间去确定这个地址的文件类型。如果220是一个目录，则不妨在网址后多加一个斜杠，这样服务器就一目了然地知道要访问该目录下的index或default文件，从而节省加在时间。
18. 标明高度和宽度。
如果没有设置，则浏览器一边下载图片一边计算大小，如果图片很多，则浏览器就需要不断地调整页面，这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度后，即使图片无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载快了，浏览体验也更好了。
以上是关于html页面优化的实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！
