# leeCode **Repository Path**: wang-di-pino/lee-code ## Basic Information - **Project Name**: leeCode - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-01-02 - **Last Updated**: 2025-12-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README 程序运行的独立内存空间--进程 一个进程至少一个线程 浏览器进程(地址栏操作+界面滚动、点击操作) + 网络进程 + 渲染进程（html,css,js）等等 js 的执行 JS 是一门单线程的语言,这是因为它运行在浏览器的渲染主线程中,而渲染主线程只有一个。而渲染主线程承担着诸多的工作,渲染页面、执行 JS 都在其中运行。如果使用同步的方式,就极有可能导致主线程产生阻塞,从而导致消息队列中的很多其他任务无法得到执行。这样一来,一方面会导致繁忙的主线程白白的消耗时间,另一方面导致页面无法及时更新,给用户造成卡死现象。所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时,比如计时器、网络、事件监听,主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务,加入到消息队列的末尾排队,等待主线程调度执行。在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行 任务和任务队列 任务都有任务类型，同一个类型必须在同一个队列里。不同类型的任务，可以属于不同的队列，队列可以有多个。 Chrome 的实现里，如延时队列(优先级中)，交互队列（优先级高），微队列（优先级高）等等 js 事件执行 事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。根据 W3C 官方的解释,每个任务有不同的类型,同类型的任务必须在同一个队列,不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列,微队列的任务一定具有最高的优先级,必须优先调度执行。 js 计时器不精确的原因 1. 操作系统的计时函数本身就有少量偏差,由于 JS 的计时器最终调用的是操作系统的函数,也就携带了这些偏差 2. 按照 W3C 的标准,浏览器实现计时器时,如果嵌套层级超过 5 层,则会带有 4 毫秒的最少时间,这样在计时时间少于 4 毫秒时又带来了偏差 3. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差 4. 计算机没有原子钟(一个精确到纳秒级别的计时器，它不受操作系统的影响，因此计时器偏差最小) 什么是 reflow(重排) reflow 是浏览器渲染的过程，当发生了 DOM 的变化，浏览器会重新渲染页面，重新计算元素的位置，重新计算元素的大小，重新计算元素的显示和隐藏等等。获取节点布局信息的过程会立即触发 reflow。 什么是 repaint(重绘) repaint 是浏览器渲染的过程，当发生了 CSS 的变化，浏览器会重新渲染页面，重新计算元素的位置，重新计算元素的大小，重新计算元素的显示和隐藏等等。 前端的渲染流程 1. HTML 解析： 浏览器解析 HTML 文档，构建 DOM（文档对象模型）树。 2. 样式计算： 浏览器解析 CSS 文件，构建 CSSOM（CSS 对象模型），然后将 DOM 树和 CSSOM 树合并成渲染树。在这一阶段，浏览器确定每个元素的最终样式。 3. 布局（Layout）： 计算渲染树中每个元素在屏幕上的确切位置和大小。这一步也称为回流（reflow）。 4. 分层： 将渲染树分成多个图层，每个图层都是一个独立的渲染单元。这样可以提高性能，因为浏览器可以独立地处理每个图层。 5. 生成绘制指令： 浏览器为每个图层生成绘制指令，这些指令描述了如何将图层绘制到屏幕上。 6. 分块： 将绘制指令分成小块，以便更好地利用 CPU 和 GPU。 7. 光栅化： 将图层分块转换为位图，即光栅图像，这是计算机屏幕上的像素表示。 8. 绘制： 将光栅图像绘制到屏幕上，形成最终的页面呈现效果。