分析url从输入到展过程中的页面优化、performance

浏览器会开启一个线程处理URL请求

url从输入到展示页面的过程
1、输入网址
2、DNS解析
3、建立tcp连接（请求队列queuing、请求等待stalled
4、客户端发送HTPP请求
5、服务器处理请求　
6、服务器响应请求
7、浏览器下载资源并展示HTML
8、浏览器发送请求获取其他在HTML中的资源。

优化

页面本身的加载性能 + 所有依赖资源的加载性能
浏览器：C 服务器：S
C减少请求数
C优化请求顺序
压缩传输的数据
S提升传输效率

---

中间
Gzip Components Gzip压缩
几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%。压缩代码体积

设置客户端缓存：Cache-control 强缓存和协商缓存HTTP强缓存与协商缓存

---

C客户端
代码习惯
Put Stylesheets at the Top 把CSS放顶部：让浏览者能尽早的看到网站的完整样式。
Put Scripts at the Bottom 延迟加载非必要脚本：网站呈现完毕后再进行功能设置，当然这些JS要在你的加载过程中不影响内容表现。

避免CSS Expressions：CSS表达式只被IE支持的东西执行时候的运算量非常大，移动一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个（就是在说IE6）

减少DOM的访问次数：JS访问DOM是很慢的，尽量不要用JS来设置页面布局。

减少图片、css、script、flash等元素的数量、把多个JS、CSS在可能的情况下写进一个文件
页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。
减少iframe数量，更有效的利用 ifames
iframe 优点：有利于下载缓慢的广告等第三方内容，安全沙箱，并行下载脚本 iframe 缺点：即使为空也会有较大资源消耗，会阻止页面的onload，非语义
尽量用GET方式进行AJAX请求
Get 方法和服务器只有一次交互（发送数据），而 Post 要两次（发送头部再发送数据）。
减小Cookie：Cookie在服务器及浏览器之间的通过文件头进行交换，尽可能减小Cookie体积，设置合理的过期时间，能够很好的提高效率。

---

S服务器
使用HTTP 1.0/1.1协议，chrome只允许每个源拥有6个TCP连接，因此可以通过划分子域将多个资源分布在不同子域上。3-5个即可
但是需要注意多个子域意味着更多的DNS查询时间

CDN加速
Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率

performance

window.performance.：获取网页加载详细性能指标的API

window.performance.timing完整的网页本身加载性能数据

navigationStart属性：在用户代理完成提示卸载上一个文档后立即返回时间。如果没有以前的文档，此属性必须返回与取启动相同的值。

unloadEventStart属性：如果以前的文档和当前文档的来源相同[IETF RFC 6454]，则此属性必须在用户代理开始上一文档的卸载事件之前立即返回时间。如果没有以前的文档或以前的文档与当前文档的来源不同，此属性必须返回零。

unloadEventEnd属性：如果以前的文档和当前文档的原点相同，则此属性必须在用户代理完成上一文档的卸载事件后立即返回时间。如果没有以前的文档或以前的文档与当前文档的来源不同或卸载尚未完成，则此属性必须返回零。如果导航时有 HTTP 重定向或等价物，并且并非所有重定向或等价物都来自同一来源，则卸载和卸载必须返回零。

redirectStart属性：如果导航时有 HTTP 重定向或等价物，如果所有重定向或等价物都来自同一来源，则此属性必须返回启动重定向的取件的开始时间。否则，此属性必须返回零。

redirectEnd属性：如果导航时有 HTTP 重定向或等价物，并且所有重定向和等价物都来自同一来源，则此属性必须在收到最后一个重定向响应的最后一个节后立即返回时间。否则，此属性必须返回零。

fetchStart属性：如果要使用 HTTP GET或等价物获取新资源，取件必须立即返回用户代理开始检查任何相关应用程序缓存之前的时间。否则，它必须返回用户代理开始获取资源的时间。

获取资源的第一步是查询是否有相应的缓存，确认需要需要请求资源，然后DNS

domainLookupStart属性：此属性必须在用户代理开始域名查找当前文档之前立即返回时间。如果使用持久连接[RFC 2616]或从相关应用程序缓存或本地资源检索当前文档，此属性必须返回与取启动相同的值。

domainLookupEnd属：用户代理完成域名查找当前文档后立即返回时间。如果使用持久连接[RFC 2616]或从相关应用程序缓存或本地资源检索当前文档，此属性必须返回与取启动相同的值。

connectStart属性（TCP）：此属性必须在用户代理开始建立连接到服务器以检索文档之前立即返回时间。如果使用持久连接[RFC 2616]或从相关应用程序缓存或本地资源检索当前文档，此属性必须返回域名查找端的价值。

connectEnd属性:在用户代理完成与服务器的连接以检索当前文档后立即返回时间。如果使用持久连接[RFC 2616]或从相关应用程序缓存或本地资源检索当前文档，此属性必须返回域查找端的价值
如果传输连接失败，用户代理重新打开连接，则连接启动和连接End应返回新连接的相应值。
连接端必须包括建立传输连接的时间间隔以及其他时间间隔，如 SSL 握手和袜子身份验证。

secureConnectionStart属性
此属性是可选的。没有此属性可用的用户代理必须将其设置为未定义的。当此属性可用时，如果当前页面的方案是HTTPS，则此属性必须立即返回用户代理开始握手过程之前的时间，以确保当前连接的安全。如果此属性可用，但未使用 HTTPS，则此属性必须返回零。

requestStart属性:在用户代理开始从服务器或相关应用程序缓存或本地资源请求当前文档之前立即返回时间。
如果在发送请求后传输连接出现故障，并且用户代理重新打开连接并重新发送请求，则请求启动应返回新请求的相应值。
不表示用户代理发送请求的完成

responseStart属性：在用户代理收到服务器或相关应用程序缓存或本地资源响应的第一个要节后立即返回时间。

responseEnd属性：在用户代理收到当前文档的最后一个节后或在传输连接关闭之前立即返回时间，以先到者为准。此处的文件可以从服务器、相关应用程序缓存或本地资源接收。

domLoading属性：解析DOM树

domInteractive属性：在用户代理将当前文档准备设置为"交互式"之前立即返回时间。

domContentLoadedEventStart属性：在用户代理在文档中触发DOM 会议加载事件之前立即返回时间。

domContentLoadedEventEnd属性：在文档的DOM 会议加载事件完成后立即返回时间。

domComplete属性：在用户代理设置当前文档准备"完成"之前立即返回时间。

如果当前文档准备状态多次更改为同一状态，则多米加载、多米时联动、多米定件加载事件开始、多米定件加载事件结束和圆顶完成必须返回相应文档准备更改首次发生的时间。

loadEventStart属性：在当前文档的负载事件被激发之前立即返回时间。尚未发射负载事件时，它必须返回零。

loadEventEnd属性：返回当前文档的负载事件完成的时间。当负载事件未被激发或未完成时，它必须返回零。