网站响应速度规则

2021-09-08 17:00:01

互联网上有越来越多的网站。作者还访问了许多网站。有些网站在几秒钟内打开,有些网站需要3-5秒才能加载,有些甚至需要6-10秒才能加载,这对用户体验影响很大。

接下来,我们主要介绍网站性能优化的方法:

规则1:减少HTTP请求

1.图片映射:一张图片可以关联多个URL。目标URL的选择取决于用户单击图片的位置。

2.CSS精灵(CSS精灵):您需要将多个图像组合成一个图像,并根据CSS的背景属性定位相应的图标。图片地图中的图片必须是连续的,而cssprites没有此限制。

3.内联图片:通过使用data:URL模式,您可以在网页中包含图片,而无需任何额外的HTTP请求。数据:URL模式的主要缺陷是IE不支持它(包括7)。另一个缺陷是数据大小可能有限制。

通过将内嵌图片放置在外部,您可以从缓存中获得额外的好处。

4.合并脚本和样式表:多个脚本合并为一个脚本,多个样式表合并为一个样式表。

规则2:使用内容发布网络

如果应用程序web服务器更靠近用户,则HTTP请求的响应时间将缩短。

内部发布网络(CDN)是一组分布在许多不同地理位置的web服务器,用于更有效地向用户发布内容。除了缩短响应时间外,CDN还可以带来其他优势。他们的服务包括备份、扩展存储容量和缓存。

依赖CDN的一个缺点是,您的响应时间可能会受到其他网站流量的影响。二是无法直接控制组件服务器造成的特殊故障。例如,您必须通过服务提供者而不是您自己来修改HTTP响应头,如果CDN的服务性能降低,您的工作质量也会降低。

CDN用于发布静态内容,如图片、脚本、样式表和flash。

规则3:添加expires头

web服务器使用expires头告诉web客户端,在指定的时间之前,它可以使用组件的当前副本。HTTP规范简短地调用此标头“在此日期/时间之后,响应将被视为无效”。

当过期时间和缓存控制同时存在时,缓存控制具有优先级,并明确指示相对于请求时间经过的秒数。

Expires不仅应应用于图像,还应包括不经常更改的任何组件,例如脚本、样式和flash组件。

如果要在过期之前更新缓存组件,只需修改文件名。一般来说,版本号嵌入在组件的文件名中,修改后的版本号可以自动更新。

如果组件没有long expires标头,它仍将存储在浏览器的缓存中。但是,在后续请求中,浏览器将检查缓存并发现组件已过期。它将向服务器发送条件get请求以进行检查。如果未更改,则将收到304状态代码。通过使用expires头,您可以避免额外的HTTP请求,并相应地缩短响应时间。

规则4:压缩组件

压缩成本包括:服务器将花费额外的CPU周期来完成压缩,客户端将解压缩压缩文件。

代理缓存:为了避免不同浏览器请求相同代理时出现差异(一个浏览器支持gzip,另一个浏览器不支持gzip),导致无法获取正确数据。这可以通过在服务器的vary响应头中包含accept-encoding(vary:accept-encoding)来解决,以便代理缓存每个响应的两个版本——accept-encoding为gzip的压缩内容和未指定accept-encoding时的未压缩内容。

规则5:将样式表放在顶部

将样式表放置在文档底部时,将阻止内容在浏览器中逐渐呈现,并且浏览器将延迟任何视觉组件的显示。这种现象称为白屏。

使用link标记将样式表放置在文档头中可以解决白色屏幕和无样式内容的闪烁问题。

规则6:将脚本放在底部

使用脚本时,对于脚本下面的所有内容,将阻止分步渲染,并阻止并行下载。脚本会阻止后续内容的呈现和后续组件的下载。

研究表明,使用两个主机名可以带来比使用1、4或10个主机名更好的性能。

浏览器在下载脚本时阻止并行下载的另一个原因是为了确保脚本可以以正确的顺序执行。

规则7:避免使用CSS表达式

CSS表达式很容易导致频繁求值,导致性能不佳。

避免问题:1)使用一次性表达式

规则8:使用外部JS和CSS

单纯地说,内联更快。但是,外部JS和CSS文件有机会被浏览器缓存,并且可维护性更高。

两种方法都是加载后下载,也就是说,JS和CSS被加载到页面中两次(先是内联的,然后是外部的)。内联CSS和JS用于主页,但为后续页面视图提供外部文件。这可以通过在加载主页后动态下载外部组件来实现(要使其在onload时间内正常工作,必须处理双重定义(在onload函数中,添加外部CSS和JS,并向页面添加链接和脚本标记)