web性能优化(1)

前言

web 性能对对用户体验有及其重要的影响,根据著名的 2-5-8 原则:

  • 当用户在2秒以内得到响应,会感觉系统的响应非常快;
  • 当用户在2-5秒之内得到响应,会感觉系统的响应速度还可以;
  • 当用户在5-8秒之内得到响应,会感觉系统的响应非常慢,但还可以接受;
  • 当用户在8秒之后都没有得到响应,会感觉系统糟透了,甚至系统已经挂掉;要么打开竞争对手的网站,要么重新发起第二次请求。

根据前人的总结,其实就是下面几点的优化:

  1. 减少 HTTP 请求
  2. 页面内部优化
  3. 启用缓存
  4. 减少下载量
  5. 优化网络连接

减少 HTTP 请求

主要主要从这两方面下手:减少图片请求、减少脚本文件与样式表的请求

减少图片请求

图片减少通常的方法有:css sprites、内联图片、IconFont

CSS Sprites:将多张图片合并成一幅单独的图片,使用 css 的 background-position 属性,将 html 元素的背景图片放在图片中期望位置上。使用这项技术的优点是降低了下载量,合并后的图片比分离的图片更小。

内联图片:通过将图片 base64 编码后内联到css中,可以使页面中包含图片而无需额外的请求。

IconFont:图标字体,这是近年来流行的字体替代图片的技术。它可以适应任何分辨率而不会出现模糊,与图片相比具有更下的容量,更高的灵活度。

减少脚本与样式表请求

减少脚本与样式表的请求主要原则就是合并。在实际开发中,代码可能分散在许多不同的文件和模块中,需要在项目上线时将这些文件合并为一个文件,并且在文件合并中需要对文件进行压缩和混淆。

页面内部优化

页面内部优化主要方向:样式表放在顶部、脚本文件放到底部、避免css表达式、把脚本和样式表放在外部文件、移除重复脚本。

样式表放在底部会阻碍页面的生成,造成频繁重排和重绘,直到样式表解析完毕。样式表放到顶部虽然不会减少资源的加载时间,但会减少页面的呈现时间。

在解析HTML标记时,浏览器遇到了 JavaScript,解析就会停止。直到该脚本执行完毕后,HTML才会继续进行。因此要将脚本放到页面的最底部,这样既可以让内容逐步呈现,也可以提高下载的并行度。

启用缓存

关于缓存的使用这里介绍两套方案:expires/If-Modified-Since、Cache-Control/Etag;前者是HTTP1.0中的缓存方案,后者是HTTP1.1中缓存方案,若http头部中同时出现二者,后者的优先级更高。详细内容点此查看

减少下载量

减少下载量最有效的方式就是开启 gzip 压缩,gzip是 GNU 开发的一种免费格式。压缩通常能将响应的数据量减少 70%。压缩的成本在于:服务器需要耗费额外的 cpu 尽心压缩,客户端需要解压缩。所以需要在 cpu 的消耗和数据块的大小之间取舍。

优化网络连接

网络连接的优化主要有三个规则:使用 CDN 加速、减少 DNS 查找、避免重定向。

CDN: CDN是地理上分布的web server的集合,用于更高效地发布内容。通常基于网络远近来选择给具体用户服务的web server。这缩短了资源的传输响应时间,有效提高web性能。

DNS:DNS用于映射主机名和IP地址,一般一次解析需要20~120毫秒。浏览器会首先根据页面的主机名进行域名解析,在有ISP返回结果之前页面不会加载任何内容,所以减少DNS查找可以有效降低等待时间。为达到更高的性能,DNS解析通常被多级别地缓存,如由ISP或局域网维护的caching server,本地机器操作系统的缓存(如windows上的DNS Client Service),浏览器。IE的缺省DNS缓存时间为30分钟,Firefox的缺省缓冲时间是1分钟。我们能做的是尽量减少一个页面的主机名,但要在浏览器最大并行下载数跟dns查找之间做权衡。根据雅虎的研究,最好将主机名控制在2-4个内。

重定向:将一个URL重新路由到另一个URL。重定向功能是通过301和302这两个HTTP状态码完成的。这是一种最耗费资源、经常发生而很容易被忽视的重定向是 URL 的最后缺少 / ,导致自动产生结尾斜线的原因是,浏览器在进行get请求是必须指定一些路径;如果没有路径它就会简单的使用文档根。(主机缺少结尾斜线是不会发生重定向)缺少结尾斜线发生重定向是很多web服务器的默认行为。需要在服务器端设置方可消除。