您的位置: 首页 >日志>前端技术>详细内容

前端技术

细节与优化

来源:本站原创 发布时间:2011-04-29 10:58:58 浏览次数: 【字体:

优化网页速度

一、网站中图像格式的注意

一般在网页上使用的图片格式有三种,jpg、png、gif.三种格式的具体技术指标不是这篇文章探讨的内容,我们只需要知道在什么时候应该使用什么格式,以减少网页的加载时间。选择正确的图片格式是非常重要的。Jpg一般用于照片或真彩色图片,gif运用平面色彩的图片,一般用于按钮或logo图片,png和gif非常相似,不过就是多支持一些色彩!

JPG:一般用于展示风景、人物、艺术照的摄影作品。有时也用在电脑截屏上。

GIF:提供的颜色较少,可用在一些对颜色要求不高的地方,比如网站logo、按钮、表情等等。当然,gif的一个重要的应用是动画图片。就像用Lunapic制作的倒映图片。

PNG:PNG格式能提供透明背景,是一种专为网页展示而发明的图片格式。一般用于需要背景透明显示或对图像质量要求较高的网页上。

优化图片。这个没有什么技巧,通过软件就搞定了。我喜欢用ps,在ps中选择存储web所用格式,然后选择图片的质量等选项,图片看起来很清楚,大小又合适保存就可以了。

图片长宽的标记问题。这个问题一般在html中可以看到,一些人经常忘记写图片的长和宽了。这些标记是告诉浏览器打开图片之前的尺寸,浏览器加载网页时就会保留一块区域,加快整个网页显示速度。

二、关于网站CSS的优化细节

CSS叠层样式表让网页加载起来更高效,浏览体验也得到提高。有了CSS,表格布局的方式可以退休了。

但有时我们在写CSS的时候会使用了一些比较罗嗦的语句,比如这句:

Css代码

 

margin-top: 10px;

margin-right: 20px;

margin-bottom: 10px;

margin-left: 20px;

你可以将它简化为:

 

margin: 10px 20px 10px 20px;

又或者这句:

 Html代码

 

1.<p class="decorated">A paragraph of decorated text</p>    

2.<p class="decorated">Second paragraph</p>    

3.<p class="decorated">Third paragraph</p>    

4.<p class="decorated">Forth paragraph</p>  

可以用div来包含:

Html代码

 

<div class="decorated">    

<p>A paragraph of decorated text</p>    

<p>Second paragraph</p>    

<p>Third paragraph</p>    

<p>Forth paragraph</p>    

</div> 

简化CSS能去除冗余的属性,提高运行效率。如果你写好CSS后懒得去做简化,你可以使用一些在线的简化CSS工具,比如CleanCSS.

三、网页信噪比的注意

网页信噪比表现:

有些网页以纯文本方式体现的网页和关键字词密度以及大小一样的网页在搜索引擎返回的结果高的原因。并且也能合理结实在一些搜索结果中,关联一个网站的第一页是网站的某个以文字出现的页面,而第二页才是该站的首页。

网页信噪比原理:

信噪比(Signal/Noise),原是电声学领域中的一个概念,指声音源产生最大不失真声音信号强度与同时发出噪音强度之间的比率。在网页优化中同样存在这样的原理,搜索引擎抓取页面,主要抓取除去html修饰后的文本内容,这部分内容可以认为是不失真声音信号,而同时产生的那部分html标签内容,可以被认为是噪音。因此,网页信噪音比,可以这样理解:指网页中的文本内容部分与生成这些文本而产生的html标签内容的比率。声学中,信噪比越高,说明声音信号越清晰,同理,网页信噪比越高,说明页面中纯文本内容相对越多,搜索引擎抓取页面也越容易。

网页信噪比技巧:

1.减少网页中的图片,必须使用的请加上注释。

2.减少网页中flash,还没有听说哪个搜索引擎能识别的

3.网页中css、js封装,统一调用

国内部分优化人士认为,一般来说网页信噪音比在30%左右比较合理。

×

用户登录