Please enable JavaScript.
Coggle requires JavaScript to display documents.
Web API (Core (DOM, CSS, SVG)), #DNS解析 (过程 (向DNS服务器查询域名对应IP地址), 细节…
Web API
Core
DOM
CSS
SVG
#
DNS解析
过程
向DNS服务器查询域名对应IP地址
细节
DNS服务器分布式存储，查询逐级向上
得到IP
#
TCP连接
过程
用获取的IP与服务器建立TCP连接
默认网关
子网掩码
细节
TCP传输将数据打成小包，渐进式传输
建立连接
#
资源加载
过程
先通过URL在本地资源缓存池查找
无缓存资源
发送http请求资源
返回200，取得资源
返回404，资源未找到
有缓存资源
发送http请求查询资源是否更新，请求头If-Modified-Since
返回200，即返回新资源
返回304，无需更新
细节
资源类型
javascript
CSS
图片
SVG
CSS Shader
Video/Audio/字幕TextTrack
font
XSL
html
http状态码
200 OK
304 Not Modified
400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found
500 Internal Server Error
502 Bad Gateway
加载数据资源
#
html解析
过程
细节
html
DOM
生成DOMTree
#
CSS解析
细节
CSS
#
来源
编写
外部
内嵌
浏览器自定义
浏览器默认 （user agent stylesheet）
CSSOM
过程
CSS字符串经由解释器CSSParser处理转化为CSSOM形式，最终生成StyleRule
生成StyleRule
#
样式匹配
过程
通过DOM和StyleRule匹配，建立RenderStyle，进而生成RenderObject Tree， 遇到特定节点或CSS样式时进一步生成RenderLayer Tree
细节
RenderLayer规则
生成Render Tree
#
布局计算
过程
细节
布局计算是一个递归的过程， 这是因为一个节点的大小通常需要先计算他的子女节点的位置、大小等信息
各元素布局完毕
#
绘制
过程
软件渲染
硬件加速
细节
各元素图层绘制完毕
#
合成
过程
细节
各元素图层合并，显示网页
#
js引擎
CSS
