# 性能优化

# 进程

GUI渲染线程： 解析HTML、CSS，构建 DOM 树和 RenderObject 树，布局和绘制等。当界面需要重绘（Repaint）或由于某种操作引发回流（Reflow）时，该线程就会执行。
JavaScript引擎线程： 主要负责解析 JavaScript 脚本并运行相关代码。 JavaScript 引擎在一个Tab页（Renderer 进程）中无论什么时候都只有一个 JavaScript 线程在运行 JavaScript 程序。需要提起一点就是，GUI线程与JavaScript引擎线程是互斥的，这也是就是为什么JavaScript操作时间过长，会造成页面渲染不连贯，导致页面出现阻塞的原理。
事件触发线程： 当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待 JavaScript 引擎的处理。通常JavaScript引擎是单线程的，所以这些事件都会排队等待JS执行。
定时器触发器： 我们日常使用的setInterval 和 setTimeout 就在该线程中，原因可能就是：由于JS引擎是单线程的，如果处于阻塞线程状态就会影响记时的准确，所以需要通过单独的线程来记时并触发响应的事件这样子更为合理。
Http请求线程： 在 XMLHttpRequest 在连接后是通过浏览器新开一个线程请求，这个线程就Http请求线程，它将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件放到 JavaScript 引擎的处理队列中等待处理。

一般来说，可以把普通文档流看成一个图层。特定的属性可以生成一个新的图层。不同的图层渲染互不影响，所以对于某些频繁需要渲染的建议单独生成一个新图层，提高性能。但也不能生成过多的图层，会引起反作用。通过以下几个常用属性可以生成新图层

垃圾回收机制（Garbage Collection），无法从GC根到达的对象，都将被GC回收。

GC根，指的是全局对象（window / document / 控制台）

FP：首次绘制（First Paint），标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点
FCP：首次内容绘制（First Contentful Paint），标记浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至元素
LCP：最大内容渲染（Largest Contentful Paint），代表在viewport中最大的页面元素加载的时间. LCP的数据会通过PerformanceEntry对象记录，每次出现更大的内容渲染，则会产生一个新的PerformanceEntry对象.
TBT：总阻塞时长（Total Blocking Time），FCP到TTI间的时间，连续占用主线程的时间，是导致动画卡顿的罪魁祸首
LCP：最大内容绘制（Largest Contentful Paint），从输入URL到页面内容加载完的时间

JS引擎线程和GUI渲染线程会相互阻塞，为了防止阻塞，可以将高耗时的js运算，放到worker去