浏览器专题系列 - 浏览器内核

简介: 浏览器专题系列 - 浏览器内核

简介


浏览器最重要或者说核心的部分。

通常还有“Rendering Engine-页面渲染引擎”,“Layout Engine-排版引擎”,“Browser Engine-浏览器引擎”等其它叫法。


浏览器内核决定了浏览器如何显示网页的内容以及页面的格式信息

主要负责对网页语法(HTML,JS,CSS)的解释,标记,整理,并将排版后的发送至输出设备(显示器,打印机等)。


不同浏览器的内核实现有所差异,导致对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染结果也可能不同,这就抛出了常见的 “浏览器兼容性问题


常见浏览器内核


这里不过多赘述内核的发展史,读者可以在文末的参考文章中进行拓展阅读


浏览器名称 内核 补充
IE Trident 主要包含在 window操作系统的 IE浏览器中
firefox Gecko Gecko的特点是代码完全公开,因此,其可开发程度很高
Safari webkit 苹果公司自己的内核,包含WebCore排版引擎及JavaScriptCore解析引擎
chrome Chromium/Blink/webkit Blink是开源引擎WebKit中WebCore组件的一个分支
Opera blink/Webkit/Presto 现在跟随chrome的步伐,同时参与开发


发展时间线


网络异常,图片无法展示
|


内核之间的关系


网络异常,图片无法展示
|


浏览器内核构成


最开始渲染引擎和JS引擎并没有明确区分,随着不断的迭代,JS引擎越来越独立,内核更就倾向于只指渲染引擎

核心的部分是“渲染引擎”,主要包括以下线程:


1. GUI渲染线程


  • HTML Parser 解析HTML
  • CSS Parser 解析Style数据
  • Layout过程,为每个可见节点的几何信息
  • Painting过程,遍历Render Tree,调用UI接口绘制每个节点


2. JavaScript 引擎线程


负责解析Javascript脚本,运行代码


3. 定时触发器线程


浏览器定时计数器并不是由 JavaScript 引擎计数的, 因为 JavaScript 引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确, 因此通过单独线程来计时并触发定时


4. 事件触发线程


当一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待 JavaScript 引擎的处理


5. 异步http请求线程


XMLHttpRequest 请求会在浏览器中新开一个线程请求, 将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件放到 JavaScript 引擎的处理队列中


移动端内核


主要有:

  • webkit: IOS内置浏览器,Android4.4之前
  • chromium:Android4.4之后内置
  • blink
  • trident:Windows Phone 8 这个玩意儿感觉不用关注了
  • u3: UC打造 -> UC浏览器
  • x5: 腾讯打造 -> QQ浏览器,腾讯系App内置webview


总结


兼容问题


正由于内核的 "多彩缤纷", 前端开发者最头疼的问题莫过于此


PC


最头痛的就是兼容IE,尽管js能力可以通过polyfill支持一部分,但部分样式能力的缺失是无法弥补的


移动端


最头痛的就是在使用跨端开发框架时(uni-app,React Native等)样式在双端的差异有时比较大


尤其是在低版本的Android机上,需要花费大量的去做兼容测试与视图适配

浏览器内核能力的统一,还有很长的路要走,需要一个契机


现状


  • google、opera拥抱的blink
  • IOS拥抱webkit
  • Firefox拥抱Gecko
  • 微软新版Edge已经采用Chromium内核,旧版为EdgeHTML


参考



原文首发于个人博客,专题系列会整理多篇,与大家一起学习,共同进步,如有错误,还请斧正


浏览器专题系列文章


相关文章
|
机器学习/深度学习 算法 计算机视觉
基于深度学习的停车位关键点检测系统(代码+原理)
基于深度学习的停车位关键点检测系统(代码+原理)
|
Web App开发 JavaScript Java
XWalkView+html 开发Android应用
在Android开发中有时候为了开发简洁和方便移植,采用了Html+WebView的开发模式,然而Android自带的WebView控件是调用的本机的浏览器内核,有些版本较老的手机浏览器和手机性能都不能满足需求(表现在html5不兼容、体验不流畅等地方)。
2408 0
|
11月前
|
Kubernetes Cloud Native Serverless
批处理系统:Batch批量计算与云原生Serverless Argo Workflows
本文对比了Batch批量计算与Serverless Argo Workflows在容器化批处理任务中的应用,分析了两者在任务定义、依赖关系、规模并发、高级编排、可移植性等方面的异同,帮助技术决策者根据自身需求选择合适的平台。
|
11月前
|
Web App开发 缓存 测试技术
|
6月前
|
人工智能 自然语言处理 监控
17.1K star!两小时就能训练出专属与自己的个性化小模型,这个开源项目让AI触手可及!
🔥「只需一张消费级显卡,2小时完成26M参数GPT训练!」 🌟「从零构建中文大模型的最佳实践指南」 🚀「兼容OpenAI API,轻松接入各类AI应用平台」
246 1
|
9月前
|
JavaScript Java Kotlin
深入 Spring Cloud Gateway 过滤器
Spring Cloud Gateway 是新一代微服务网关框架,支持多种过滤器实现。本文详解了 `GlobalFilter`、`GatewayFilter` 和 `AbstractGatewayFilterFactory` 三种过滤器的实现方式及其应用场景,帮助开发者高效利用这些工具进行网关开发。
1270 1
|
11月前
|
Web App开发 Rust 前端开发
常见浏览器内核
常见浏览器内核包括:Blink(用于 Chrome、Edge 等),注重性能与现代网页支持;WebKit(用于 Safari 和早期 Chrome),强调高效能;Gecko(用于 Firefox),支持强大扩展;Trident(用于 IE,已被 Edge 替代);EdgeHTML(用于早期 Edge,现已转为 Blink);Servo(实验性,基于 Rust)。这些内核负责渲染网页内容、处理 CSS 和 JavaScript,直接影响用户体验,并随技术发展持续演进。
|
API Android开发 开发者
android:configChanges
android:configChanges
174 4
|
前端开发 C++ 开发者
QML动画实战指南:打造华丽且高性能的用户界面动效
QML动画实战指南:打造华丽且高性能的用户界面动效
1763 0
|
SQL AliSQL API
阿里云ElasticSearch安装开源插件实践
阿里云ElasticSearch安装开源插件实践,包含较为常用的NLPchina/elasticsearch-sql与medcl/elasticsearch-analysis-stconvert两个插件的安装、使用测试及同类插件的差异对比

热门文章

最新文章