浏览器原理
渲染流水线
- 构建DOM树：HTML → DOM树
- 样式计算：构建CSS树 → 单位转换 → 计算每个节点样式
- 布局阶段：创建布局树 → 布局计算 → 分层
- 图层绘制：输出绘制指令列表
- 栅格化：GPU绘制，视窗优先级最高
重排、重绘、合成
- 重排：修改宽高等属性 → 整个渲染流水线重走
- 重绘：修改色彩属性 → 跳过布局、分层阶段
- 合成：transform动画 → 不触发重排重绘
JS执行机制
- V8解析JS后先编译，生成上下文再运行
- 全局上下文 → 函数运行上下文 → eval上下文
- 调用栈：控制执行上下文，递归过深会爆栈
- 作用域链：由词法作用域决定，与运行时无关
- ES6箭头函数不创建自己的执行上下文
消息队列
- 宏任务：由宿主发起（浏览器/Node.js）
- 微任务：由引擎发起（Promise等）
- 微任务在宏任务主要任务执行完后、下一个宏任务前执行
浏览器请求
- 构建HTTP请求行
- 浏览器本地缓存拦截
- DNS查询
- TCP队列（HTTP/1.1: 6个TCP; HTTP/2.0: 1个TCP多路复用）
- 建立TCP连接