Web表现层性能优化

习Web表现层性能优化

1：Web表现层调用过程分析

2： Web表现层性能优化概述

3：分阶段讲述Web表现层的优化思路和具体的优化手段 （1）连接网络并发送请求部分 （2）网络来回传输内容部分 （3）服务器处理请求部分 （4）浏览器渲染绘制部分

 

Web表现层调用过程分析

从输入URL地址或者点击URL的一个链接到页面呈现的一次请求，大致需要下面几个步骤

1：查找DNS，解析出URL对应的IP地址

2：初始化网络连接

3：发送HTTP请求

4：网络传输请求到服务器

5：Web服务器接收到请求，经过处理转发到相应的Web应用

6：Web应用处理请求，并返回相应的应答

7：网络传输应答内容到前端浏览器

8：浏览器开始解析从服务器端返回的内容，开始渲染和绘制

9：根据HTML内容来构建DOM（文档对象模型）

10：加载和解析样式，构建CSSOM（CSS对象模型）

11：根据DOM和CSSOM来构建渲染树，这个过程是按照文档顺序从上到下依次进行的

12：会根据构建渲染树的过程，在适当的时候，把已经构建好的部分绘制到界面上，中间还会伴随着重 绘(repaint)和回流(reflow)等，如此循环操作，直到渲染绘制完成

13：整个页面加载完成，会触发OnLoad事件。

 

简单分析一下这个过程

1：要通过URL请求服务器，浏览器就要知道这个URL对应的IP是什么，只有知道了IP地址，浏 览器才能准备的把请求发送到指定的服务器的具体IP和端口号上面。浏览器的DNS解析器负 责把URL解析为正确的IP地址。 这个解析工作是要花时间的，而且这个解析的时间段内，浏览器不能从服务器那里 下载任何东西。浏览器和操作系统提供了DNS解析缓存支持。

2：当获得了IP地址之后，浏览器会请求与服务器的连接，TCP经过三次握手后建立连接通道

3：浏览器真正发送HTTP请求，这个请求包含了很多东西，如cookie和其他的head头信息。

4：网络开始传输请求到服务器，这个会包括很多时间，比如网络阻塞时间、网络延迟时间和 真正传输内容的时间等，这是个很复杂的过程

5：Web服务器接收到请求，会根据URL里面的上下文，转交给相应的Web应用进行处理

6：Web应用会依次通过很多处理，比如：filter、aop的前置处理、IoC处理、真实处理对象的 寻找和创建等，这个根据每个应用的具体实现而不同。 然后会把请求转交到真实的处理对象，进行相应的业务处理，并生成Response对象

7：通过网络传输应答内容回到前端的浏览器。其实首先到达浏览器的是纯粹的html代码，不 包含什么图片，外部脚本，外部CSS等，也就是页面主要的html结构。

8：接下来就是浏览器解析页面，进行渲染和绘制的过程了，大致如下：

     （1）装载和解析Html文档，构建DOM，如果在解析中发现需要其它的资源，比如图片，那么浏 览器会发出请求以获取这个资源

     （2）装载和解析CSS，构建CSSOM

    （3）根据DOM和CSSOM来构建渲染树

    （4）然后对渲染树的节点进行布局处理，确定其在屏幕的位置

    （5）把渲染好的节点绘制到界面上

      以上步骤是一个渐进的过程，渲染引擎不会等到所有Html都被解析完才创建并布局 渲染树，它会在获取文档内容的同时把已经接收到的局部内容先展示出来。

9：重绘（repaint）的发生：如果渲染到后面，发现需要修改前面已经绘制元素的外观，比如 背景色、文字颜色等，不影响它周围和内部布局的行为，这就需要重绘这个元素

10：回流（reflow）的发生：如果渲染到后面，发现需要修改前面已经绘制好的元素的某些行 为，这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引 起它内部、周围甚至整个页面的重新渲染，这就是回流

 

window.onload()   必须等待网页全部加载完毕（包括图片等），然后再执行JS代码 只能执行一次，如果第二次，那么第一次的执行会被覆盖

$(document).ready() 只需要等待网页中的DOM结构加载完毕，就能执行JS代码 可以执行多次，第N次都不会被上一次覆盖

Jeuery中的ready()则是在页面的dom(节点)加载完后就可以做相应的操作,而不用等待全部元素加载完成.比如只知道页面某处有一张图片，而不一定要等它显示出来就可以为它绑定点击方法。

 

 

最基本的优化思路，大致来说： 1：尽量减少不必要的网络延迟 2：尽量减少请求数量 3：尽量减少来回传递的数据量 4：提高后台程序的响应速度 5：提高每个环节和步骤的处理能力，以加快速度

 

Web表现层性能优化

 

Web性能的基本指标

1：请求响应时间：从客户端发起请求，到web应用对用户请求作出响应，再发送反馈直至用户 接收完毕所需要的时间，也被称为TTLB(Time to Last Byte)，建议3/5/10秒。

2：最大并发用户数：用来衡量可用性，就是在不出现系统崩溃的情况下，能同时提供服务的 最大用户数量，通常分成两种： （1）严格意义上的并发：即所有的用户在同一时刻做同样的操作

（2）广义的并发：多个用户同时进行了操作，但是这些操作可以是相同的，也可以是不同的

3：事务响应时间：是针对业务的概念，事务可能由一系列请求组成，以完成业务功能

4：TPS(Transaction Per Second)：每秒钟系统能够处理的交易或者事务的数量，通用用来衡 量系统处理能力

5：吞吐量：在一次性能测试过程中，通过网络传输的数据量的总和。吞吐量/传输时间就是吞吐率

Web性能测试的常见工具

1：用于测试页面资源加载速度，比如： Firebug、Chrome的开发者工具、HttpWatch等

2：用于测试页面渲染呈现，以及js运行速度，比如： dynaTrace Ajax、Speed Trace等

3：对页面进行整体评价分析，比如： WebPageTest、Page Speed、yslow等

4：专业的测试工具，比如： Selenium、WebLoad、ab、LoadRunner等