webkit
炒酱
前端开发
展开
-
Webkit底层原理(1)--Webkit架构和模块
一、Webkit架构Webkit的一个显著的特征就是它支持不同的浏览器,因为不同浏览器的需求不同,所以在Webkit中,一些代码可以共享,但是另一部分是不同的,这些不同的部分称为Webkit移植(Ports)。Webkit的整体结构如图:图中最下面是操作系统,Webkit可以在不同的操作系统上工作。不同浏览器可能会依赖不同的操作系统,同一个浏览器使用的Webkit也可能依赖不同的操作系统,例...原创 2019-10-02 16:21:52 · 1130 阅读 · 1 评论 -
Webkit底层原理(2)--资源加载和网络栈
资源加载和网络栈使用网络栈下载网页和网页中的资源是渲染引擎工作的第一步,也是非常耗时间的一步。一、Webkit资源加载机制1. 资源网页本身就是一种资源,例如图片、视频等。HTML支持的资源主要有以下类型:HTML:HTML元素;JavaScript:JavaScript代码,可以内嵌在HTML文件中,也可以单独以文件形式存在;CSS:层叠样式表,可以内嵌在HTML文件中,也可以...原创 2019-10-03 13:52:52 · 269 阅读 · 0 评论 -
Webkit底层原理(3)--HTML解释器
1. 解释过程HTML解释器的工作就是将从网络或本地磁盘获取的HTML网页和资源从字节流解释成DOM树结构。如下图:图中将这一过程描述得很清晰:首先是字节流,经过解码之后是字符流,然后通过词法分析器会被解释成词语(Tokens),之后经过语法分析器构建成节点,最后这些节点被组成一颗DOM树。2. 词法分析在进行词法分析之前,解释器首先要做的就是检查该网页内容使用的编码格式,以便后面使用合...原创 2019-10-04 14:58:18 · 855 阅读 · 0 评论 -
Webkit底层原理(4)--DOM事件机制和Shadow DOM
一、DOM事件机制1. 事件的工作过程事件在工作过程中使用两个主体,第一个是事件(event),第二个是事件目标(EventTarget)。每个事件都有属性来标记该事件的事件目标。当事件到达事件目标的时候,在这个目标上注册的监听者(EventListeners)都会被触发调用,当然这些监听者的调用顺序是不固定的,所以不能依赖监听者注册的顺序来决定你的代码逻辑。事件处理最重要的部分就是事件捕获...原创 2019-10-05 18:15:43 · 520 阅读 · 0 评论 -
Webkit底层原理(5)--CSS解释器和样式布局
从整个网页的加载和渲染过程来看,CSS解释器和规则匹配处于DOM树建立之后,RenderObject树(下一篇文章会介绍)建立之前,CSS解释器解释后的结果会保存起来,然后RenderObject树基于该结果进行规则匹配和布局计算。当网页有用户交互或者动画等动作的时候,通过CSSOM技术,JavaScript代码同样可以很方便的修改CSS样式,Webkit此时需要重新解释样式并重复以上这一过程。...原创 2019-10-06 11:28:24 · 445 阅读 · 0 评论