WebKit简介及工作流程

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: WebKit简介及工作流程

 WebKit的简介

       WebKit 是一个开源的浏览器引擎,最初由苹果公司开发,用于其 Safari 浏览器中。它不仅包括了 HTML、CSS 和 JavaScript 的解析与渲染能力,还集成了网络资源加载、图形处理、排版布局

等功能,为用户提供了丰富的网页浏览体验。WebKit 的架构设计围绕几个关键组件展开,包括多进程模型、渲染引擎(WebCore)、JavaScript 引擎(JavaScriptCore 或 V8)等。

WebKit的发展历史

       WebKit 的发展和历史可以追溯到1998年,当时它是以 KHTML 和 KJS 项目的形式存在。KHTML 是 KDE 小组开发的开源 HTML 渲染引擎,具有清晰的源码结构和极快的渲染速度。2001年,苹果公司看中了 KHTML 和 KJS 的潜力,并将其引入 Mac OS X 操作系统中,随后基于此开发了 WebKit。


       苹果公司选择 KHTML 是因为在比较了 Netscape(现在的 Firefox)的 Gecko 引擎和 KHTML 引擎后,认为 KHTML 拥有更清晰的架构,并且比 Gecko 更小巧。苹果工程师 Don Melton 在 2001 年 6 月 25 日正式从 KHTML 分支出来,在苹果内部开始了 WebKit 的研发。2003 年,苹果推出了装备 WebKit 引擎的浏览器 Safari。


       WebKit 和 KHTML 之间的合作关系最初是良好的,但随着时间的推进,两者之间的代码交换变得越来越困难。2005 年,KDE 开发者开始公开攻击苹果的做法,并称合作关系已经彻底瓦解。同年,苹果宣布将 WebKit 完全开源,KDE 和苹果的关系也得到了一些改善。


       Google 加入 WebKit 的开发是在 2008 年 Chrome 浏览器推出前后的事情。Chrome 浏览器使用 WebKit 引擎是 Android 团队的建议,但主要使用的其实还是从 KHTML 那里来的 WebCore。Google 的开发者开始提交大部分的 WebKit 更改,但最终决策权还是苹果的。


       2013 年,Opera 宣布转向 WebKit 引擎,但随后又放弃了 WebKit 引擎,跟随 Google 的新开发的 Blink 引擎。WebKit 项目催生了面向移动设备的现代 Web 应用程序,广泛应用于 iPhone、Android、Nokia 的 Series 60 浏览器等移动平台上的浏览器内核引擎。


       WebKit 的发展历史显示了其作为开源项目的重要性和影响力,它不仅推动了 Web 技术的发展,也为移动设备上的 Web 浏览体验做出了重要贡献。

WebKit 的工作流程

WebKit 的工作流程大致如下:请求与响应:用户输入 URL 后,浏览器进程发起网络请求,获取 HTML、CSS、JavaScript 等资源。

HTML 解析与 DOM 构建:HTML 解析器将 HTML 字符流解析成 DOM 树。

CSS 解析与 Render Tree 构建:CSS 解析器解析 CSS 规则,并与 DOM 树结合生成渲染树。

布局计算:计算渲染树中元素的精确位置和尺寸,称为布局或重排。

绘图:将布局后的元素绘制到屏幕上,这个过程称为绘图或重绘。

JavaScript 执行与 DOM 修改:JavaScript 引擎执行脚本,可能修改 DOM 结构或样式,触发重新布局和绘图。

事件处理与交互:用户交互触发事件,可能影响页面状态。

资源加载与缓存:静态资源如图片、字体通过网络加载,可能利用缓存机制。

       WebKit 通过这些步骤将网页代码转化为用户界面,实现网页的渲染和交互。了解 WebKit 的结构和工作原理有助于前端开发者优化网页性能和用户体验。

WebKit流程详细描述


       假设用户想要访问一个新闻网站,网址为 http://www.example.com。以下是 WebKit 在加载和渲染这个网页时所经历的步骤:


发起网络请求: 用户在浏览器地址栏输入网址并按下回车键。WebKit 的网络模块接收到这个请求,并发起一个 HTTP 请求到服务器。


接收响应内容: 服务器响应请求,将网页的 HTML、CSS 和 JavaScript 等资源发送回用户的浏览器。


HTML 解析: WebKit 的 HTML 解析器开始工作,解析服务器返回的 HTML 内容。解析器读取 HTML 标记,将其转换成 DOM(文档对象模型)节点,并构建 DOM 树。DOM 树是网页结构的内存表示,包含了所有 HTML 元素及其属性。


CSS 解析: 同时,CSS 解析器解析外部或内部 CSS 样式。解析器读取 CSS 规则,并将它们转换成 CSSOM(CSS 对象模型)树。


构建渲染树: WebKit 将 DOM 树和 CSSOM 树结合起来,生成渲染树。渲染树是一个包含所有可见元素及其计算样式的树状结构,它决定了页面的布局和呈现。


布局计算: WebKit 的布局引擎根据渲染树中的信息计算每个元素在页面上的位置和尺寸。这个过程称为“布局”或“重排”。布局引擎会考虑元素的宽度、高度、边距、填充、浮动等样式属性。


绘制: 一旦所有元素的位置和尺寸确定,WebKit 进入绘制阶段。渲染引擎遍历渲染树,将每个元素绘制到屏幕上。这个过程可能涉及到文本排版、图像渲染、颜色填充等操作。


JavaScript 执行: 如果页面包含 JavaScript 脚本,WebKit 的 JavaScript 引擎将执行这些脚本。脚本可能会修改 DOM 树或 CSSOM 树,从而触发额外的布局和绘制工作。


事件处理: 用户与页面交互,如点击链接或按钮,WebKit 会捕获这些事件并触发相应的 JavaScript 事件处理器,这可能会导致 DOM 或 CSSOM 的进一步修改。


资源加载与缓存: 页面中的图片、视频和其他媒体资源也会通过网络加载。WebKit 可能会使用缓存来存储这些资源,以加快后续访问的速度。


合成与显示: 最后,WebKit 将所有绘制的元素合成为最终的页面,并显示在用户的屏幕上。如果页面包含动画或过渡效果,WebKit 将根据需要更新渲染树,并重复上述步骤以刷新屏幕显示。


       通过这个例子,我们可以看到 WebKit 如何将静态的 HTML、CSS 和 JavaScript 代码转换为动态的、可交互的网页。WebKit 的高效工作流程确保了网页的快速加载和流畅渲染。    

相关文章
|
6月前
|
Web App开发 JavaScript 前端开发
【热门话题】WebKit架构简介
WebKit,开源浏览器引擎,支撑Safari、Chrome等,以其高效、稳定和跨平台特性著称。文章介绍了WebKit的起源、模块化设计,重点讲解了WebCore的DOM、CSSOM、Render Tree、布局、绘图与合成,以及JavaScriptCore的解析、编译和垃圾回收。WebKit2的多进程架构提升了稳定性和安全性。理解WebKit有助于优化网页性能和参与社区贡献。
61 0
|
3月前
|
数据采集 JSON JavaScript
|
4月前
|
Web App开发 前端开发 JavaScript
深入了解WebKit:简介及工作流程详解
📚 WebKit 是苹果创立的开源浏览器引擎,驱动Safari,且跨多平台。它以快速渲染、标准兼容和开源社区支持著称。WebKit从KHTML发展而来,2003年随Safari推出,2005年开源。关键组件包括WebCore(渲染),JavaScriptCore(JS引擎),DOM,CSS解析器和网络模块。工作流程涉及加载、解析、布局、渲染和绘制。用于测试的工具包括Web Inspector、DumpRenderTree和WebDriver。
80 2
|
3月前
|
Web App开发 JavaScript 前端开发
WebKit工作流程解析
WebKit的工作流程涉及将网页内容从HTML、CSS和JavaScript等源码转换为用户可以交互和观看的图像和文本。
23 0
|
4月前
|
Web App开发 缓存 前端开发
探索WebKit的奥秘:打造高效、兼容的现代网页应用
探索WebKit的奥秘:打造高效、兼容的现代网页应用
47 5
|
6月前
|
前端开发 JavaScript 数据可视化
Webkit结构简介
Webkit结构简介
42 0
|
6月前
|
编解码 搜索推荐 Android开发
Flutter笔记:发布一个模块 scale_design - (移动端)设计师尺寸适配工具
Flutter笔记:发布一个模块 scale_design - (移动端)设计师尺寸适配工具
107 0
|
网络协议 流计算
深入理解浏览器内核 - 概述
深入理解浏览器内核 - 概述
131 0
|
Web App开发 缓存 自然语言处理
前端roadmap_浏览器工作原理
• 浏览器架构总览 • 进程、线程 • 站点隔离 • 渲染流程总览 • 导航阶段 • UI进程👉拼装URL • 网络进程👉获取数据 • 重定向 • 根据Content-Type进行数据处理 • 唤起渲染进程 • 更新Tab状态 -->导航阶段结束 • 渲染阶段 • 编译处理 • BNF • HTML 解析器 • DOM • 标记算法 • DOM树构建算法 • 处理子资源 • 将CSS附加(attachment)到DOM节点==>生成Render Tree • CSS 解析器 • 创建呈现器 • 属性标准化 • 样式计算并保存到ComputedStyle • 布局(Layout)
364 0
|
安全 JavaScript 前端开发
浏览器内核之WebKit 架构与模块
此文章是我最近在看的【WebKit 技术内幕】一书的一些理解和做的笔记。 而【WebKit 技术内幕】是基于 WebKit 的 Chromium 项目的讲解。
571 0
浏览器内核之WebKit 架构与模块