前端监控 -- 性能监控

[RachelRen]

##性能检测

1. 首屏时间:
2. 白屏时间： 开始渲染时间 + 头部资源加载时间
3. 用户可操作时间：
4. 总下载时间
5. HTTP请求时间
6. HTTP响应时间

用户可操作时间

这个时间可以看作是所有DOM都解析完毕的时间，默认可以统计domready时间，因为通常会在这时绑定操作。对于使用了模块异步加载的js可以在代码中去主动标记要重要js的加载时间。这也是产品指标的统计方式。

使用jquery中的$(document).ready()即是此意义，就是performance.timing.domInteractive.

计算公式:

performance.timing.domInteractive - performance.timing.navigation

总下载时间

默认刻统计onload时间，这样可以统计同步加载的资源全部加载完的耗时。如果页面中存在很多异步渲染，可以将异步渲染完成的时间作为总下载时间。

计算公式:

performance.timing.loadEventStart - performance.timing.navigation

开始渲染时间： domLoading - navigationStart

为了更好的用户体验，浏览器渲染的时候，不必等所有DOM解析完再与CSSOM一起创建Render Tree,而是边解析边渲染，即解析完一部分渲染（显示）一部分。

所以白屏时间是在 dom ready 之前

###css会不会阻塞DOM解析，但是会阻塞DOM的渲染，而且会阻塞js的执行。

1. css 不会阻塞 DOM 解析， 在css下载的过程中，会继续解析dom
2. css不会阻塞 DOM tree， 但是因为渲染的话，是根据 DOM Tree + css tree 生成 render tree。
3. css 还会阻塞js的执行。如果脚本的内容是获取元素的样式，高度等css控制的属性，浏览器是需要计算的，也就是依赖于css。浏览器无法感知脚本内容到底是什么，为避免这样的情况，只好等前面所有的样式下载完之后，再执行js
4. css下载时，会继续生成dom tree

js

1. 会阻塞DOM的解析和渲染的
2. 如果加上defer和async，脚本下载的过程中是不会阻塞DOM解析的
3. 每次碰到<script>标签时，浏览器都会渲染一次页面。浏览器不知道脚本的内容，因而碰到脚本时，只好先渲染页面，确保脚本先获取到最新的DOM元素。
4. JS 阻塞 DOM 解析，但浏览器会"偷看"DOM，预先下载相关资源
5. 浏览器遇到 <script>且没有defer或async属性的 标签时，会触发页面渲染，因而如果前面CSS资源尚未加载完毕时，浏览器会等待它加载完毕在执行脚本。？

css不阻止dom的解析
js阻止dom的解析
css js都会阻止dom的渲染
原因：
js有可能影响dom的解析，比如在js里面新增dom等这些操作
css不能影响dom的解析
而 dom的渲染 是需要等js，css都解析完成后才进行的（浏览器就是这么机智），所以css js都阻止dom的渲染

• domLoading：这是整个过程的起始时间戳，浏览器即将开始解析第一批收到的 HTML 文档字节
• domInteractive：表示浏览器完成对所有 HTML 的解析并且 DOM 构建完成的时间点。
• domContentLoaded：表示 DOM 准备就绪并且没有样式表阻止 JavaScript 执行的时间点，这意味着现在我们可以构建渲染树了。
  • 许多 JavaScript 框架都会等待此事件发生后，才开始执行它们自己的逻辑。因此，浏览器会捕获 EventStart 和 EventEnd 时间戳，让我们能够追踪执行所花费的时间。
• domComplete：顾名思义，所有处理完成，并且网页上的所有资源（图像等）都已下载完毕，也就是说，加载转环已停止旋转。
• loadEvent：作为每个网页加载的最后一步，浏览器会触发 onload 事件，以便触发额外的应用逻辑。

几个重要的点

• domInteractive 表示 DOM 准备就绪的时间点。
• domContentLoaded 一般表示 DOM 和 CSSOM 均准备就绪的时间点。
  如果没有阻塞解析器的 JavaScript，则 DOMContentLoaded 将在 domInteractive 后立即触发。
• domComplete 表示网页及其所有子资源都准备就绪的时间点。
• 写在html里面的script节点的加载和解析会影响 domContentLoaded 事件的触发时间

defer属性相信大家也很熟悉了，MDN对此的描述是用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。设置这个属性，能保证DOM解析后马上打印出div。

DOMContentLoaded: 当页面文档加载并解析完毕之后会立马触发DOMContentLoaded事件，而不是等样式文件，图片文件和子框架页面的全部加载。实践证明触发这个事件时，有些css和js是已经加载的。写在html里面的script节点的加载和解析会影响 domContentLoaded 事件的触发时间

document.readyState === 'complete'

因为只要浏览器遇到 script 标记，就会进行阻止，并等到 CSSOM 构建完毕

加载是并行的，执行是串行的。html开始加载的时候，浏览器会将页面外联的css文件和js文件并行加载，如果一个文件还没回来，它后面的代码是不会执行的。刚刚我们的demo，我们阻塞了css文件几秒，此时js文件因为并行已经加载回来，但由于css文件阻塞住，所以后面 JsStartTime 的赋值语句是不执行的！当我们放开阻塞，此时才会运行到 JsStartTime 的赋值、js文件的解析、JsEndTime的赋值，由于大头时间加载早已完成，所以 JsEndTime 和 JsStartTime 的差值非常小。

前端性能——监控起步

原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的

非常好：评估关键渲染路径

研究首屏时间？你先要知道这几点细节: 并行串行