web前端页面性能
前段性能的意义
对于访问一个网站，最花费时间的并不是后端应用程序处理以及数据库等消耗的时间，而是前端花费的时间（包括请求、网络传输、页面加载、渲染等）。根据web优化的黄金法则：80%的最终用户响应时间花在前端程序上，而其大部分时间则花在各种页面元素，如图像、样式表、脚本和Flash等，的下载上。减少页面元素将会减少HTTP请求次数。这是快速显示页面的关键所在。根据著名“2-5-8原则”，用户访问一个页面：
当用户能够在2秒以内得到响应时，会感觉系统的响应很快；
当用户在2-5秒之间得到响应时，会感觉系统的响应速度还可以；
当用户在5-8秒以内得到响应时，会感觉系统的响应速度很慢，但是还可以接受；
而当用户在超过8秒后仍然无法得到响应时，会感觉系统糟透了，或者认为系统已经失去响应，而选择离开这个Web站点，或者发起第二次请求。
对于一个网站如果希望抓住用户，网站的速度以及稳定性是首当其冲的。目前性能已经被列入google的网站的排名规则中。
前端性能关注的重点
1：加载时间指标，主要包括三个时间断
a. Time to First Impression
表示从用户在浏览器键入url按下回车键一刻开始到页面开始有反应（用户可以在页面中看见一点点内容）为止。经常能感觉到的一个信号就是网页开始显示title。
b.Time to onLoad Event
表示从页面开始显示内容，到浏览器开始触发OnLoad函数这一时间段。只有当初始的文本和所引用的对象加载完成，浏览器才开始触发OnLoad函数
c.Time to Fully Loaded
表示从上一时间段末到整个网页完全加载完成（所有OnLoad函数以及相关的动态资源加载完成）。在网页中含有timeout或定时刷新之类处理时较为难判断结束点。
2：资源情况指标
网页由初始的html文本中嵌入图片以及通过XHR或者修改dom树动态加载的内容组成，css负责样式，js负责行为。所以当网页资源过多为了下载资源，客户端和服务器的网络来回就更多。下面是资源方面相关的指标。
a. Total Number of Requests
包括html网页请求，css、js资源下载及其它网络请求。优化的目标之一是要尽量减少请求数。
b. Total Number of HTTP 300s/400s/500s
表示返回状态为300（重定向）、400（客户端错误）、500（服务器端错误）的http请求。尽量避免这些请求，以提高页面load的时间。造成这些状态的原因经常是服务器的实施、配置和部署问题。
c. Total Size of Web Site
构成网页元素总的大小。图片或者js库的增加都会对下载时间造成重要的影响。
d. Total Size of Images/CSS/JS
image、css、js在网页元素大小中占主要比例。
e. Total Number of XHR(XMLHttpRequest) Requests
通过js异步从服务器端获得数据的请求数。一些js框架提供了跟服务器端的更新机器，就是XHR请求。通过配置可以减少XHR请求的数目
3：网络连接指标
浏览器底层的网络连接对资源的下载速度有很大影响。资源的下载过程分为很多阶段。下面介绍这些阶段以及浏览器、网络、请求如何影响这些阶段的时间
a. DNS Time
dns 查询的时间。网页请求会产生一次寻找该网页资源所在主机的dns查询。在同个域名进行网页切换不会造成新的dns查询。
b. Connect Time
指浏览器和服务器之间建立tcp/ip连接的时间，对于ssl连接包括握手的时间。网络连接过慢、使用ssl、使用短连接而非常连接都是造成connect time较多的原因。
c. Server Time
指收到请求后服务器逻辑处理的时间，
d. Transfer Time
这一指标与浏览器和服务器之间的连接速度相一致，通过减小传输内容或使用cdn来降低Transfer Time。
e. Wait Time
等待时间和同一个域中服务资源的数量直接相关。每个域的浏览器的物理网络的限制，导致资源等待可用的连接。减少资源的数量，或将资源散布在不同的域，能将一时间降低。平均等待时间的大小更能反映等待时间是否需要注意。
f. Number of Domains / Single Resource Domains
部署网站资源的域主机数量是很重要的，因为它影响的DNS，连接和等待时间。
专门用户资源下载的域是必要的，他将直接减少等待时间。应避免单一的资源域，否则你将为dns查询以及资源下载付出昂贵的代价。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1：页面容量
用户每次请求的响应都需经过下载，本地浏览器渲染后重新展示。因此，页面容量的大小直接决定用户的体验。很多公司都有相应的页面设计规范，如“非首页静态页面含图片字节不超过60kb、全尺寸banner不超过14kb、竖边广告130X300 25kb”等。
2：资源数量
在服务器的传输过程中，如果资源文件太多，同样会降低网络传输速度，因此坚决杜绝无效资源文件在服务器与客户端之间传输。测试时需确认每个资源是否确实需要，并杜绝在过程中出现非500错误访问问题。
3：传输压缩
在HTTP请求后，客户端发出请求后，通过“Accept-Encoding：gzip,deflate”告知服务器客户端浏览器支持压缩。服务器根据客户端提供的信息选择对应的压缩方式传递数据信息。
4：本地缓存
在大型业务系统中，通常会将动态的业务响应转化成静态文件传输至客户端并写入缓存，当用户再次访问时，可根据实际情况从本地cache文件读取，以加快访问感觉，减轻服务器压力。
5：请求数量
尽量减少HTTP请求
减少HTTP请求数量带来显而易见的好处：a:减少DNS请求所耗费的时间 b:减少服务器压力 c:减少HTTP的请求头。
