读书笔记-Webkit技术内幕-第二章

我只是一个搬运工,写的很好的一篇文章,可以说是对这本书的一个总结。
一篇读懂浏览器技术架构:链接

第二章

WebKit的网页渲染过程

根据数据的流向,渲染过程大概分为三个阶段:

  • 从网页的url到构建完DOM树
    • 从网页url到构建完DOM树这个过程,这个过程可能重复并且可能交叉
      • 当用户输入网页URL时,Webkit调用其资源加载器加载该URL对应的网页
      • 加载器依赖网络模块建立连接,发送请求并接收应答
      • Webkit接收到各种网页或资源的数据,其中某些资源可能是同步或异步获取的
      • 网页被交给HTML解释器转变成一系列的词语
      • 解释器根据词语构建节点,形成DOM树
      • 如果节点是js,调用js引擎解释并执行
      • js代码可能会修改DOM结构
      • 如果节点需要依赖其他资源,例如图片,css,视频等,调用资源加载器来加载他们,但是他们是异步的,不会阻碍当前DOM树的继续创建;如果是JS资源URL,则需要停止当前DOM树的创建,直到JS的资源加载并被JS引擎执行后才继续DOM树的创建
    • 网页在加载和渲染过程中会发出“DOMConent”事件和DOM的“onload”事件,分别在DOM树构建完成后,以及DOM树构建完并且网页所依赖的资源都加载完之后发生。
  • 从DOM树到构建完Webkit的绘图上下文
    • Webkit利用CSS和DOM树构建RenderObject树直到绘图上下文
      • CSS文件被CSS解释器解释成内部表示结构
      • CSS解释器工作完之后,在DOM树上附加解释后的样式信息,这就是RenderObject树
      • RenderObject节点在创建的同时,Webkit会根据网页的层次结构创建RenderLayout树,同时构建一个虚拟的绘图上下文。
    • RenderObject树的建立并不标识DOM树会被销毁,事实上,上述图中的四个内部表示结构一直存在,知道网页被销毁,因为他们对于网页的渲染起到了非常大的作用。
  • 从绘图上下文到生成最终的图像
    • 主要依赖2D和3D图形库
      • 绘图上下文是一个与平台无关的抽象类,它将每个绘图操作桥接到不同的具体实现类,也就是会如图具体实现类
      • 绘图实现类也可能有简单的实现,也可能有复杂的实现。
      • 绘图实现类将2D图形库或3D图形库绘制的结果保存下来,交给浏览器来同浏览器界面一起显示。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,142评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,298评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,068评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,081评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,099评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,071评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,990评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,832评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,274评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,488评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,649评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,378评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,979评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,625评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,643评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,545评论 2 352

推荐阅读更多精彩内容