关于前端性能

浏览器的页面的加载流程

1. 浏览器输入url，浏览器发送请求到服务器，服务器将请求的HTML返回给浏览器。
2. 浏览器下载完成HTML(Finish Loading HTML)之后，便开始从上到下解析。
3. 解析的过程中碰到css和js外链（其实HTML的下载也是这个流程）都会执行以下过程：
   1. Send Request : 表示给这个外链对应的服务器发送请求
   2. Receive Response: 表示接收响应，这里是表示告诉浏览器可以开始从网络接收数据了
   3. Receive Data: 表示开始接收数据
   4. Finish Loading: 表示已经完成下载数据
   5. Parse Stylesheet/Evaluate: 默认情况下js下载完成之后执行Evaluate，css下载完成后会进行Parse Stylesheet。
4. 所有的css下载完成后Parse Stylesheet然后开始构建CSSOM
5. DOM（文档对象模型）和 CSSOM（CSS对象模型）会合并生成一个渲染树(Render Tree)
6. 根据渲染树的内容计算处各个节点在网页中的大小和位置（Layout，可以理解为“刻章”）
7. 根据Layout绘制内容在浏览器上（Paint，可以理解为“盖章”）。
   
   
   
   可以用下面这张图来表示上面的过程

Composite是什么？

我觉得这里会记录很多，所以重新开一篇文章
Composite

绘制

是指将渲染树转换为页面上像素的过程

问题：

1. 什么样的性能指标最能度量人的感觉？
2. 怎样才能从我们的真实用户中获取这些指标？
3. 如何用我们所获取的指标来确定一个页面表现得是否「快」？
4. 当我们得知用户所感知的真实性能表现后，我们应该如何做才能避免重蹈覆辙，并在未来提高性能表现？

1. 性能指标

首次绘制（First Paint）和首次内容绘制（First Contentful Paint）

First paint之前是白屏，在这个时间点之后用户就能看到（部分）页面内容

首次有效绘制（First Meaningful Pain）和主要元素时间点（Hero Element Timing）

慢会话

我们的浏览器通过将任务添加到主线程的队列中逐个执行来响应用户的输入。某些情况下，一些任务将可能会花费很长的时间来执行，如果这种情况发生了，主线程阻塞，剩下的任务只能在队列中等待。