网站性能优化

Posted yyy_鸳鸯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网站性能优化相关的知识,希望对你有一定的参考价值。

前段时间面试时,面试官问了一个问题:”网站性能优化有什么方法”,我当时的第一反应就是减少图片加载,把图片直接转成base64,然后直接写到css中,这样能减少从后台拿数据的次数,然后我直接说出了我的想法。面试官问还有没有其他方法,我就一脸茫然了。回来之后我赶快看了《高性能网站优化指南》,里面介绍了不少有用的方法,有前端的也有后端,有些我们平时开发的时候一直在用,但是没有觉得能提高网站的性能,有些就从来没有想到过。下面我主要介绍一下这本书里面的前端性能优化方法吧~

1.减少http请求

steve在书中说,网站加载时,很大的一部分时间都在加载各种资源,加载一个资源就要发一次http请求,这么多个请求一起发出,服务器端处理这么多请求,性能自然就慢下来了。所以要提高网站性能,自然是要减少http请求的,如何减少http请求,有下面几种方法。

(1)减少图片资源的http请求

如果一张图片就要发一次请求,那么网页上图片一多,请求的次数自然就增加了,如果把所有图片集中在一块,然后发送一次请求把所有的图片都拿过来,这样性能不就提高了吗。书中介绍了三种减少方法。

a.图片地图

一般一张图片会关联一个超链接。图片地图可以在一个图片上关联多个URL,目标URL的选择取决与用户单击了图片的哪个位置。

例如,在一个地方有5个图片,单击一个图片可以跳转到相应的链接。这个可以通过5个分开的链接,使用5个分开的图片来实现。也可以通过图片地图来实现,因为5个http请求减少为一个http请求,响应的时间会减少。

可以通过以下两个例子来体验一下效果:

无图片地图示例:

http://stevesouders.com/hpws/imagemap-no.php 

有图片地图示例:

http://stevesouders.com/hpws/imagemap.php

b. css sprites

css sprites和图片地图类似,只不过会更灵活。图片地图需要将图片按顺序排好在传过来。而css sprites是把多个图片合并到一个的单独的图片中, 就像一个充满小图片的显示板,每个图片都有自己对应的坐标。所以不需要将图片按顺序排好,只需要将图片加进去,然后找到图片对应的坐标就可以找到该图片了。

css sprites 示例:

http://stevesouders.com/examples/sprites.php 

c.内联图片

内联图片就是我面试是回答的那种方式,将图片转成base64,通过 data: URL嵌在css中,像下面这样:

<IMG ALT="Red Star" src="data:image/gif;base64,f fBiYvww IvrKy/FvcPews09Wfaj0+w60/ AAsALAAAAAAMAAw?AAQzcEIZyrYTEHYTugknHd9XGV+qKSYirKkwDYiKDBia tt2HIKBLQRFIJAIKywRgmhw?11">

内联样式示例:

http://stevesouders.com/examples/inline-css-images.php 

内联图片示例:

http://stevesouders.com/examples/inline-images.php 

 

以上是关于网站性能优化的主要内容,如果未能解决你的问题,请参考以下文章

大型网站技术架构 | 应用服务器性能优化

大型网站技术架构 | Web前端性能优化

网站性能优化

大型网站技术架构,4网站的高性能架构之Web前端性能优化

转网站前端性能优化之javascript和css

个人网站性能优化经历网站安全方面优化