资讯专栏INFORMATION COLUMN

WebKit 技术内幕之浏览器与WebKit内核

jindong / 3259人阅读

摘要:微信公众号爱写的阿拉斯加如有问题或建议,请后台留言,我会尽力解决你的问题。而技术内幕是基于的项目的讲解。有兴趣的朋友可以扫下方二维码公众号爱写的阿拉斯加分享开发相关的技术文章,热点资源,全栈程序员的成长之路和大家一起交流成长。

微信公众号:爱写bugger的阿拉斯加
如有问题或建议,请后台留言,我会尽力解决你的问题。
前言

此文章是我最近在看的【WebKit 技术内幕】一书的一些理解和做的笔记。
而【WebKit 技术内幕】是基于 WebKit 的 Chromium 项目的讲解。

第一章 浏览器和浏览器内核

WebKit 内核是苹果2005年先开发并提出开源的,后面 Google 也以此为基础,并独立开发出 Chromium 的,2008年 Google 为 WebKit 为内核创建了一个新项目 chormium ,后来 Google 的 chrom 占领了浏览器的大部分市场。

图 1-6 显示的是该项目的大模块。图中“WebKit 嵌入式接口”就是批的狭义 WebKit,它批的是在 WebCore(包含上面提到的 HTML 解释器、CSS 解释器和布局等模块)和 JavaScript 引擎之上的一层绑定和嵌入式编程接口,可以被浏览器调用。

Chromium 内核 Blink

2013年4月 gogle宣布从 WebKit中复制一份出来然后独立,并运作为Blink项目。

第二章 HTML网页与结构 1. 基本组成 html 、css、js。 2. html5新特性 video、canvas、2d、3d等,2012年就推出。 3. 框结构: iframe、frame、frameset,用于嵌入html文档。


上面的图说的是 iframe 的应用

4. 层次结构

理解层次结构非常重要,因为它可以帮忙你理解 WebKit 如何构建它来渲染,这有助于写高效的 HTML 代码。

网页的层次结构是指网页中的元素可能分布在不周的层次中,也就是说某些元素可以不同于它的父元素所在的层次,因为某些原因, WebKit 需要为该元素和它的子女建立一个新层。

图中各层的前后关系。“ 根层 ” 在最后面,“ 层 3 ”和 “层 4 ” 在最前面。规律是需要复杂变换和处理的元素,它们需要新层,所以 WebKit 为它们构建新层其实是为了渲染引擎在处理上的方便和高效。对于不同的基于 WebKit 的浏览器,分层策略也有可能不一样,通常是有一些基本原则的,比如 video 、2d、3d 转换、canvas 等。

5. WebKit网页内核的渲染过程

6. 编写高效代码注意点

最后

希望本文对你有点帮助。

下期分享 第三章 WebKit 架构与模块 敬请期待。

我不是大神,也不是什么牛人,写这个号的目的是为了记录我自学 web全栈 的笔记。

有兴趣的朋友可以扫下方二维码公众号—— 爱写bugger的阿拉斯加

分享 web 开发相关的技术文章,热点资源,全栈程序员的成长之路

和大家一起交流成长。

只要关注公众号并回复 福利 便送你六套、并且每套价值 3999 元的视频资源: Python、Java、Linux、Go、vue、react、javaScript

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96739.html

相关文章

  • Webkit技术内幕页面渲染过程

    摘要:文章同步到技术内幕之页面渲染过程最近拜读了传说中的技术内幕一书,有很大收获,尤其是对页面渲染有了较深的认识。解析语法分析,基于词法解释器生成的新标记,构建成抽象语法树,解析器尝试将其与某条语法规则进行匹配。 文章同步到github《Webkit技术内幕》之页面渲染过程 最近拜读了传说中的《Webkit技术内幕》一书,有很大收获,尤其是对页面渲染有了较深的认识。由于功力有限,而且书中设...

    vvpvvp 评论0 收藏0
  • Webkit技术内幕页面渲染过程

    摘要:文章同步到技术内幕之页面渲染过程最近拜读了传说中的技术内幕一书,有很大收获,尤其是对页面渲染有了较深的认识。解析语法分析,基于词法解释器生成的新标记,构建成抽象语法树,解析器尝试将其与某条语法规则进行匹配。 文章同步到github《Webkit技术内幕》之页面渲染过程 最近拜读了传说中的《Webkit技术内幕》一书,有很大收获,尤其是对页面渲染有了较深的认识。由于功力有限,而且书中设...

    adam1q84 评论0 收藏0
  • Webkit技术内幕页面渲染过程

    摘要:文章同步到技术内幕之页面渲染过程最近拜读了传说中的技术内幕一书,有很大收获,尤其是对页面渲染有了较深的认识。解析语法分析,基于词法解释器生成的新标记,构建成抽象语法树,解析器尝试将其与某条语法规则进行匹配。 文章同步到github《Webkit技术内幕》之页面渲染过程 最近拜读了传说中的《Webkit技术内幕》一书,有很大收获,尤其是对页面渲染有了较深的认识。由于功力有限,而且书中设...

    forsigner 评论0 收藏0
  • Webkit技术内幕页面渲染过程

    摘要:文章同步到技术内幕之页面渲染过程最近拜读了传说中的技术内幕一书,有很大收获,尤其是对页面渲染有了较深的认识。解析语法分析,基于词法解释器生成的新标记,构建成抽象语法树,解析器尝试将其与某条语法规则进行匹配。 文章同步到github《Webkit技术内幕》之页面渲染过程 最近拜读了传说中的《Webkit技术内幕》一书,有很大收获,尤其是对页面渲染有了较深的认识。由于功力有限,而且书中设...

    番茄西红柿 评论0 收藏0
  • 览器内核WebKit 架构模块

    摘要:多线程的主要目的就是为了保持用户界面的高响应度,保证线程进程中的主线程不会被任何其他费用时的操作阻碍从而影响了对用户操作的响应。 showImg(https://segmentfault.com/img/remote/1460000016113034); 微信公众号:爱写bugger的阿拉斯加如有问题或建议,请后台留言,我会尽力解决你的问题。 前言 此文章是我最近在看的【WebKit ...

    The question 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<