浏览器进程

浏览器进程分为：

从上到下，从左到右，从外到里

• 主进程
• 插件进程
• 渲染进程
• GPU 进程
• 网络进程

渲染进程的线程

先总后分

• JS 引擎线程：和渲染互斥
  • 事件处理
  • 计时器：setTimeout setInterval
  • 异步请求 XMLHttpRequest
• GUI 渲染页面（解析、布局、绘制、回流重绘）

浏览器渲染流程

• 主线程

  • html 解析构建 DOM Tree
  • css 构建 CSSOM Tree
  • dom 和 om 树合成 Render Tree
  • 布局计算、生成布局 Layout Tree
  • 拆分出对应的层 Layer Tree，交给合成线程

• 合成线程

  • 层进行分割，根据优先级交给光栅化线程进行光栅化(几何信息真正的像素点)

• 光栅化线程池

  • 对块进行光栅化

• 合成线程

  • 生成合成帧，发送给 GPU 显示

• 前后端交互时候 cookie 跨域如何携带 withCredentials

link 标签或者 css 会阻塞 html 的解析吗？为什么？

阻塞渲染，不阻塞解析

浏览器从 html 响应到渲染出内容过程，渲染树和 DOM 树有什么区别

渲染树是： css os 树和 dom 结合

浏览器渲染过程中可以优化的点

• 减少重绘和回流

• 批量操作：操作 dom 进行合并，并保存

• 纯合成动画

• 懒加载、异步加载

• 虚拟加载

• 预渲染、ssr

• 双向绑定

• cdn

• 节流、防抖

JS 为什么是单线程的

单线程特点：同一时间只能做一件事情 如果是多线程，可能互相之间发生冲突，js 操作 dom, 防止互相发生覆盖，如果一个修改一个删除，浏览器决定由那个线程生效。 避免锁加深复杂性。

JS 为什么阻塞页面加载

如果在修改这些元素属性同时渲染界面（即 JavaScript 线程和 UI 线程同时运行）,那么渲染线程前后获得的元素数据就可能不一致了

为什么操作 DOM 慢

在 JS 操作元素的位置大小时候, 会引发重排

访问 DOM 属性成本可能会很高

• 跨线程通信
• 强制重排：js 线程和渲染线程相互独立， 浏览器重排优化等待一段时间进行批处理，JS 访问属性时，为了更正确的获取元素的几何信息，会立刻重新计算，强制重排