Weekbin

一个厉害的前端新手

LV0
已经发布0篇文章,距离下一等级还需发布1篇文章

浏览器内核

什么是浏览器内核

浏览器的内核是分为两个部分的,一个是渲染引擎(layout engineer 或者 Rendering Engine),另一个是JS 引擎
现在JS引擎比较独立,内核更加倾向于说渲染引擎。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是要做兼容性处理的原因。

1. 渲染引擎

渲染引擎负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。

2. JS 引擎

JS 引擎则是解析 Javascript 语言,执行 javascript 语言来实现网页的动态效果。

内核分类

1. Trident

主要代表作 IE,存在诸多兼容性问题,内核仅仅能用于 Windows 平台,闭源。

2. Gecko

主要代表作 Firefox,开源。

3. Presto

主要代表作 Opera(前内核),闭源。

Opera 已经弃用 Presto 内核,现在改用 Blink 内核。

4. Webkit

主要代表作 Safari,Chrome(前内核),开源。

主要代表作 Chrome,Google 将这个渲染引擎作为 Chromium 计划(开源)的一部分。

主流浏览器

1. Chrome,Edge

Chromium 内核

2. Firefox

Gecko 内核,也被称为 Firefox 内核

3. Opera

Blink 内核

4. IE

Trident 内核,也被称为 IE 内核

5. Safari

Webkit 内核

6. 搜狗,遨游,猎豹,百度,世界之窗,360,QQ,2345

混合内核,一般为双内核,分为兼容模式急速(高速)模式。兼容模式使用 Trident 解析,高速模式各不相同,可能用 Webkit, Blink, Chromium 的一种来解析。

判断浏览器

复制
// Browser environment sniffing
export const inBrowser = typeof window !== 'undefined'
export const inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform
export const weexPlatform = inWeex && WXEnvironment.platform.toLowerCase()
export const UA = inBrowser && window.navigator.userAgent.toLowerCase()
export const isIE = UA && /msie|trident/.test(UA)
export const isIE9 = UA && UA.indexOf('msie 9.0') > 0
export const isEdge = UA && UA.indexOf('edge/') > 0
export const isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android')
export const isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios')
export const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge
export const isPhantomJS = UA && /phantomjs/.test(UA)
export const isFF = UA && UA.match(/firefox\/(\d+)/)
up-to-top