双内核浏览器内核切换控制技术

简介: 双核浏览器支持使用两个或者以上的浏览器引擎来渲染网页,目前绝大多数国产浏览器均为双核甚至多核。

什么是双核浏览器

双核浏览器支持使用两个或者以上的浏览器引擎来渲染网页,目前绝大多数国产浏览器均为双核甚至多核。

双核到底是什么内核

  • 基于Chromium的Blink/Webkit内核。一般在国产浏览器中被称为“极速内核/极速模式”。该内核随着该浏览器的更新而更新。
  • IE内核。一般在国产浏览器中被称为“IE内核/兼容模式”,是指调用Windows系统中内置的IE,并非该浏览器单独内置了一套IE,该内核随着Windows或者IE的更新而更新。

    唯一的例外情况是2012年360安全浏览器曾经推出内置IE的版本

IE内核的兼容模式

某些国产浏览器在“IE内核”下,可以切换其“兼容模式”,这并不是切换不同的IE内核版本,而是通过调用系统中IE内核的不同“文档模式”来实现的,详细的信息请参阅这里。这可能造成一些问题。比如A用户系统中安装了IE8,使用QQ浏览器的“兼容模式 - 7”;B用户系统中安装了IE11,也使用QQ浏览器的“兼容模式 - 7”,虽然都用的同一个浏览器且选择了同一个兼容模式,但是对于html5表单项等诸多DOM细节,有着很大的差异。


如何配置网站要使用的渲染引擎

在html的<head>标签中加入如下代码:


<!DOCTYPE html>
<html>
<head>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  ... 以下代码省略

这里我们一共添加了三条有关浏览器渲染方面的指令:

  • <meta name="renderer" content="webkit">中的webkit指令,可以让QQ、傲游、360等浏览器默认使用Chromium内核渲染页面。
  • X-UA-Compatible 中的IE=edge指令,可以让IE或者调用IE内核的浏览器,使用标准模式渲染网页,注意这里和“Edge浏览器”无关,只是恰巧重名罢了。
  • X-UA-Compatible 中的chrome=1指令,可以让安装了GCF插件的IE,在打开网页时使用Chromium内核渲染页面。

需要注意几个重要的神坑:

  • <meta>标签必须出现在<head>内的顶部,否则浏览器可能无法识别。
  • <!DOCTYPE html>文档类型声明必须写,否则各种浏览器内核均会以“IE5模式(又称作怪癖模式、quirks模式)”渲染网页。
  • 测试效果时,网站必须以域名访问,内网或者本地地址方式可能对部分浏览器无效。
  • 如果用户曾经自主选择过渲染引擎,浏览器将记住这个选择,它的优先级高于我们的指令。如果测试时不小心点了,在必要的情况下需要卸载浏览器并清空用户数据,然后重装。
  • 应该尽量保证整站的渲染内核一致,以便避免内核切换可能带来的cookie丢失问题。

通过js判断当前浏览器内核及文档模式


<script src="//gucong3000.github.io/browser.js/browser.min.js"></script>
<script>
if (browser.MSIE) {
  alert("系统IE版本:" + browser.rv + "\n文档模式:" + browser.MSIE);
} else if (browser.Edge) {
  alert("Edge内核浏览器");
} else if (browser.Webkit) {
  alert("Blink/Webkit内核的浏览器");
} else if (browser.Gecko) {
  alert("Gecko内核的浏览器");
}
</script>

参考文档链接

开发者可控制内核切换

只支持用户自主切换内核

资料暂缺或不明确

原文发布时间为:2018年06月19日
原文作者:gucong3000
本文来源:  掘金  如需转载请联系原作者
相关文章
|
6月前
|
Rust JavaScript 前端开发
WebAssembly 技术:解锁浏览器的无限潜能
随着互联网的快速发展,Web 应用程序的功能需求也越来越复杂。传统的 JavaScript 语言在处理大规模数据和高性能计算方面存在一些局限性。然而,WebAssembly 技术的出现改变了这一切。本文将介绍什么是 WebAssembly,它的应用领域以及如何使用它来提升 Web 应用程序的性能和体验。
|
5月前
|
Web App开发 XML 开发框架
技术心得记录:在IE浏览器中的奇怪页面表现
技术心得记录:在IE浏览器中的奇怪页面表现
56 0
|
前端开发 Java
Java 技术篇 - 前端浏览器发送一次url请求后端ServerSocket接收到两次请求原因及解决方法,GET /favicon.ico HTTP/1.1问题处理
Java 技术篇 - 前端浏览器发送一次url请求后端ServerSocket接收到两次请求原因及解决方法,GET /favicon.ico HTTP/1.1问题处理
770 0
Java 技术篇 - 前端浏览器发送一次url请求后端ServerSocket接收到两次请求原因及解决方法,GET /favicon.ico HTTP/1.1问题处理
|
3月前
|
存储 JSON 监控
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
287 1
|
5月前
技术经验分享:360浏览器截图快捷键设置
技术经验分享:360浏览器截图快捷键设置
64 0
技术经验分享:360浏览器截图快捷键设置
|
6月前
|
Web App开发 前端开发 JavaScript
构建跨浏览器兼容的前端应用:技术实践与挑战
【5月更文挑战第16天】构建跨浏览器兼容的前端应用是应对浏览器差异和多样性的挑战。使用现代框架(如React、Vue)能自动转换代码,编写可移植的Web标准代码,结合浏览器兼容性测试工具和Polyfill解决旧浏览器支持问题。关注浏览器更新,应对性能、API差异和样式问题,采用渐进增强、条件判断和CSS Reset策略确保应用在各种浏览器上运行良好。
|
5月前
|
移动开发 前端开发 JavaScript
浏览器端图表渲染技术SVG, VML HTML Canvas
浏览器端图表渲染技术SVG, VML HTML Canvas
40 0
|
6月前
|
Web App开发 JavaScript 前端开发
浏览器推荐:从技术与体验角度的深入探讨
浏览器推荐:从技术与体验角度的深入探讨
162 0
|
数据采集 JavaScript 前端开发
利用无头浏览器进行APP提取数据的技术与实践
利用无头浏览器进行APP提取数据的技术与实践
|
Web App开发 安全 前端开发
Wappalyzer浏览器插件:揭开网站的技术秘密
你曾经访问过一个网站,想知道它是由哪些技术构建的吗?在这个数字时代,网站技术正在不断发展,而Wappalyzer浏览器插件就是一个能够帮助你揭开网站技术秘密的神奇工具。
198 0
Wappalyzer浏览器插件:揭开网站的技术秘密