做那种英文网站有流量,ppt模板之家官网,绝对大气漂亮的响应式网站后台模板,wordpress页眉显示购物车WebKit内核游览器 基础概念游览器引擎Chromium 浏览器架构Webkit 资源加载这里就不得不提到http超文本传输协议这个概念了#xff1a; 游览器多线程HTML 解析总结 基础概念
百度百科介绍 WebKit 是一个开源的浏览器引擎#xff0c;与之相对应的引擎有Gecko#xff08;Mozil… WebKit内核游览器 基础概念游览器引擎Chromium 浏览器架构Webkit 资源加载这里就不得不提到http超文本传输协议这个概念了 游览器多线程HTML 解析总结 基础概念
百度百科介绍 WebKit 是一个开源的浏览器引擎与之相对应的引擎有GeckoMozilla Firefox 等使用Trident也称MSHTMLIE 使用和EdgeHTML也称ChakraEdge和其他UWP浏览器使用。
同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称主要用于SafariDashboardMail 和其他一些Mac OS X 程序。WebKit 前身是 KDE 小组的 KHTMLWebKit 所包含的 WebCore 排版引擎和 JSCore 引擎来自于 KDE 的 KHTML 和 KJS当年苹果比较了 Gecko 和 KHTML 后仍然选择了后者就因为它拥有清晰的源码结构、极快的渲染速度。苹果公司将 KHTML 发扬光大推出了装备 KHTML 改进型 WebKit 引擎的浏览器 Safari。 主要特点高效稳定兼容性好主要功能浏览器引擎软件授权免费 WebKit 所包含的 WebCore排版引擎和 JSCore 引擎均是从KDE的KHTML及KJS引擎衍生而来。它们都是自由软件在GPL条约下授权同时支持BSD系统的开发。所以Webkit也是自由软件同时开放源代码。 WebKit的优势在于高效稳定兼容性好且源码结构清晰易于维护。 尽管Webkit内核是个非常好的网页解析机制但是由于以往微软把IE捆绑在Windows里(同样的Webkit内核的Safari捆绑在Apple产品里Chrome捆绑在Google产品里)导致许多网站都是按照IE来架设的很多网站不兼容Webkit内核比如登录界面、网银等网页均不可使用Webkit内核的浏览器。 WebKit 内核在手机上的应用也十分广泛例如 Google 的手机Android、 Apple 的iPhone, Nokia’s Series 60 browser 等所使用的 Browser 内核引擎都是基于 WebKit。 WebKit 是一个开源项目其起源可追溯到 K Desktop Environment (KDE)。WebKit 项目催生了面向移动设备的现代 Web 应用程序。虽然设备本身的能力和形态因素都相当重要但移动用户最热衷的仍然是内容。如果移动用户可用的内容只是 Internet 用户可用内容的一个很小的子集那么用户体验充其量也只能划分为二等。 WebKit 还应用在了桌面的 Safari 浏览器内该浏览器是 Mac OS X 平台默认的浏览器。不管我们讨论的是桌面版本还是 iPhone 或 Android 上的浏览器引擎WebKit 均优先支持 HTML 和 CSS 特性。实际上WebKit 还支持尚未被其他浏览器采纳的一些 CSS 样式 — 这些特性正在得到 HTML5 规范的考虑。 HTML5 规范是一个技术草案集涵盖了各种基于浏览器的技术它包括客户端 SQL存储、转变、转型、转换等。HTML5 的出现已经有些时间了虽然尚未完成但一旦其特性集因主要浏览器平台支持的加入而逐渐稳定后Web 应用程序的简陋开端也将成为永久的记忆。Web 应用程序开发将成为主导 — 并且不只是在传统的桌面浏览器空间还将在移动领域。移动将一跃成为首要考虑而不再是后备之选。 游览器引擎
上面说到webkit主要应用在游览器引擎上那么市面上主流的游览器用的都是什么引擎呢 浏览器的内核引擎基本上是这些 Trident: IE 以Trident 作为内核引擎; Gecko: Firefox 是基于 Gecko 开发; WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器 基于 Webkit 开发。 同时WebKit也是苹果Mac OS X体统引擎框架版本的名称主要用于SafariDashboardMail 和其他一些Mac OS X 程序 自 2001 年 Webkit 从 KHTML 分离出去并开源后进入了各大浏览器厂商魔改 Webkit 的时期这些魔改的内核最终以 Chromium 受众最多而脱颖而出这也就是为什么当过前端开发的会经常听到产品在那里叫让用户用chrome内核游览器 Chromium 浏览器架构
我们通常说的浏览器内核指的是渲染引擎 WebCore 基本是共享的只是在不同浏览器中使用 Webkit 的实现方式不同。它包含解析 HTML 生成 DOM、解析 CSS、渲染布局、资源加载器等等用于加载和渲染网页。
JS 解析可以使用 JSCore 或 V8 等 JS 引擎。我们熟悉的谷歌浏览器就是使用 V8。比如比较常见的有内置属性 [[scope]] 就仅在 V8 内部使用用于对象根据其向上索引自身不存在的属性。而对外暴露的 API如 proto 也可用于更改原型链。实际上 proto 并不是 ES 标准提供的它是浏览器提供的浏览器可以不提供因此如果有浏览器不提供的话这也并不是 b ug。
Webkit Ports 是不共享的部分。它包含视频、音频、图片解码、硬件加速、网络栈等等常用于移植。 Webkit 资源加载
做过前端开发的都知道在解析 HTML 之前需要先获取资源那么资源的获取在 Webkit 中是如何进行呢
这里就不得不提到http超文本传输协议这个概念了
HTTP 是超文本传输协议超文本的含义即包含了文本、图片、视频、音频等等。其对应的不同文件格式在 Webkit 中 需要调用不同的资源加载器即 特定资源加载器。 HTTP是超文本传输协议HyperText Transfer Protocol的缩写是一种应用层协议用于在互联网上进行数据通信。 HTTP的主要功能包括
资源获取HTTP是用于获取如HTML文档这类资源的协议它是Web上进行任何数据交换的基础。客户端-服务器模型HTTP是一个标准的客户端-服务器模型请求通常由浏览器发起服务器响应这些请求。无状态性HTTP是一个无状态协议这意味着它不会记住之前的请求或用户信息每次交互都是独立的。基于TCP/IPHTTP协议建立在TCP/IP协议之上确保数据的可靠传输。请求和响应HTTP通过请求和响应机制工作客户端发送请求服务器处理后返回响应。报文格式HTTP请求和响应包含起始行、头部字段和消息主体其中头部字段以ASCII形式给出内容则遵循MIME类型。版本迭代目前最流行的HTTP版本是1997年发布的HTTP/1.1但HTTP/2和HTTP/3也逐渐在被广泛采用提供了更高效的性能和更好的安全性。 HTTP协议是Web工作的核心它定义了客户端和服务器之间的通信方式使得网页和其他资源能够在互联网上被有效地传输和显示。 而浏览器有四级缓存Disk Cache 是我们最常说的通过 HTTP Header 去控制的比如强缓存、协商缓存。同时也有浏览器自带的启发式缓存。而 Webkit 对应使用的加载器是资源缓存机制的资源加载器 CachedResoureLoader 类。
如果每个资源加载器都实现自己的加载方法则浪费内存空间同时违背了单一职责的原则因此可以抽象出一个共享类即通用资源加载器 ResoureLoader 类。 Webkit 资源加载是使用了三类加载器「特定资源加载器资源缓存机制的资源加载器 CachedResoureLoader 和 通用资源加载器 ResoureLoader」。
游览器多线程
浏览器架构是多进程多线程的其实多线程可以直接体现在资源加载的过程中进而在 JS 阻塞 DOM 解析中发挥作用。对于浏览器来讲从网络获取资源是非常耗时的。从资源是否阻塞渲染的角度对浏览器而言资源仅分为两类「阻塞渲染」如 JS 和 「不阻塞渲染」如图片。 多线程的好处就是高响应度UI 线程不会被耗时操作阻塞而完全阻塞浏览器进程。
HTML 解析
Webkit在解析半结构化的HTML时会生成DOM文档对象模型。而对于CSS样式表的解析严格来说CSSOMCSS对象模型并不是一棵树而是一个映射表集合。我们可以通过document.styleSheets来获取样式表的有序集合从而操作CSSOM。
对于CSSWebkit也有对应的优化策略即ComputedStyle。ComputedStyle的原理是如果多个元素的样式在不经过计算的情况下就可以确认是相同的那么只会进行一次样式计算其他元素则共享这个已经计算好的ComputedStyle。
总结
Webkit使用三种资源加载器来下载相应的资源并将它们存储在缓存池中。在解析HTML文档时如果遇到阻塞会启动另一个线程来收集后续资源的URL并将其发送给Browser进程。Browser进程随后调用网络栈来下载相应的本地或网络资源并将结果返回给Renderer进程进行渲染。Renderer进程将最终的渲染结果一系列合成帧发送给Browser进程然后Browser进程将这些合成帧发送给GPU以便在屏幕上显示。 博主 DTcode7 带您 溺亖在知识的海洋里嘿嘿嘿.~ 个人主页—— DTcode7 的博客 《微信小程序相关博客》 《Vue相关博客》 《前端开发习惯与小技巧相关博客》 《AIGC相关博客》 《photoshop相关博客》 吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤 愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进 文章参考https://zhuanlan.zhihu.com/p/181199232
