Home » 前端技术 » WEB前端优化(前端攻城狮需要了解的页面访问速度优化方案)

WEB前端优化(前端攻城狮需要了解的页面访问速度优化方案)

xdlumia 2016-01-28 1,389次 条评论

 

 

页面访问速度是靠哪些因素决定的呢?答案包括三个:数据库,服务器,前端,呐另外两个和我们没关系就不说了,主要说一下前端方面需要注意哪些问题才能最好的优化访问速度。

前端优化也是包括三个方面,HTML优化,CSS优化和JS优化(看起来像废话哈~)。

优化的原则一个是要尽可能减少HTTP请求数量,另一个是要尽可能减少每次请求的数据大小。

好啦不说废话了,下面直接说方法:

1)CSS Sprites技术

听起来很高大上的一个技术,其实就是简单的拼图而已哒。CSS Sprites就是将小背景图拼接在一张图片上,然后用背景定位属性(也就是background-position)来调用需要的背景图,这种方法的原 理就是当你使用一整张大背景时,可以减少很多无谓的http请求的时间,另外一张大图的图片大小要比很多张小图的大小总和要小,因为每一张图片都会自带一 些图片文件信息,这些文件信息会占用一部分大小。

说到这里也要提醒一下,如果不需要这些文件信息,也可以在保存时把相关的勾选去掉,那么图片大小也会变小。

2)将CSS放在页面顶部,并且使用<link href=”xx.css”>,而不要使用@import url(xx.css)的方式来链接外部样式,因为<link>可以与html同时解析,而@import则会放在最后解析。

3)避免使用CSS表达式,在属性里最好写确定的值,如果属性需要随某些条件改变时,最好在JS中去表现

4)避免空的src和href值

当link标记的href属性或s cript标记的src属性为空时,浏览器渲染时会把当前页面的url作为他们的属性值,也就是说会把页面内容重新加载进来作为他们的值。

5)巧用浏览器缓存,尽量把CSS放在html外部,供多个页面调用,但是首页尽量不用外部CSS样式。

6)不要在HTML中缩放图像,需要展示多大的图片,就将图片切成多大,不要让代码自己去计算。

7)对javas cript和css文件进行压缩

也许在编写代码时我们为了容易辨认,会经常使用空格,换行,注释等等,但这些在运行时会造成加载时间的无谓浪费,所以在上传之前,要另存一份,将其中所有不必要的内容删除,除了上面提到的,还包括语句最后的分号等等。

当然这么繁杂的事情不需要你亲自动手,可以使用类似 YUI Compressor 工具或者 Yahoo UI Libary。

又一篇呕心之作完成了,随着对前端知识的逐渐了解,后续还会陆续发一些类似这样的自己总结的经验,结尾同样是那句话,求赞么么哒~

转载请注明出处