前端小知识之【浏览器内核】

目录

🌟前言

通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

浏览器内核分成两部分:渲染引擎和Javascript引擎,由于Javascript引擎越来越独立,内核就倾向于只指渲染引擎,负责请求网络页面资源加以解析排版并呈现给用户
默认情况下,渲染引擎可以显示html、xml文档及图片,它也可以借助插件显示其他类型数据,例如使用PDF阅读器插件,可以显示PDF格式

🌟PC端浏览器内核

内核 开发者 使用浏览器
Trident 微软开发 IE浏览器、360浏览器、猎豹浏览器、2345浏览器、搜狗高速浏览器、UC等
Gecko 火狐开发 Mozilla Firefox(火狐)、Mozilla SeaMonkey、waterfox、AOL for Mac OS X等
Webkit 苹果开发 Apple Safari、傲游浏览器3、360极速浏览器7.5以前、 360安全浏览器6.0、UC等
Blink Google和Opera Software开发 谷歌、 360安全浏览器7.0、360极速浏览器7.5等
Presto Opera开发 Opera前内核 (已废弃)

🌟Trident内核

Trident(又称为MSHTML),是微软开发的一种排版引擎。因IE捆绑在Windows中,所以占有极高的份额,它曾脱离W3C标准,后果就是大量的网页是专门为IE6等老trident内核编写,但这些网页的代码并不符合w3c标准,所以也就导致了我们要为早期IE的浏览器做兼容。其实不是浏览器的兼容性差了,而是你访问的的网页不符合新的标准,所以IE内核的浏览器存在很多兼容性的问题。

使用Trident内核的浏览器

IE浏览器、世界之窗、360安全浏览器兼容模式、遨游、搜狗浏览器、腾讯TT、UC浏览器(Webkit内核+Trident内核);其中部分版本的浏览器是双核浏览器,甚至是多核。国内的厂商一般把其他内核叫做"高速浏览模式",而Trident则是"兼容浏览模式",用户可以来回切换

🌟Gecko内核

FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。因为它是开源的,所以收到很多人的青睐,其可开发程度很高。Gecko是最流行的排版引擎之一.仅次于Trident。

使用Gecko内核的浏览器

Mozilla Firefox(火狐)、Mozilla SeaMonkey、waterfox、AOL for Mac OS X等

🌟WebKit内核(Chromium)

Webkit(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome(曾经)

使用webkit内核的浏览器

apple 的safari(win/mac/iphone/ipad)、塞班手机浏览器、Android手机默认的浏览器、

360安全浏览器6.0、360极速浏览器7.5之前、猎豹安全浏览器1.0-4.2、傲游浏览器3.X、UC浏览器等

🌟Blink内核

Blink是一个由Google和Opera Software开发的浏览器排版引擎,谷歌原来使用苹果的WebKit内核,后转向Blink内核,谷歌此举欲降低Webkit即苹果在浏览器市场的影响力。Opera也采用其Blink浏览器核心。

使用Blink内核的浏览器

谷歌浏览器、Opera、360安全浏览器7.0、360极速浏览器7.5、猎豹安全浏览器4.3以后等

🌟移动端浏览器内核

移动端的浏览器还是比统一的,基本是webkit内核,和少部分的的IE浏览器内核。 所以在我们去考虑移动端的布局的时候,我们最主要考虑的还是webkit。也就是几乎所有的属性和特性,移动端都是支持的。

  • IE手机版和PC版皆为Trident内核的
  • Opera手机版和PC版皆为Webkit内核(少部分版本仍然是Presto内核)
  • Firefox手机版和PC版皆为Gecko内核
  • Chrome手机版和PC版皆为Webkit内核
  • Safari手机版和PC版皆为Webkit内核
  • QQ手机浏览器内核为基于Webkit修改的X5内核
  • UC手机浏览器内核为基于Webkit修改的U3内核
  • 百度手机浏览器内核为基于Webkit修改的T5内核
  • 360手机浏览器内核为基于Chrome修改的G5内核,Chrome、Chromium的内核就是Webkit排版引擎,所以又有的说是采用了Webkit。

🌟应用

浏览器内核的不同导致了CSS3的属性在不同的浏览器存在兼容性,为了解决这个问题,我们需要在一些属性前面添加前缀。

核心 前缀
Trident -ms-
Gecko -moz-
WebKit内核 -webkit-
Presto -o-

🌟写在最后

更多前端知识请大家持续关注,尽请期待。各位小伙伴让我们 let's be prepared at all times!

✨原创不易,还希望各位大佬支持一下!
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富!

相关推荐
xiaofeichaichai5 小时前
Webpack
前端·webpack·node.js
问心无愧05135 小时前
ctf show web入门111
android·前端·笔记
唐某人丶6 小时前
模型越来越强,我们还需要 Agent 工程吗?—— 从价值重估到 Harness 实践
前端·agent·ai编程
智码看视界6 小时前
现代Web开发基础:全栈工程师的起航点
前端·后端·c5全栈
JS菌6 小时前
手写一个 AI Agent 全栈项目:从沙箱执行到子智能体的完整实现
前端·人工智能·后端
excel7 小时前
HLS TS 文件损坏的元凶:Git 提交与拉取
前端
Aphasia3117 小时前
https连接传输流程
前端·面试
徐小夕7 小时前
万字长文!千万级文档 RAG 知识库系统落地实践
前端·算法·github
threelab8 小时前
Three.js 物理模拟着色器 | 三维可视化 / AI 提示词
开发语言·前端·javascript·人工智能·3d·着色器