webkit
文章平均质量分 88
Anita-Sun
一只热衷于分享前端知识的奶牛猫~ ️
展开
-
Chrome Devtool 调试 Javascript
重现错误单击打开演示。演示在新选项卡中打开。在 Number 1 中输入数字5在 Number 2 中输入数字2点击 Add Number 1 and Number 2熟悉 Sources 面板 UI点击Sourceget-started 是 get-started.html(不包括JS)get-started.js 就是 get-started 的 js 文件使用console.log()使用console.log(),您需要手动打开源代码,找到相关代码,插入consol原创 2021-12-06 16:30:31 · 757 阅读 · 0 评论 -
webkit 学习笔记 - 8. 硬件加速机制
硬件加速机制对于 GPU 绘图而言,通常不像软件渲染那样只是计算其中更新的区域,一旦有更新请求,如果没有分层,引擎可能需要重新绘制所有的区域,因为计算更新部分对 GPU 来说可能耗费更多的时间。当网页分层以后,GPU 渲染只需要绘制对应的 RenderLyaer 对象的所有内容(对于 TileLayer 不是这样的情况),并将它们和之前的层合成起来即可硬件渲染机制在 RenderLayer 树建立之后需要做三件事来完成之后的网页渲染:将某些不满足条件的 RenderLayer 对象组合在一起,形成原创 2021-12-03 16:47:25 · 473 阅读 · 0 评论 -
webkit 学习笔记 - 7.渲染基础
RenderObject 树对于可视节点(head、meta 等为非可视节点),Webkit 会为它们建立相应的 RenderObject 对象,这个对象保存了为绘制 DOM 节点所需要的各种信息。这些 RenderObject 对象同 DOM 节点一样,也会构成一棵树,称为 RenderObject 树每个 DOM 对象都会递归调用 attach 函数,该函数检查 Element 对象是否需要创建 RenderObject,如果需要,则调用 NodeRenderingContext 类来创建相应的原创 2021-12-03 15:39:15 · 676 阅读 · 0 评论 -
webkit 学习笔记 - 6 . CSS解释器和样式布局
CSS 基本功能框模型框模型是布局计算的基础,渲染引擎可以根据框模型来理解该如何排版元素以及元素之间的位置关系包含块模型当WebKit计算元素的箱子的位置和大小时,WebKit需要计算该元素和另外一个矩形区域的相对位置,这个矩形区域成为该元素的包含块。框模型就是用在包含块内计算和确定各个元素的包含块的具体定义如下:根元素的包含块称为初始包含块,通常它的大小就是可视区域(Viewport)的大小对于其他位置属性设置为static或者relative的元素,它的包含块就是最近祖先的箱子模原创 2021-12-03 14:54:41 · 285 阅读 · 0 评论 -
webkit 学习笔记 - 5. HTML解释器和DOM模型
DOM 模型DOM(Document Object Model)定义的是一组与平台、语言无关的接口,该接口允许编程语言动态访问和更改结构化文档。W3C标准化组织定义一系列 DOM 接口,随着时间的推移,目前已经形成了三个演进的标准:DOM Level 1、DOM Level 2、DOM Level 3,每个 Level 都是在原有的基础上增加新的接口以加强功能。各个阶段比较重要的功能如下:Level 1Core: 支持 XML 文档HTML: 在 Core 的基础上对 HTML 文档进行访问,把原创 2021-12-03 14:18:37 · 532 阅读 · 0 评论 -
webkit 学习笔记 - 4. 资源加载和网络栈
Webkit 资源加载机制资源HTML 支持的资源主要包括以下类型:HTML文档JavaScript 文件CSS 样式文件图片SVGCSS Shader视频、音频和字幕:多媒体资源及支持音视频的字幕文件(TextTrack)字体文件XSL 样式表:使用 XSLT 语言编写的 XSLT 代码文件上面这些资源在 Webkit 中均有不同的类来表示它们,它们的公共基类是 CachedResource。HTML 对应的资源类型叫 CachedRawResource 类资源类的前面原创 2021-12-03 13:40:38 · 435 阅读 · 0 评论 -
webkit 学习笔记 - 3. Webkit构架和模块
Webkit 构架和模块Webkit 架构因为不同浏览器的需求,在Webkit中,一些代码是可以共享的,但是另一部分是不同的,这些不同的部分称为Webkit的移植(Ports)webkit 构架WebCore部分包含了被各个浏览器所使用的 Webkit 共享部分,这些都是加载和渲染网页的基础部分,他们必不可少,具体包括HTML解释器、CSS解释器、SVG、DOM、渲染树(renderObject,renderLayer),以及Inspector(调试器)JavaScriptCore 引擎是 W原创 2021-12-03 09:52:58 · 676 阅读 · 0 评论 -
webkit 学习笔记 - 2. HTML 网页和结构
网页结构框结构框结构用来对网页的布局进行分割,将网页分成几个框,例如 frameset,frame,iframe 等元素都会形成新的框。每一个框结构包含一个 HTML 文档,最简单的框结构网页就是单一的框,当然,一个网页中也可以有多个框。层次结构网页的层次结构是指网页中的元素可能分布在不同的层次中,也就是说某些元素可能不同于它的父元素所在的层,因为某些原因,Webkit 需要为该元素和它的子女建立一个新层Webkit 的网页渲染过程在网页中,我们把当前可见的区域称之为视图Webk原创 2021-12-03 08:48:55 · 316 阅读 · 0 评论 -
webkit 学习笔记 - 1. 浏览器与浏览器内核
浏览器chrominumChrominum 本身就是一个浏览器,而不是Chrome浏览器的内核,Chrome浏览器一般选择Chrominum的稳定版本作为它的基础格局对于桌面系统而言,IE、Firefox、Chrome占据了市场90%的浏览器份额。而在移动端,由于苹果的IOS系统和谷歌的Android系统占据了绝对领先的地位,因而基本上移动端的浏览器都是基于WebkitHTMLHTML1.0由著名的Berners-Lee于1991年提出,此后经历了多次版本更新,直到1997年4.0版本原创 2021-12-03 08:28:15 · 1374 阅读 · 0 评论