Resource Timing API 提供了高精度时间戳，用于度量当前页面加载时请求资源的速度。浏览器会在 加载资源时自动记录 PerformanceResourceTiming。这个对象会捕获大量时间戳，用于描述资源加 载的速度。 下面的例子计算了加载一个特定资源所花的时间:
const performanceResourceTimingEntry = performance.getEntriesByType('resource')[0];
console.log(performanceResourceTimingEntry);
// PerformanceResourceTiming {
// connectEnd: 138.11499997973442
// connectStart: 138.11499997973442
// decodedBodySize: 33808
// domainLookupEnd: 138.11499997973442
// domainLookupStart: 138.11499997973442
// duration: 0
// encodedBodySize: 33808
// entryType: "resource"
// fetchStart: 138.11499997973442
// initiatorType: "link"
// name: "https://static.foo.com/bar.png",
// nextHopProtocol: "h2"
// redirectEnd: 0
// redirectStart: 0
// requestStart: 138.11499997973442
// responseEnd: 138.11499997973442
// responseStart: 138.11499997973442
// secureConnectionStart: 0
// serverTiming: []
// startTime: 138.11499997973442
// transferSize: 0
// workerStart: 0
// }
console.log(performanceResourceTimingEntry.responseEnd – performanceResourceTimingEntry.requestStart);
// 493.9600000507198通过计算并分析不同时间的差，可以更全面地审视浏览器加载页面的过程，发现可能存在的性能瓶颈。
Web 组件
这里所说的 Web 组件指的是一套用于增强 DOM 行为的工具，包括影子 DOM、自定义 元素和 HTML 模板。这一套浏览器 API 特别混乱。 并没有统一的“Web Components”规范:每个 Web 组件都在一个不同的规范中定义。 有些 Web 组件如影子 DOM 和自定义元素，已经出现了向后不兼容的版本问题。 浏览器实现极其不一致。 由于存在这些问题，因此使用 Web 组件通常需要引入一个 Web 组件库，比如 Polymer。这种库可以 作为腻子脚本，模拟浏览器中缺失的 Web 组件。 注意 本章只介绍Web组件的最新版本。
HTML 模板
在 Web 组件之前，一直缺少基于 HTML 解析构建 DOM 子树，然后在需要时再把这个子树渲染出 来的机制。一种间接方案是使用 innerHTML 把标记字符串转换为 DOM 元素，但这种方式存在严重的 安全隐患。另一种间接方案是使用 document.createElement()构建每个元素，然后逐个把它们添加 到孤儿根节点(不是添加到 DOM)，但这样做特别麻烦，完全与标记无关。 相反，更好的方式是提前在页面中写出特殊标记，让浏览器自动将其解析为 DOM 子树，但跳过渲视频讲解染。这正是 HTML 模板的核心思想，而
