网站性能优化

Posted 2020-10-08 yyy_鸳鸯

前段时间面试时，面试官问了一个问题：”网站性能优化有什么方法”，我当时的第一反应就是减少图片加载，把图片直接转成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