关于html页面优化的实例详解

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页面优化的实例详解的详细内容，更多请关注其它相关文章！