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

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

🌟前言

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

浏览器内核分成两部分:渲染引擎和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-
目录
相关文章
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
129 2
|
6月前
|
前端开发
调试前端时,在浏览器上修改参数并重新调用接口
有时候我们的页面点击过了,但是接口出问题,想修改参数再调用一次,一般是用apiPost工具把接口复制,再加上token和参数,但是这样非常的效率比较低。
683 0
|
3月前
|
存储 缓存 前端开发
前端谷歌浏览器面版属性
【8月更文挑战第19天】前端谷歌浏览器面版属性
44 0
|
3月前
|
Web App开发 监控 前端开发
前端必备浏览器调试工具
【8月更文挑战第19天】前端必备浏览器调试工具
57 0
|
12天前
|
前端开发 JavaScript API
前端开发的秘密花园:这些技巧让你轻松应对各种浏览器兼容性问题!
【10月更文挑战第31天】前端开发是一个充满创意与挑战的领域,追求极致用户体验的同时,浏览器兼容性问题却时常阻碍我们前进。本文将介绍几种解决浏览器兼容性的最佳实践:使用CSS前缀、Autoprefixer工具、现代JavaScript特性与Babel转译、Polyfill与Feature Detection、响应式设计以及跨域问题处理。掌握这些技巧,助你轻松应对各种兼容性难题,创建更稳定、用户友好的网页应用。
26 3
|
12天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
21天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
55 1
|
5月前
|
前端开发 安全 UED
【项目实战】从终端到浏览器:实现 ANSI 字体在前端页面的彩色展示
在学习和工作中,我们经常需要使用日志来记录程序的运行状态和调试信息。而为了更好地区分不同的日志等级,我们可以使用不同的颜色来呈现,使其更加醒目和易于阅读。 在下图运行结果中,我们使用了 colorlog 库来实现彩色日志输出。通过定义不同日志等级对应的颜色,我们可以在控制台中以彩色的方式显示日志信息。例如,DEBUG 级别的日志使用白色,INFO 级别的日志使用绿色,WARNING 级别的日志使用黄色,ERROR 级别的日志使用红色,CRITICAL 级别的日志使用蓝色。
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
429 1
|
25天前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。