解析 html

css

谷歌源代码

github.com/chromium/chromium

vscode 插件，添加 git 地址在线看代码

github Repositories

• 谷歌内核 blink
• blink render 渲染器
• blink render resources html.css 浏览器样式
• 除了浏览器默认样式 js 都能操作
• F12 document.styleSheets 查看所有样式

例如：
给页面上所有 div 加边框

document.styleSheets[0].addRule("div","border: 2px solid #f40 !important")
只会作用到<style><link>

面试题

js 执行

js 执行过程中有可能修改 Dom 操作
所以必须等 js 执行

样式计算

关键字： 视觉格式化模型 盒模型 包含块 第二节课的资料 css 属性的计算过程

布局 layout

dom 树和 layout 树不一定是一一对应的

内容必须在行盒中 行盒和块盒不呢个相邻

布局面试题

分层

堆叠上下文有关的属性 z-index opacity transform

绘制 Paint

分块 Tiling

光栅化

画

渲染进程

• 渲染主线程
• 合成线程

transfom 效率高原因

重新排版 reflow 修改的是 cssom

面试题