• 本博内容仅供学习和参阅,不做任何商业用途。

浅谈如何提高页面的加载速度

加快网页的加载速度,无疑是提高用户体验的一个很好的方法。但是这里我们如何提高网页的加载速度呢?

1、使用良好的结构:比如说XHTML具有很大的优势,至少你的页面会更加的符合标准!但是他大量的使用了标记(等),而这就意味着浏览器需要下载更多的代码,所以尝试在你的页面中使用较少的XHTML,减少页面的大小。

2、尽量减少HTTP的请求次数:终端用户响应的时间中,有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法,如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改,这可能会相对麻烦点,但即便如此也要把这个方法作为改善页面性能的重要一步。

3、优化网页图片文件:你的网页一定有图片,加载一个网页往往图片的总尺寸是最大的,特别是那些颜色丰富的背景图片和大副广告图片。所以一般要在同等图片质量的情况下要尽可能地减小图片尺寸。在Photoshop中我们可以用保存为Web图片的选项试一下。图片也有几种常用的文件格式。如JPEG一般是用来存储照片或全彩色图片的,比如照片、屏幕截图等。GIF图片格式的颜色要比JPEG少,适合做小图,如制作按钮、Logo等,另外GIF支持动态效果。PNG跟GIF比较相似,但它的尺寸较大,支持的颜色也比GIF要多,并且PNG支持背景透明。我们可以试试使用一种不同的格式保存图片试下,如将PNG和JPEG换成GIF试试。

4、CSS Sprites是减少图像请求的有效方法:把所有的背景图像都放到一个图片文件中,然后通过CSS的background-image和background-position属性来显示图片的不同部分。

5、合并Js文件和CSS:将JS代码和CSS样式分别合并到一个共享的文件,这样不仅能简化代码,而且在执行JS文件的时候,如果JS文件比较多,就需要进行多次“Get”请求,延长加载速度,将JS文件合并在一起后,自然就减少了Get请求次数,提高了加载速度。

6、精简代码:这个可以说是最直接的一个方法,也是用得比较多的,对网页代码进行瘦身,删除不必要的沉冗代码,比如不必要的空格、换行符、注释等,包括JS代码中的无用代码也需要清除。其中对于注释代码的清除可能有些人存在误区,甚至有的在里面堆砌关键词。

7、压缩文本和图片:压缩技术如gzip可以有效减少页面加载的时间。包括HTML,XML,JSON(JavaScript对象符号),JavaScript和CSS等,压缩率都可以在大小70%左右。文本压缩用得比较多,一般直接在空间开启就行,而图片的压缩就比较随意,很多都是直接上传,其实还有很大的压缩空间。

8、图片使用height和width属性:你会给每个图片加上height和width属性吗?这两个属性可以让浏览器在加载图片之前就知道图片的长和宽,并预留出指定的长宽待图片加载后显示。如果没有这两个属性,浏览器还需要在读取图片成功后再处理一次页面布局样式,这无疑减慢了网页加载速度。所以在固定图片大小的情况下最好都使用上长和宽属性。


亲,沙发正空着,还不快来抢?

我要评论 / 做文明人

验证码