Q1 我们专注的web性能指标有那些？

1、页面加载时间

从页面开始加载到页面onload事件触发的时间。一般来说onload触发代表着直接通过HTML引用的CSS，JS，图片资源已经完全加载完毕。

2、首字节时间

从开始加载到收到服务器返回数据的第一字节的时间。达标时间=DNS解析时间+创建连接时间+SSL认证时间+100ms

3、DNS时间

进行域名解析所需要的时间，一般0-50ms

4、TCP时间

客户端建立连接的时间，一般0-100ms

5、资源传输时间

返回数据的第一字节到接收完成的时间

简单的说一个Web请求的处理包括以下步骤：

（1）客户发送请求 （2）web server 接受到请求，进行处理； （3）web server 向DB获取数据； （4）web server生成用户的object(页面)，返回给用户。给客户发送请求开始到最后一个字节的时间称为响应时间(第三步不包括在每次请求处理中）。

Q2 优化方法

优化方法实际上是对，web请求各个步骤的优。

一、请求优化几种方式1、资源压缩（优化资源文件的大小）

方案1：http压缩(在web服务器内设置压缩输出的内容)

gzip压缩1) 降低网络传输的字节数，加快网页加载的速度 2) gzip与搜索引擎的抓取工具有着更好的关系（Google可以直接通过读取gzip文件比普通手工抓取更快的检索网页） 3) 不仅限于静态内容，php动态页面和其他动态生成的内容均可压缩

deflate压缩

gzip和deflate区别1）压缩质量，mod_deflate压缩速度略快，mod_gzip的压缩比高2）mod_gzip对服务器CPU资源占用要高，mod_deflate保证服务器性能3）内部原理实现方式不一样

查看HTTP头，判断浏览器是否支持压缩

Accept-Encoding: gzip 支持mod_gzipAccept-Encoding: deflate 支持mod_deflate Accept-Encoding: gzip,deflate 同时支持mod_gzip 和mod_deflate

查看返回的响应HTTP头，出现以下信息表明返回数据已经被压缩

Content-Encoding : gzip

方案2：

对javascript代码，css样式代码进行语法压缩，减少文件大小1) 写好的js代码 css代码在网上压缩再上传2) 编写脚本自动压缩，uglify-js、clean-css压缩

2、资源合并

多个脚本合并到一个js文件，统一引用减少http请求。在请求头和服务端做配置，主要是静态资源的请求。1) uglifyjs js1.js js2.js -m -o merge.js cleancss -o merge.css style1.css style2.css2) 输出效果

nginx 配置

oncat on/off 是否开启合并

concat_unique 设置为off js和css都可以合并。设置为on，意味着同类型的文件才能合并concat_max_files 一个给定的配置段里面允许合并文件的数量，默认最多10个URI不能超过系统规定的page size，linux里执行getconf PAGESIZE获取系统的限制通常是4096字节

3、引用优化

1) css放在head内2) js放在尾部，防止浏览器加载js而阻塞页面3) Js加载方式<同步加载、异步加载、延迟加载>

3.1、Js同步加载

<script src=“/static2.0/dist/js/config.js”></script>阻塞模式，浏览器在下载或执行该js代码块时，后面的标签不会被解析。建议把<script>放在页面末尾</body>之前，尽可能减少这种阻塞行为。

3.2、Js异步加载（无阻塞资源加载）

方案一：<script>标签async=“async”属性， html5新特性（IE6-8不支持），async仅适用于外部脚本 ，使用src时。<script type="text/javascript" async=”async" src=";></script>

方案二：

动态创建script 标签

4、单独域名存放资源

单独服务器存放资源文件，减少主域名的http请求，让主服务器更快响应请求。（浏览器会对http同时请求数做限制）资源文件采用CDN，节点庞大，用户就近性，服务器负载判断。但是增加成本。

5、缓存

nginx层对静态文件设置缓存和过期时间

Expires:Wed, 19 Apr 2017 05:59:47 GMT//告诉浏览器此日期以前可以使用缓存文件

(缺点：服务器和客户端的时间设置可能不同，会使缓存失效时间不准确)

Cache-Control:max-age=604800 //表示资源在7天之内可以使用缓存文件，如果和Expires同时存在则覆盖Expires，避免服务器端和客户端时间不一致问题

6、dns预加载

1) 对静态资源域名做手动dns prefetching。 2) 对js里会发起的跳转、请求做手动dns prefetching。3) 不用对超链接做手动dns prefetching，因为chrome会自动做dns prefetching。 4) 对重定向跳转的新域名做手动dns prefetching，比如：页面上有个A域名的链接，但访问A会重定向到B域名的链接，这么在当前页对B域名做手动dns prefetching是有意义的。

7、HTTP2.0

Waiting(TTFB)

等待初始响应所用的时间，也称为至第一字节时间。此事件将捕捉到服务器往返的延迟时间，以及等待服务器传送响应所用的时间。

服务器响应时间表示加载必要HTML以开始呈现服务器所托管网页的时间，其中减去了Google和服务器之间的网络延迟时间。每次运行所用的时间可能有所不同，但这种差异不应太大。如果服务器响应时间变化很大的话，则表明性能上可能存在问题。

建议：

将服务器响应时间控制在200ms以内。有很多潜在因素可能会延缓服务器响应，例如应用逻辑缓慢、数据库查询缓慢、路由缓慢、框架、库、资源CPU不足或内存不足等。

http1.1 加载方式：

http2 加载方式

重大改变：

1) 多路复用允许同时通过单一的HTTP/2连接发起多重的请求-响应消息HTTP1.1协议中浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞。

2) 首部压缩 header compression

HTTP/1.1不支持HTTP压缩，HTTP/2使用了专门为首部压缩而设计的HPACK算法

3) 增加二进制分帧

4) 服务器端推送 Server Push

HTTP2.0能通过push的方式将客户端需要的内容预先推送到客户端缓存，遵循同源的情况下，不同页面之间可以共享缓存资源