03月13, 2017

理解和应用Performance.timing

最近做了一个关于Web性能的分享,在准备课件时,需要对Web性能的话题进行全面的总结。

衡量性能时需要使用Performance.timing的数据,可无奈记忆力太差,过去学习了很多遍却依旧记不得Performance.timing提供了哪些信息,每次都像重新学习一番似得。

在这次学习中,我加强了Performance.timing与自身知识的联系,并对其进行总结分类。

组成

Performance.timing提供的数据主要包含以下几类:

  • 建立网络连接的各个阶段
    • DNS查询
    • 建立TCP、TLS连接
    • 重定向
  • 请求和响应时间
  • 卸载上一页
  • HTML parser执行状态
    分为以下几个阶段
    • loading:开始解析文档;在responseStart不久后开始。
    • interactive:解析完HTML
    • complete:加载完所有资源

容易混淆的时间点

navigationStart, fetchStart, connectStart, requestStart

  • navigationStart
    通常这个值与fetchStart相同。但如果上一个网页在用户试图离开时,通过onbeforeunload调出系统弹窗,那么navigationStart的值,记录的便是浏览器在上一个页面完成prompt to unload的时间,会比fetchStart的时间更早。
  • fetchStart
    浏览器准备获取文档时,在查询缓存前,会先记录fetchStart时间。
  • connectStart
    开始建立TCP网络连接的时间。 如果开启了持久连接,或当前文档可从缓存中获得,那么connectStart则与domainLookupEnd时间相同。
  • requestStart
    开始通过网络,或缓存请求当前文档的时间。

事件

Performance.timing中的某些时间点,对应着对前端性能十分重要的两个事件发生的时间。

Performance.timing 事件
domContentLoadedEventStart document的domContentLoaded事件
loadEventStart window的load事件

通过Performance统计性能瓶颈

瓶颈 衡量 可优化点
建立连接的时间 connectEnd - navigationStart DNS prefetching、减少重定向、CDN...
网络延时 responseStart - requestStart 服务端尽早返回、利用缓存、http2、CDN...
解析HTML domInteractive - responseStart 尽量避免js阻塞解析器

仅仅通过Performance.timing无法得知初次渲染的时间,因为样式资源可能会阻塞初次渲染,而我们从Performance.timing无法得知样式资源何时加载完成。 除了初次渲染时间,还有应用可用时间等等,都无法仅仅借助Performance.timing统计,需根据页面具体实现方式来统计。

因此,Performance.timing的主要作用,是帮助我们以更细的粒度统计网络情况。

资源

HTML5标准文档:Performance.timing

HTML5标准文档:Document的状态说明(Loading, Interactive, Complete)

本文链接:http://127.0.0.1:8360/post/performance_timing.html

-- EOF --

Comments