浏览器的内核是分为两个部分的,一个是渲染引擎(layout engineer 或者 Rendering Engine),另一个是JS 引擎。
现在JS引擎比较独立,内核更加倾向于说渲染引擎。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是要做兼容性处理的原因。
渲染引擎负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。
JS 引擎则是解析 Javascript 语言,执行 javascript 语言来实现网页的动态效果。
主要代表作 IE,存在诸多兼容性问题,内核仅仅能用于 Windows 平台,闭源。
主要代表作 Firefox,开源。
主要代表作 Opera(前内核),闭源。
Opera 已经弃用 Presto 内核,现在改用 Blink 内核。
主要代表作 Safari,Chrome(前内核),开源。
主要代表作 Chrome,Google 将这个渲染引擎作为 Chromium 计划(开源)的一部分。
Chromium 内核
Gecko 内核,也被称为 Firefox 内核
Blink 内核
Trident 内核,也被称为 IE 内核
Webkit 内核
混合内核,一般为双内核,分为兼容模式和急速(高速)模式。兼容模式使用 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+)/)