学习performanceApi

1. performance

performance分performance浏览器工具和performanceaApi

1.1 performance.timing

• timing :这个属性是记录不同事件发生时产生的时间戳,只读属性， 不再推荐使用该特性。虽然一些浏览器仍然支持它，推荐使用 PerformanceNavigationTiming
  

1.2 Performance.getEntries

返回一个数组 ，var entries = window.performance.getEntries(PerformanceEntryFilterOptions);
PerformanceEntryFilterOptions 可选
PerformanceEntryFilterOptions 是一个带有以下键值的字典：

• “name”, performance entry. 的名字
• “entryType”, entry 类型。合法的 entry 类型可以从PerformanceEntry.entryType 方法获取。
• “initiatorType”, 初始化资源的类型 (例如一个 HTML element). 其取值被 PerformanceResourceTiming.initiatorType 接口所定义。
• entries = performance.getEntries({name: “entry_name”, entryType: “mark” ，initiatorType：“xmlhttprequest”});这三个key在不传参所返回的数组对象中有体现可以看的到

var entries = window.performance.getEntries()

1.3 和浏览器渲染关系

客户端（浏览器）解析HTML内容并渲染出来，浏览器接收到数据包后的解析流程为：

1.3.1构建DOM树：词法分析然后解析成DOM树（dom tree），是由dom元素及属性节点组成，树的根是document对象

1.3.2 构建CSS规则树：生成CSS规则树（CSS Rule Tree）

1.3.3 构建render树：Web浏览器将DOM和CSSOM结合，并构建出渲染树（render tree）

1.3.4 布局（Layout）：计算出每个节点在屏幕中的位置

1.3.5 绘制（Painting）：即遍历render树，并使用UI后端层绘制每个节点。

浏览器渲染详细过程： 浏览器已经拿到了 server 端返回的 HTML 内容，开始解析并渲染。最初拿到的内容就是一堆字符串，必须先结构化成计算机擅长处理的基本数据结构，这个内部结构就是 DOM，DOM 提供了对 HTML 文档的结构化表述。渲染进程通过分词器将html字节流成功成一个个 token，包括 Tag token 和文本 token。HTML 解析器维护了一个 token 栈结构，token 会按照对应顺序入栈出栈，然后将 token 解析成 DOM 节点，并将 DOM 节点添加进 DOM 树中。 解析过程中，如果遇到< link href =＂…＂＞和< script src =＂…＂＞这种外链加载 CSS 和 JS 的标签，浏览器会异步下载，下载过程和上文中下载 HTML 的流程一样。只不过，这里下载下来的字符串是 CSS 或者 JS 格式的。 渲染引擎在接受到 CSS 文本时，会将 CSS 生成 CSS对象模型CSSOM(即CSS Object Model) ，通过document.styleSheets可获取所有CSS样式表，然后将 styleSheet 中的属性值进行标准化操作。最后将 DOM 和 CSSOM 整合成 RenderTree ，然后针对 RenderTree 进行渲染。 最后，渲染过程中，如果遇到＜ script ＞就停止渲染，执行 JS 代码。因为浏览器渲染和 JS 执行共用一个线程，而且这里必须是单线程操作，多线程会产生渲染 DOM 冲突。待＜ script ＞内容执行完之后，浏览器继续渲染。

为何要将 CSS 放在 HTML 头部？
这样会让浏览器尽早拿到 CSS 尽早生成 CSSOM ，然后在解析 HTML 之后可一次性生成最终的RenderTree ，渲染一次即可。如果 CSS 放在 HTML 底部，会出现渲染卡顿的情况，影响性能和体验。

为何要将 JS 放在 HTML 底部？
JS 放在底部可以保证让浏览器优先渲染完现有的 HTML 内容，让用户先看到内容，体验好。另外， JS 执行如果涉及 DOM 操作，得等待 DOM 解析完成才行， JS 放在底部执行时， HTML 肯定都解析成了 DOM 结构。 JS 如果放在 HTML 顶部， JS 执行的时候 HTML 还没来得及转换为 DOM 结构，可能会报错。