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

45 阅读 0 评论 30 点赞

我是靠谱客的博主忧郁流沙，最近开发中收集的这篇文章主要介绍前端夯实基础（一）--- 浏览器内核，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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
};
}