前端夯实基础（一）--- 浏览器内核

最新推荐文章于 2023-01-17 16:10:20 发布

原创最新推荐文章于 2023-01-17 16:10:20 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器内核 #Webkit #Safari #IE

Front-End 同时被 2 个专栏收录

34 篇文章

订阅专栏

前端夯实基础

9 篇文章

订阅专栏

本文深入解析了五大主流浏览器（IE、火狐、Chrome、Safari和Opera）的内核特性，包括Trident、Gecko、Webkit、Blink和Presto等，探讨了不同内核之间的区别及在移动端的应用，并提供了通过JS判断浏览器版本的方法。

1、浏览器内核

有市场就有竞争，大家都搞个内核想分一杯羹。
常用五大浏览器：IE、火狐、Chrome、Safari和Opera。
因此内核就有所不同。
浏览器内核：渲染引擎（Render Engine）+Js引擎。

this.navigator.userAgent;
Chrome
//"Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36"
IE
//"Mozilla/5.0 (Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko"

2、内核说明

Trident（IE内核）：国内多数双核浏览器的其中一核即为Trident，称为“兼容模式”。
Win10发布后，内置浏览器为Edge，其新特点即是EdgeHTML内核。
Gecko（FireFox）：开源内核。
Webkit（Safari）：开源的，其实是人家苹果公司的。Safari是Webkit的亲儿子。Apple Safari，Android默认浏览器···
Blink/ Chromium（Chrome）：Chrome的内核其实是Webkit的二次开发，是Webkit的分支，是Webkit的大侄子。
Presto（Opera）：已废弃···现在的Opera浏览器内核使用的是Chrome的内核。
移动端浏览器内核：Android手机浏览器i大多数Webkit内核，或者Webkit的二次开发。iOS则是Safari，即血统纯正的Webkit。WP7则是IE内核Trident。

3、通过JS判断浏览器版本

function getAgent(){
	var u = navigator.userAgent;  
	return {//移动终端浏览器版本信息    
	  trident: u.indexOf('Trident') > -1, //IE内核
	  presto: u.indexOf('Presto') > -1, //opera内核
	  webKit: u.indexOf('AppleWebKit') > -1, //Apple、Chrome内核
	  gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
	  mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
	  iOS: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //IOS终端
	  android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
	  iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
	  iPad: u.indexOf('iPad') > -1, //是否iPad
	  webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
	  weChat: u.indexOf('MicroMessenger') > -1
	};
}