页面性能影响因素概述

  性能       2015-10-24

前言:对于站点来说,越快的把用户请求的页面内容呈现给用户,对用户的体验越好;此时的“越快”问题便是站点性能优化问题,性能优化问题具体包含哪些问题呢?针对每个性能优化点有哪些解决方案呢?在本篇文章中将予以概述;需要注意的是,本篇并不会深入每个问题的细节,而对于每个问题都需要大量的精力去深入研究。

时间都去哪儿了

借用歌名《时间都去哪儿了》并非为了故弄玄虚,在用户发起请求到看到相关内容,这之间的时间差中都发生了什么呢?考虑一种最简单的情况,一个请求只返回一个HTML页面;当我们发起此请求时,将大致经历以下三个方面的时间消耗:

(1)网络传输:包括两个方面,把请求发送给服务器和服务器把响应数据返回给用户;
(2)服务器处理时间:服务器接到请求后,准备响应数据消耗的时间;
(3)客户端处理时间:如果客户端是浏览器,则为浏览器根据响应内容生成相应页面的时间;

注:除此以外,可能还包括DNS解析的时间、建立HTTP连接的时间、根据用户输入生成请求数据包的时间等,这些暂不考虑。

上述假定的是只需要加载一个HTML资源,更为现实情况是站点通常需要加载不同类型的多个资源(如图片、样式文件、JS文件等),如果对每个资源都需建立HTTP连接,这无疑又增加了页面全部加载所需要的时间;另外需要考虑的是页面资源加载是否并行、是否阻塞加载等;对于这部分内容一般由前端工程师负责。

提高网站性能的关键是找出瓶颈在哪里,可通过相关压力测试进行分析;本文并不会假定瓶颈可能出现的地方,只是从上述三个方面将可以优化的点加以概述。

网络传输

影响网络传输的两个因素是带宽和传输数据量的大小,这里的带宽指的是服务器端的带宽;对于这两个方面可通过提高服务器网络带宽和优化压缩代码予以改进;

(1)在网络带宽方面,除了服务器方面,用户自己的带宽对其自身的用户体验也很重要;作为开发人员,对此就心有余而力不足了!
(2)在优化压缩代码层面,可以改进的点包括优化HTML结构、精简CSS代码、使用更加短小精悍的JS库(如使用Zepto代替jQuery)、压缩HTML、CSS、JS代码;另一个可以优化的点为请求和响应的头(header),例如可以缩小Cookie的体积;最后需要提示的是:尽管可能这部分优化的非常好,但相对于其它的影响站点性能的因素,这部分优化可能并不足以对网站性能有显著的改善,这需要在需要优化的点和其对性能的提升上把握平衡

服务器处理

服务器端要根据用户的请求进行业务逻辑计算,而后把响应内容进行输出,在此先梳理一下服务器接到请求到返回数据这段时间内都做了什么?

【实际情况可能比较复杂,这里只是简要叙述】如果只有一台服务器,服务器拿到请求后,根据服务器配置定位到相应的处理页面,处理页面执行代码,可能需要查询数据库,把获取的内容填充到页面模板中,把生产的页面输出。这部分涉及的细节及可以优化的点相对较多,总体目标是缩短服务器的处理时间,可从下面几个方面考虑:

  • 如果涉及数据库查询,是否可以优化数据库和对查询结果进行缓存;
  • 是否可以把生成的动态页面进行缓存;
  • 是否可以静态化页面;
  • 脚本解释器生成的中间代码是否可以缓存;
  • 如果提供的全国性的功能服务,是否需要负载均衡,使用何种策略的负载均衡;
  • 达到服务器功能上线,是否考虑增加服务器资源,又将如何的合理部署服务器,要如何兼顾各大运营商;
  • 对于不同的页面资源,将分别提供什么样的并发策略;
  • 如何更好的优化服务器设置,使其达到服务上线,这里的服务上线很虚,需要各种指标加以判断,比如吞吐率等;

客户端处理

客户端处理需要解决的问题是根据请求的页面内容,尽快的把内容呈现给用户,给用户行为一个响应,即使部分资源还未加载完成;因此需要把影响页面呈现的因素推迟处理,比如:JavaScript脚本会阻塞页面渲染,把它放在页面底部;Img元素资源,可以使用懒加载技术。总之,要减少用户的视觉等待。

总结

提高页面性能,要优化的点很多,从上述三个方面多加考虑;但最为关键的是,找出影响性能的瓶颈所在

本文最后更新于2015-10-24 09:10:29