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

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

🌟前言

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

浏览器内核分成两部分:渲染引擎和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月前
|
前端开发
调试前端时,在浏览器上修改参数并重新调用接口
有时候我们的页面点击过了,但是接口出问题,想修改参数再调用一次,一般是用apiPost工具把接口复制,再加上token和参数,但是这样非常的效率比较低。
42 0
|
5月前
|
前端开发
前端页面调试小技巧(谷歌浏览器)
前端页面调试小技巧(谷歌浏览器)
38 0
|
6月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
175 0
|
6月前
|
Web App开发 前端开发 JavaScript
|
14天前
|
监控 前端开发 JavaScript
如何使用浏览器调试前端代码?
【4月更文挑战第11天】前端开发中,浏览器调试是关键技能,能提升代码质量。本文介绍了如何使用浏览器的调试工具:1) 打开调试窗口(F12或右键检查);2) Elements标签页检查DOM结构和样式;3) Console调试JavaScript,查看日志和错误信息;4) Sources设置断点调试JS文件;5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题,提高开发效率。
37 7
|
1月前
|
前端开发 JavaScript 程序员
推荐给前端程序员的5款浏览器插件
推荐给前端程序员的5款浏览器插件
|
1月前
|
SQL 存储 JavaScript
前端浏览器调试详解版
前端浏览器调试详解版
55 0
|
2月前
|
消息中间件 JavaScript 前端开发
前端秘法进阶篇----这还是我们熟悉的浏览器吗?(浏览器的渲染原理)
前端秘法进阶篇----这还是我们熟悉的浏览器吗?(浏览器的渲染原理)
|
2月前
|
缓存 前端开发 JavaScript
在浏览器的舞台上演:前端如何挑战页面刷新的极限
在浏览器的舞台上演:前端如何挑战页面刷新的极限
58 0
|
7月前
|
前端开发 安全 应用服务中间件
前端经典面试题 | 浏览器跨域
前端经典面试题 | 浏览器跨域