你的网页有多快 — 从 DOMReady 到 Element Timing

总所周知，写文章需要一个标题。虽然我们搞代码的人一般都喜欢单刀直入，但是受制于文体的约束和发表载体的要求，有时不得不想一个标题。而起一个标题，不亚于起一个函数名或者变量名。单就这篇文章，我就有好几个草稿标题，例如：《页面加载指标演进之路》，《Element Timing：一种全新的页面速度指标》，《如何最准确地测量网页加载速度》，《新前端下的页面加载速度》，甚至《Element Timing In Action》，《三分钟学会测量页面速度》。最后综合考虑了读者的承受能力，编辑的意见，以及最最重要的：本人的孱弱写作实力，就取了个这样的一个非常大众化，既不会一眼就被当成垃圾，也不会被人挑出来仔细找茬的标题。

好了，废话不能多说，直接进入正题。

DOMReady
上古时期（指距今 10+ 年前的 jQuery 纪元），我们开发网页还停留在编写静态页面结构，用 JS 脚本对 DOM 进行直接操作，添加删除一些额外页面元素上。此时，DOMReady 基本就可以满足计算页面加载完成时间的需求，DOMReady （在 DOM 事件中是 DOMContentLoaded）代表页面文档完全加载并解析完毕, 一般包含HTML文档分析以及DOM树的创建、外链脚本的加载、外链脚本的执行以及内联脚本的执行，而不会等待样式文件,图片文件,子框架页面的加载。一般在页面 header 中打个时间戳，再在 jQuery 的 domReady 事件中打个时间戳，我们就可以计算到大致的 DOMReady 耗时了。

Navigation Timing
中古时期（指距今 10-5 年左右的 Ajax 纪元），网页的交互形式更加丰