页面(HTML)优化的方法

时间:2024-03-12 10:46:42

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>

    可以用div来包含:

    <div class="decorated">

        <p>1</p>

        <p>2</p>

        <p>3</p>

        <p>4</p>

    </div>

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. 网址后加斜杠。

    有些网址,比如“www.a.com/220”,当服务器收到这样一个地址,需要时间去确定这个地址的文件类型。如果220是一个目录,则不妨在网址后多加一个斜杠,让其变成“www.a.com/220/”,这样服务器就一目了然地知道要访问该目录下的index或default文件,从而节省加在时间。

18. 标明高度和宽度。

    如果没有设置,则浏览器一边下载图片一边计算大小,如果图片很多,则浏览器就需要不断地调整页面,这不但影响速度,也影响浏览体验。当浏览器知道了高度和宽度后,即使图片无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载快了,浏览体验也更好了。