前言通过HTML5Performanc相关的API，我们可以对页面进行性能分析。下面将对几个重要的流程进行分析，给出耗时的计算方法，并给出一些有针对性的优化建议。//下面的时序表示performance.timinglettiming=window.performance.timing;DNS解析域名系统（英文：DomainNameSystem，缩写：DNS）是互联网的一项服务。作为一个将域名和IP地址相互映射的分布式数据库，可以让人们更方便地访问互联网。简单的说就是将一个域名映射到它对应的服务器IP地址，之后所有的请求都发送给服务器。DNS查询的基本过程如下：查找浏览器缓存浏览器会对DNS查询结果进行缓存，不同浏览器的缓存时间会有所不同。如果浏览器缓存存在，则DNS查找将在此处停止。查找系统缓存当浏览器缓存中没有需要的数据时，就会查找操作系统缓存。我们也可以手动配置host文件，让浏览器优先使用我们的配置。LookupRouterCache当所需数据在系统缓存中也不可用时，会找到路由器。查找到运营商的DNS缓存后，会向运营商的服务器（网络配置中的DNS服务器地址）请求DNS数据。递归搜索如果运营商的服务器中没有需要的数据，就会开始消耗最大的递归搜索。以m.taobao.com为例：首先向根域名服务器请求顶级域名com的IP地址；获取返回值后，向顶级域名com的服务器请求一级域名taobao的IP地址；域名淘宝的服务器请求二级域名m的IP地址；得到返回值后，查找完成，返回m.taobao.com的IP地址；根据网络的不同，此过程最多可能需要十秒钟。耗时计算：letdns=timing.domainLookupEnd-timing.domainLookupStart;了解了工作原理后，我们就可以对域名解析做一些优化了。这里有一些优化建议：考虑到域名解析是比较耗时的，而且有可能消耗不小，所以我们可以减少页面中使用的域名数量，从而减少解析次数；另一种方法是进行DNS预解析，预解析的域名地址会缓存在浏览器中。它可以加速；HttpDNS可以减少延迟，防止劫持；建立连接的耗时计算：lettcp=timing.connectEnd-timing.connectStart;优化点如下：避免重定向，这个不解释；适当的Mergerequest，同上，减少握手次数；longlinkkeep-alive，同上，减少握手次数；发送请求从发送请求到开始响应过程。耗时计算：letreq=timing.responseStart-timing.requestStart;优化点如下：避免重定向，或者不解释；减少请求数据量，检查是否有冗余cookies；使用CDN，缩短传输链路；接收数据从响应开始到数据传输完成的过程。耗时计算：letres=timing.responseEnd-timing.responseStart;优化点如下：减少html代码的大小，包括去冗余和代码压缩；传输时启用Gzip，进一步压缩传输数据量；采用CDN缩短传输链的方式；解析DOM树的耗时计算：letdom=timing.domInteractive-timing.domLoading;优化点如下：简化DOM结构，删除冗余节点，避免深度嵌套；同步js会阻塞解析过程，考虑拆分js段加载，延迟加载；网页加载完成下载并执行带有defer属性的脚本。耗时计算：让dom=timing.domInteractive-timing.domLoading;这部分的优化点主要集中在js代码层面的优化。不过js的优化值得写一本书来谈，这里就不展开了，主要说几点：减少需要加载的文件数量，合并代码；减少变量调用环节，多次访问将获取到的对象成员保存为局部变量；缓存函数运行结果；算法优化，减少迭代次数，减少迭代的工作量；缩短函数调用链；DOM加载完成，解析DOM和CSSOM，组合成渲染树，然后开始加载并执行defer脚本。当延迟脚本执行完成时，延迟脚本会触发DOMContentLoad事件。同时还有图片、css等，加载完这些资源文件后发生domComplete。load事件在domComplete之后立即触发。耗时计算letdomComplete=timing.domComplete-timing.domContentLoadedEventEnd;这块的优化主要集中在资源层面的优化，这也是一个比较大的工程，一样的，挑几点说：改用css，iconfont，svg图片根据屏幕分辨率适配.使用合适的图片格式。如果兼容，webp是个不错的选择。小图片使用数据url而不是资源prefetchlazyload。另外，DOMContentLoaded事件耗时，DOMLoad事件耗时。主要是为了执行js代码。优化建议是指网页加载完成。以上~
