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

目录

🌟前言

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

浏览器内核分成两部分:渲染引擎和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!

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

相关推荐
轻口味2 小时前
Vue.js `v-memo` 性能优化技巧
前端·vue.js·性能优化
prince_zxill2 小时前
Array.prototype 方法在复杂数据处理中的应用
前端·javascript·原型模式
GISer_Jing2 小时前
React基础知识回顾详解
前端·react.js·前端框架
阿正的梦工坊2 小时前
深入解析 Chrome 浏览器的多进程架构:标签页是进程还是线程?(中英双语)
linux·服务器·前端·chrome·架构·unix
无限大.3 小时前
前端知识速记--CSS篇:display
前端·css
小松聊PHP进阶3 小时前
万字总结PHP与JavaScript、PHP与PHP 实现开箱即用的AES、RSA和较为安全的自定义加解密算法
前端·后端·php
滚雪球~3 小时前
el-button 中icon在文字前和在文字后的写法
前端
半世轮回半世寻4 小时前
Nuxt后端接口实战:从0到1连接MongoDB数据库
前端
小乌龟快跑4 小时前
React 设计实现一个支持动态插槽的Layout组件
前端·面试
打野赵怀真4 小时前
行内元素和块级元素有什么区别,如何相互转换?
前端·javascript