前端面试解答——如何进行网站性能优化的总结（从content、server、cookie、css、js、图片方面进行分析）

最新推荐文章于 2021-06-04 07:10:34 发布

hhhhhhe！

最新推荐文章于 2021-06-04 07:10:34 发布

阅读量471

点赞数 1

本文链接：https://blog.csdn.net/lsl30522/article/details/105496236

版权

一、content方面

1. 减少 HTTP 请求：合并文件、 CSS 精灵、 inline Image、充分利用缓存

（1）合并文件

（2）在图像方面使用css精灵（也叫雪碧图）

（3）使用inline images

（4）利用游览器缓存

2. 减少 DNS 查询： DNS 缓存、将资源分布到恰当数量的主机名

2. 将 javascript 和 css 从外部引入

3. 压缩 javascript 和 css

4. 删除不需要的脚本

5. 减少 DOM 访问（这些就不做解释，看过前面应该是可以理解）

六、图片方面

1. 优化图片：根据实际颜色需要选择色深、压缩

2. 优化 css 精灵

3. 不要在 HTML 中拉伸图片（这些就不做解释，看过前面应该是可以理解）

一、content方面

1. 减少 HTTP 请求：合并文件、 CSS 精灵、 inline Image、充分利用缓存

（1）合并文件

合并资源优点：

合并文件是最常见的做法。http协议是无状态的应用层协议，每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵，而合并资源的优点不止是减少http请求的数量，还可以减少请求资源的大小,减少http请求的数量和减少请求资源的大小可有效提高访问性能；

合并资源缺点：

如果合并后的文件很大，下请求后下载是花费较长的时间，反而会延长网站的渲染时间。

合并资源手段：

主要是合并CSS、合并JS与合并图片。将游览器一次访问需要获取的js与css文件合并成一个文件，游览器只要一次请求就可以获取到所需要的文件。

图片也可以合并，多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。将图片base64，这样也可以减少请求。

在合并工具方面，可以使用gulp与webpack等项目构造工具对js与css文件进行压缩与合并。但是仅仅是考虑到减少http请求数量而对文件采取合并是有点片面的。

（2）在图像方面使用css精灵（也叫雪碧图）

CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

雪碧图优点：

1、利用CSS Sprites能够减少浏览器向服务器的请求次数，减少http请求，从而提高页面的性能，这是图片精灵的最显著特点，也是被广泛应用的主要原因。

2、利用图片精灵还能减少图片的字节，你使用9张小的图片，一张4KB，9张就是36KB，而把他们都放一张图片上，只需要4KB到5KB就可，所以减少图片字节也是显而易见的。

3、在整理图片的过程中，不需要再纠结如此大量图片的名字问题，多张放在一张上，只需要取一个综合的名字就可以了，如此便提高了工作效率。

4、如果想改变网站风格，你只需要处理一张图片就可以了，把一张图片的颜色和风格一改，那么整个网站的风格就都变了，便于后期的维护和修改。

雪碧图缺点：

1、在应用精灵图片的时候，你需要考虑当前盒子会不会漏出其他的背景图，这个还好，比较头疼的是，页面自适应时，背景图的位置就没那么容易掌控了。

2、制作精灵图的过程比较繁琐，你需要处理好每张图之间的距离和位置，如果做得不合理，那么使用起来就比较麻烦了，甚至需要单独创建一个空的盒子来装背景图。

3、使用精灵图的页面后期维护带来了繁琐，因为他是多张图在一张图上，牵一发而动全身的感觉，你改变一张背景图，如果大小发生变化，那么其他的你就得动，只要你动了，那么所有的背景定位都将需要改变，所以一旦需要更改背景图的话，轻易不要改变其他图片的位置，原位能放下就在原位改，放不下就在下面添加。

注意：

背景图片很少的情况，没有必要使用精灵技术，维护成本太高。如果是背景图片比较多，可以建议使用精灵技术。

（3）使用inline images

通过使用data:URL模式可以在Web页面中包含图片但无需任何额外的HTTP请求。(IE不支持,这种基本没什么用处)

还有一个缺点就是大小限制。Firefox最多支持100k的内联图片.

（4）利用游览器缓存

如果图片或者脚本，样式文件内容比较固定，不经常被修改，那么，尽可能利用缓存技术，减少HTTP请求次数或文件下载次数。

命中浏览器缓存分为两类：强缓存，协商缓存。

强缓存：不会发起HTTP请求，直接从浏览器缓存中读取文件。
HTTP 1.0中，采用Expires头指定资源过期时间；
HTTP 1.1中，采用Cache-Control: max-age指定资源被缓存多久；
协商缓存：向服务器发起HTTP请求，如果资源文件并未更新，response响应码即为304，随后从浏览器缓存中下载该文件，并不会从服务器下载。
HTTP 1.0中，采用Last-Modified(response header)和If-Modified-Since(request header)来指定资源过期时间；
HTTP 1.1中，采用E-Tag(response/request header)和If-None-Match来决定该资源是否过期；
如何配置浏览器缓存，大多是后台资源服务器控制的。一般将共有图片，第三方JS插件库或者CSS放到CDN上，不仅仅因为CDN的分布式特性可以加快资源文件下载速度，而且，一般CDN服务器都做了缓存配置，可以充分浏览器缓存。

2. 减少 DNS 查询： DNS 缓存、将资源分布到恰当数量的主机名

DNS(Domain Name System)：负责将域名URL转化为服务器主机IP。

DNS查找流程：首先查看浏览器缓存是否存在，不存在则访问本机DNS缓存，再不存在则访问本地DNS服务器。所以DNS也是开销，通常浏览器查找一个给定URL的IP地址要花费20-120ms，在DNS查找完成前，浏览器不能从host那里下载任何东西。

3. 减少 DOM 元素数量

避免不正确地使用服务器控件，减少必要的内容，数据量大，可以考虑分页或者是按需加载（dDOM元素越多，意味着JavaScript中的DOM访问速度较慢。当你想要添加一个事件处理程序时，如果在页面上循环500或5000个DOM元素，这是有区别的）

二、Server 方面

1. 使用 CDN

CDN 的全称是 Content Delivery Network，即内容分发网络。其目的是通过在现有的 Internet 中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，如果是纯静态页面，用户可以就近取得所需的内容，提高用户访问网站的响应速度。

但是动态页面的内容的有效期就比较活跃。假如我们对动态页面做了cdn加速，那么场景应该是这样的：用户——>边缘节点（验证有效期发现失效）——>源站。经过这个过程才能拿到页面，这样并没有起到加速的作用反而更慢了，那我们还不如直接去源站拿(当然我们可以要求cdn厂商做定制化开发)。

2. 配置 ETag

ETag主要是为了解决Last-Modified无法解决的一些问题：

（1）一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET;

（2）某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);

（3）某些服务器不能精确的得到文件的最后修改时间。

3. 对组件使用 Gzip 压缩

服务端收到浏览器请求后，经gzip压缩后传输的大小可减小70%，浏览器接收后解压。pdf、图片本身已经压缩了不再需要gzip。一般文档类型默认启用了gzip，其它静态资源，比如样式、脚本要单独配置启用gzip。

三、Cookie 方面

1. 减小 cookie 大小

cookie包含在每次请求和响应中，太大的cookie的会严重影响数据的传输，因此哪些数据需要写入cookie需要慎重考虑，尽量减少cookie中的数据量。另一方面，对于某些静态资源的访问，如css，script等，发送cookie没有意义，可以考虑静态资源使用独立的域名访问，避免请求静态资源传输cookie，减少cookie的传输次数。

四、css 方面

1. 将样式表放到页面顶部

将样式表置于顶部<head>标签之间，虽然加载时间略微变长，但是可以避免出现白屏或者无样式内容闪烁现象。如果样式表最初页面内容呈现无关，则可以采取文档加载完毕后再动态加载（Post-Onload Download）的方式进行加载。

2. 不使用 CSS 表达式

通过expression把Javascript脚本写放在css文件中，通过它来实现一些很方便的功能与效果。表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。计算成千上万次并且可能会对你页面的性能产生影响。

3. 使用 <link> 不使用 @import

link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

五、Javascript 方面

1. 将脚本放到页面底部

脚本会阻塞渐进式渲染，最好把脚本放到页面的底部，这样能确保页面渲染正常进行并且获取一个更好的并行下载。

脚本放页面头部：脚本之后的页面内容渲染会被阻塞，脚本之后的部件下载会被阻塞 (目前只有IE才会)。

脚本放到页面底部：页面的内容渲染不会被阻塞，页面中视觉化的部件也能尽早被下载。