欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-08 22:54:28
...
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页面优化的实例详解的详细内容,更多请关注其它相关文章!