Web前端面试题整理之HTML(二)

与HTML5新标签浏览器兼容的相关问题

（一）浏览器内核

浏览器最重要或者说最核心的部分叫做“Rendering Engine”，可译为“渲染引擎”，但习惯称之为“浏览器内核”。其主要负责对网页语法的解释并渲染网页，支撑着浏览器运行的最核心的程序。即，浏览器内核也是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容及页面的格式信息。浏览器内核对于浏览器而言，是基础。如果没有浏览器内核，那么浏览器是无法独立存在且产生作用的。它的存在，决定了网页的呈现内容、格式及效果。所以，一个好的浏览器，一定是基于一个稳定、高端、作用明显地浏览器内核的。四大浏览器内核包括Trident内核、Gecko内核、WebKit内核、Blink内核。

Trident内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础上修改而来的，并沿用到IE11，也被普遍称作“IE内核”。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器（壳浏览器）涌现。由于IE本身的“垄断性”（虽然名义上IE并非垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大。微软很长时间都没有更新Trident内核，这也导致了后面的两个后果：一是Trident内核曾经几乎与W3C标准脱节（2005年）；二是Trident内核的大量Bug等安全性问题没有及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有许多用户转向了其它浏览器，FireFox和Opera就是那个时候兴起的。其中，Trident内核常见的浏览器有：IIE6、IE7、IE8(Trident4.0)、IE9(Trident 5.0)、IE10(Trident 6.0)及国产浏览器中的兼容模式（向后兼容的方式显示使得浏览器运行正常）。使用Trident内核的浏览器：IE、遨游、腾讯TT、猎豹安全浏览器、360浏览器、QQ浏览器、搜狐浏览器。Window10发布后，IE将其内置浏览器命名为Edge，Edge最显著的特点就是新内核EdgeHTML。

WebKit内核是苹果公司自主研发的内核，也是Safari浏览器使用的内核。Webkit引擎包含渲染引擎WebCore和JavaScript引擎JSCore，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL跳跃下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。Google Chrome、Opera及各种国产浏览器的高速模式也使用Webkit作为内核（360浏览器、QQ浏览器、搜狐浏览器）。使用Webkit内核的浏览器：Safari、Chrome、傲游浏览器3、Android默认的浏览器。

Gecko内核是Netscape6开始采用的内核，后来的Mozilla FireFox也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko内核的浏览器仍然还是FireFox用户最多，所以有的时候会被称为FireFox内核。Gecko核心设计的相对成熟，在无法获取源码的情况下，开放程度仅次于IE。不足之处包括启动速度慢、升级频繁等。

BLINK内核是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月3日的时候公布了这一消息与WebKit撇清关系。这一渲染引擎是开源引擎WebKit中的WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）中使用。

（二）浏览器的兼容问题

所谓的浏览器兼容问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。浏览器兼容的问题的出现，是以下原因造成的：1、由于浏览器是各个厂家开发的，所用内核（以上已经讲过）与核心架构和代码不同。2、出于对自身的利益的考虑，而设置的种种技术壁垒。

在IE横行的年代，前端开发人员通过CSS hack技术使得CSS代码兼容了不同的浏览器；IE的早期版本对W3C标准支持相当的不友好，以至于Chrome、FireFox的市场占有率与其平起平坐的时候，前端开发人员在写JS功能的时候不得不同时兼容2到3种浏览器，开发效率低下。紧接着出现的JQuery以其良好的兼容性深得开发人员的追捧，成为一代神话。如今，webKit内核的浏览器成为主流，开源化的内核得到了许多浏览器厂商的青睐，浏览器问题的兼容性问题慢慢就不是什么问题了。

（三）如何在国产双核浏览器（Trident+WebKit）中强制使用webkit内核？

默认用急速内核，增加标签：<meta name=”renderer” content=”webkit”>（强制浏览器使用急速模式，按W3C标准渲染页面）;
默认用IE兼容内核，增加标签：<meta name=”renderer” content=”ie-comp”>;
默认用IE标准内核，增加标签：<meta name=”renderer” content=”ie-stand”>
保险起见推荐如下书写方式：<meta name=”renderer” content=”webkit|ie-comp|ie-stand”>。其含义是，按照书写内核的顺序优先级如下：首先强制浏览器使用webkit内核（急速内核）；如果浏览器没有webkit内核，则按照用户浏览器所支持的最新IE的Trident内核渲染页面（IE兼容内核）；否则按照当前浏览器的标准内核渲染（IE标准内核）。

（四）HTML5新标签的浏览器兼容问题

HTML5的新标签：https://zhuanlan.zhihu.com/p/60283121

要支持HTML5标签，IE9以下，在script里写 document.createElement(‘header’) 同时css设置 header{display:block}，也可以直接用框架，如html5shiv。

以上内容为个人资源整合的最终记录，仅供学习交流。其中，参考资源链接：

（一）类似问题参考博客：

https://blog.csdn.net/zhouziyu2011/article/details/58588947

https://zhuanlan.zhihu.com/p/46610215

https://zhuanlan.zhihu.com/p/33052521

https://zhuanlan.zhihu.com/p/23926173

https://zhuanlan.zhihu.com/p/111961892

https://zhuanlan.zhihu.com/p/23364987

https://www.bbsmax.com/A/q4zVPkZX5K/