如何处理html5新标签的浏览器兼容问题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何处理html5新标签的浏览器兼容问题相关的知识，希望对你有一定的参考价值。

目前html5已向开发人员提供了很多新的标签，如section，nav，article，header和footer等。这些标签语义化程度高，会被经常使用，但在IE6，IE7，IE8和Firefox 2等老式浏览器中却不能识别和正常使用。

一、HTML5标签在浏览器展示存在的问题

对于现阶段来说，使用HTML5标签可能遇到的最大问题就是如何在不支持新标签的浏览器中做恰当的处理。当我们在页面中使用HTML5元素时，可能会得到三种不同的结果。

结果1：标签被当作错误处理并被忽略。那么DOM构建的时候，就会当作这个标签不存在。

结果2：标签会被当作错误处理，并在DOM构建的时候依然会按照预期的代码进行创建，并且HTML标签会被构造成行内元素（也就是说虽然不能识别，但是代码里section标签依然会在dom中创建一个对应section节点，但是属于行内元素）。

结果3：标签被识别为HTML5标签，然后用DOM节点对其进行替换。DOM在构建的时候和预想的一致，并且合适的样式会应用到标签上（大部分情况下是块级元素）。

有一个具体的例子，大家思考一下下面的代码：

<div class="outer">

　　<section>

　　<h1>title</h1>

　　<p>text</p>

　　</section>

　　</div>

很多浏览器（比如Firefox
3.6和Safari4）解析的时候都会将div作为最外层的元素，然后div里面是一个识别不了的元素（section），它会在DOM中创建，并被作为一个行内元素存在。h1和p元素都是作为section元素的子节点。因为section在DOM中真实存在，所以也可以修改其样式。这种情况对应结果2。

IE9之前的版本会认为section标签是一个错误，并直接将其忽略，那么h1和p标签会被解析，然后成为div标签的子节点。</section>也会被认为是一个错误并直接跳过。在这些浏览器中实际有效的代码是这样的：

<div class="outer">

　　<h1>title</h1>

　　<p>text</p>

　　</div>

那么，旧版本的IE浏览器除了生成的DOM结构和其他浏览器不一样，其对不可识别标签的容错能力还是很棒的。因为section节点没有在DOM树中构建，所以也就不能给其增加样式。这种情况对应结果1。

当然，支持HTML5的浏览器比如IE9，Firefox4+，Safari5+会创建正确的DOM结构，然后这些标签会默认附带HTML5规范中定义的默认样式。

那么，我们所面临的最大问题就是同样的代码在不同的浏览器中形成了不同的DOM结构，并且含有不同的样式。

二、如何解决HTML5标签不兼容

或许会有很多人在质疑：为什么老式的浏览器不能识别这些标签？其实错不在浏览器，因为在那个时代根本不存在这种标签，所以不能正确识别出来，而这种不寻常的标签识别令DOM结构变得异常。对此，人们想出了很多在现阶段页面中使用HTML5元素的解决方案。每一个解决方案为了做到兼容都会遇到一些特定的问题。在此也在马海祥博客上跟大家分享一下：

1、实现标签被识别

马海祥曾做个一个测试（以IE8为例），是一个文章标题和蓝色字的文章内容，其中文章内容用了article标签。代码如下：

<!DOCTYPE html>

　　<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

　　<head>

　　<meta charset="UTF-8" />

　　<title>测试</title>

　　<style>

　　articlecolor:#06F;

　　</style>

　　</head>

　　<body>

　　<h1>文章标题</h1>

　　<article>

　　这是文章内容，应该是一段蓝色的文字。在老式浏览器中，如果不做hack将显示异常。

　　</article>

　　</body>

　　</html>

在IE8浏览器中，显示如下：

IE8不能识别article标签， 定义在标签上的CSS样式没有起作用。
在IE8中，<article>被解释成命名为<article />和</article
/>两个空的标签元素，与文章内容并列为兄弟节点，如下图所示：

既然因为不能识别标签而不能使用，那我们的解决办法就是让标签被识别出来。所幸，简单地通过document.createElement（tagName）即可以让浏览器识别标签和CSS引擎知道该标签的存在。假设我们上面的例子的<head>区域加上如下代码。

<script>

　　document.createElement('article');

　　</script>

IE8浏览器中的DOM解释就会变成下图所示：

自然，文字也显示成正常的蓝色。如下图所示：

2、javascript解决方案

JavaScript解决方案目的是解决在旧版本的IE中样式应用的问题。老版本的IE不会识别不明元素已经是一个耳熟能详的特性，而如果这些元素已经通过document.createElement()创建，那么浏览器就可以识别这些标签，并可以将其在DOM树中构建，然后允许开发者对其应用样式。

这个方法可以确保HTML5标签能在旧版本IE中对应创建DOM节点，然后可以对其应用样式。这个方法将HTML5块级元素设置成display:block，从而可以在各个浏览器中做到兼容。

今天测试以下把马海祥博客的网页改成了HTML5的，调试了一下，在FF和Opera中都显示正常了，到了IE6上却变得面目全非了。对此我还特意去找了一些使用JS代码支持HTML5标签元素的方法，在此也跟大家分享一下：

（1）、使用html5shiv

查看了一下，发现了html5shiv能解决这个问题，可以把HTML5的新元素转换成IE6认识的内容。只需要在你的head中调用这段代码就行：

<!--if lt IE 9]>

　　<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

　　<![endif]-->

当然你也可以直接把这个文件下载到自己的网站上。但这个文件必须在head标签中调用，因为IE必须在元素解析这前知道这些元素，才能启作用！但马海祥还要提醒你一下：还要在你的CSS文件中加上以下代码，不然有可能会出现些莫名其妙的问题。

header,nav,article,section,aside,footerdisplay:block;

另外excanvas.js是Google为IE6支持canvas元素写的脚本，以后马海祥会跟大家再细说这样的例子，感兴趣的朋友可以去试试。

（2）、使用Kill IE6

除此之外你还可以使用KILL IE6一族，前提是你的浏览器允许执行JS文件。方法很简单，在你的网站的</body>之前加上以下代码就可以了：

<!--if lte IE 6]>

　　<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>

　　<![endif]-->

上面写的<!--if lte IE 6]>在正常的HTML中属于注释，不会被执行，但在IE中是一个判断语句，所以这些代码只有在IE中才会被识别并加载。

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt ：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

! ： 就是不等于的意思，跟javascript里的不等于判断符相同

说实话，马海祥不喜欢这个利用JavaScript解决的方案，因为它破坏了我最主要的web应用开发原则：我们不应该使用JavaScript来控制布局。不仅仅是因为这个做法给那些禁用脚本的用户带来了糟糕的用户体验，更重要的是，如果我们希望我们的web应用代码是面向未来，并且维护性高的，那么必须将视图相关部分分离出来。这个方案对在跨浏览器中构建相同的DOM结构很有帮助，也可以确保你的JavaScript和CSS在各个地方运行结果相同，但是这个优势并不能改变我对这个方法的不认同。

3、Namespace hack

永远不要缺乏使用hack解决问题的能力，在IE中还有其他技术来让浏览器识别不明的标签。这个来自Elco Klingen日志的方法一开始引起了广泛的关注。该技术包含了一个XML形式的命名空间，并使用了含有namespace前缀的元素。例如：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/">

　　<body>

　　<html5:section>

　　<!-- content -->

　　</html5:section>

　　</body>

　　 </html>

前缀html5是纯粹是用于这个例子而且也不是官方支持的，你甚至可以用"foo"作为前缀，结果还是一样。有了前缀之后，IE会识别新的元素，从而可以应用样式。在其他浏览器中一样有效，那么最后，你就成功地在各个浏览器中构建了一样的元素和一样的样式。

这个方法的缺陷很明显：你必须在HTML文档中使用XML格式的命名空间，同样，你也需要在css中这么做:

html5\:section

　　 display: block;

　　

马海祥点评：这并不是我期望Web开发者编写代码的方式。虽然这是一个非常杰出的解决方案，但是这让应用变得不自然。我不希望看到文件中充满了带命名空间的元素。

4、Bulletproof技术（防弹衣技术）

说实话，我是第一次接触到这个技术，建议在所有新的HTML5块级元素中增加一个内部的div元素，然后包含一个CSS class，用这个元素来替代HTML元素（类似在里面穿了一件防弹衣），例如：

<section>

　　<div class="section">

　　<!-- content -->

　　</div>

　　</section>

在应用样式的时候，Tantek推荐直接给div增加样式，而不是给新元素增加样式

推荐使用：

.section

　　color: blue;

　　

而不是：

section

　　 color: blue;

　　

这个方案的原理是用简单的方式将原来的样式应用方式转移到一个代表了HTML5标签的元素上。由于我一般情况下不会将样式通过标签名的方式应用到元素上，所以马海祥也并完全支持这个建议。

马海祥觉得这个方案的缺陷是不同的浏览器构建了不同的DOM结构，那么你必须在编写JavaScript和CSS的时候格外小心。获取子节点或者父节点的时候，不同的浏览器返回的结果可能会不一样。特别是在下面的代码中：

<div class="outer">

　　<section>

　　<div class="section main">

　　<!-- content -->

　　</div></section>

　　</div>

5、反向的bulletproof技术

还有一些方法，比如尝试使用和Tanteck方案相反的技术，也就是把HTML5元素放在div元素内部，例如：

<div class="section">

　　<section>

　　<!-- content -->

　　</section>

　　<div>

这个方案唯一的不同是HTML5元素的位置，其他都一样。喜欢这个技术的支持者认为他的一致性很好（适用于所有的元素，包括<hgroup>）。但是DOM结构的不同让这个方案意义变得不大。他的主要优势是技术上的一致性。

6、关于X-UA-Compatible的使用

目前绝大多数网站都用以下代码来作为IE8的兼容方法。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

虽然微软将IE向标准迈进了一大步，而事实上IE8还存在一系列渲染的奇怪现象是不争的事实。

在X-UA-Compatible中可用的方法有：

<meta http-equiv="X-UA-Compatible" content="IE=6" >

　　<meta http-equiv="X-UA-Compatible" content="IE=7" >

　　<meta http-equiv="X-UA-Compatible" content="IE=8" >

　　<meta http-equiv="X-UA-Compatible" content="IE=edge" >

其中最后一行是永远以最新的IE版本模式来显示网页的。

另外加上

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

　　<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >

而使用，Emulate模式后则更重视。

所以目前来说还是以使用

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

为首选。

7、通过修改HTML部分来实现

我的主要目标是确保我只需要修改HTML部分。这就意味着不需要修改CSS和JavaScript。为什么会有这样的需求？需要修改的Web应用视图越多，你越有可能制造bug。将改变限制到一个视图也就限制了bug的出现，即使出现了bug，也可以减少你查找错误的范围。如果一个视图破相了，我可以知道这是因为我增加了一个section元素，而不是考虑是不是CSS文件修改来带的影响。

在研究了所有这些解决方案，并进行一些尝试和设计之后，我回到了Tantek的方案。这是唯一一个只需要修改HTML而不用动CSS和HTML的方案。现在，我在他的方案基础上做了一些改进，来达到我想要的结果。

首先，我不会给那些代表HTML5元素的class增加样式（所以我不会使用.section这样的选择器）。我保留了div元素，然后再增加一个带语义的class来应用样式，并作为进行JavaScript操作的钩子。例如，这样的代码：

<div class="content">

　　<!-- content -->

　　</div>

经过改进后：

<section>

　　<div class="section content">

　　<!-- content -->

　　</div>

　　</section>

这样的修改完成后，我依然使用.content作为样式和脚本的入口。这也意味着我不需要修改CSS和JavaScript。

然后，为了避免hgroup标签这样的情况，我选择不使用这个标签。我在我已有的所有页面中没有找到任何一个使用了这个标签的。由于hgroup标签只能包含标题元素，如果你确实想要使用这个标签，那么使用hrgoup来包含本身是非常安全的（假设它没有包含其他的块级元素）。

我在马海祥博客上花了很多时间来测试比较bulletproof和反向的bulletproof哪个更好一些。我做选择时最主要的决定因素就是反向的bulletproof需要我去增加CSS代码。在那些为HTML5标签创建了DOM节点但是没有应用默认样式的元素来说，div元素里包含了一个HTML5块级元素在很多情况下都会搅乱我的布局，因为创建的DOM节点是行内元素。我不得不明确增加CSS规则来让这个节点变成块级元素从而可以正常布局，这也就违反了我不修改CSS文件的初衷。

马海祥博客点评：

在我的研究中，我使用了多个页面，然后在这些页面上使用修改过后的bulletproof技术。我分别在简单和复杂的布局中，含有和不含有JavaScript交互进行测试。在每一个例子中，我只需要修改HTML就可以让页面表现正确（不修改JavaScript和CSS）。那么，子节点和父节点的问题怎么办？有趣的事情是我在测试中并没有遇到这样的问题。

理由很简单，因为我对代码苛刻的态度。我认真地做了第二遍检查：

（1）、标签名和ID不会用于应用样式（只是用class）。

（2）、尽量选择常用的CSS选择器并且尽量减少选择器的使用。

（3）、JavaScript代码不依赖于特定的DOM结构。

（4）、标签名不用于操作DOM。

我注意到另一个有趣的事情是我使用了HTML5元素作为容器。而这些新的元素仅仅是作为功能性模块的边界。你应该花费你的大部分时间为内部的元素编写样式和脚本而不是处理各个模块间的样式和脚本。由于马海祥博客的JavaScript和CSS标签都应用在容器的内部，所以一切都显得很顺利。我想这才是一个真正的代码质量高的网站。 参考技术A 1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
2.使用是html5shim框架
另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。 参考技术B HTML5已形成了最终的标准，概括来讲，它主要是关于图像，位置，存储，多任务等功能的增加。
新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。
内容元素，article、footer、header、nav、section。
表单控件，calendar、date、time、email、url、search。
控件元素，webworker, websockt, Geolocation。
移出的元素有下列这些：
显现层元素：basefont，big，center，font, s，strike，tt，u。
性能较差元素：frame，frameset，noframes。

处理兼容问题有两种方式：
1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
2.使用是html5shim框架
另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。

前端面试题总结

 

html部分

1.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

　　新特性：

　　　　　1.  拖拽释放(Drag and drop) API

　　　　　2. 语义化更好的内容标签（header,nav,footer,aside,article,section）

　　　　　3. 音频、视频API(audio,video)

　　　　　4. 画布(Canvas) API

　　　　　5. 地理(Geolocation) API

　　　　　6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失

　　　　　7.  sessionStorage 的数据在浏览器关闭后自动删除

　　　　　8. 表单控件，calendar、date、time、email、url、search

　　　　　9. 新的技术webworker, websocket, Geolocation

      移除元素：

　　　　　1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u

　　　　　2. 对可用性产生负面影响的元素：frame，frameset，noframes

　　处理兼容问题：

　　　　   1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

　　区分：

　　　　　1. DOCTYPE声明新增的结构元素、功能元素

 

2.DOM操作——怎样添加、移除、移动、复制、创建和查找节点

　　创建节点：

　　　　　1. createDocumentFragment() 创建一个DOM片段

　　　　　2. createElement  创建一个具体的元素

　　　　　3. createTextNode  创建一个文本节点

　　添加节点：

　　　　　1. appendChild()

　　移除节点：

　　　　　1. removeChild()

　　替换节点：

　　　　　1. replaceChild()

　　查找节点：

　　　　　1. getElementByTagName 通过标签名称

　　　　　2. getElementById  通过元素的Id

　　　　　3. getElementByName 通过元素的name

3.IE 8以下版本的浏览器中的盒模型有什么不同

　　　　　1. IE8以下的模拟盒子定义的元素宽高不包含内边距和边框

4.浮动元素引起的问题和解决办法？

　　引起问题：

　　　　　1. 父元素的高度无法撑开，影响和父元素同行元素

　　　　　2. 与浮动元素同级的非浮动元素会紧跟随后

　　　　　3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

　　解决方法：

　　　　　1. 额外标签法：css中的 clear ：both （会使HTML结构看起来不够简洁）

　　　　　2. after伪类法

　　　　　3. 浮动外部元素

　　　　　4. 设置overflow：auto或者hide

5.常见兼容性问题

　　　　　1. 浏览器兼容问题：各种浏览器的margin和padding不一样

　　　　　            解决方式：在全局设置margin：0，padding：0

　　　　　2. 浏览器兼容问题：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大 (IE6中后面的一块被顶到下一行)

 　　　　　　　　　解决方式：在float中设置display：inline，转化为行内元素

　　　　　3. 浏览器兼容问题：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

 　　　　　　　　　解决方式：设置overflow：hidden或设置行高linehight小于你设置的高度　　　　

6.HTML与XHTML——二者有什么区别

　　　　　1.元素的嵌套： XHTML要求所有元素必须正确嵌套

　　　　　2.  XHTML必须嵌套在<html>根元素中

　　　　　3.  XHTML必须标签小写

　　　　　4.  XHTML标签必须被关闭，空标签也需要结束符

　　　　　5.  两者基本概念不同，HTML是超文本标记语言，XHTML是可扩展超文本标记语言

7.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

　　作用：

　　　　　1. DOCTYPE声明处于文档最前面，处于标签之前，告知浏览器以何种模式渲染文档

　　严格模式和混杂模式区分：

　　　　　1. 文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）

　　　　　2. 包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式

　　　　　3. DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）

　　　　　4. HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

　　意义：

　　　　　1. 严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。　　　

 

8.说说你对语义化的理解

　　　　   1. 去掉或丢失样式还可以让页面呈现清晰的结构

　　　　　2. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息

　　　　　3. 方便其他设备解析

　　　　　4. 便于团队开发和维护，语义化更具有可读性，遵循W3C标准团队，可减少差异化

 

9.iframe的优缺点

　　优点：

　　　　　1. 解决第三方内容图片或广告加载缓慢问题

　　　　　2. 并行加载脚本

　　缺点：

　　　　　1. 会阻塞主页面Onload事件

　　　　　2. 无内容，也会出现加载

　　　　　3.无语义

10.如何实现浏览器内多个标签页之间的通信

　调用localstorge，cookies等本地存储方式

　　　　　1. localstorage

　　　　　　localstorage在一个标签被添加，修改或删除时，都会触发一个storage事件，通过另一个标签进行监听storage事件，便可获得localstorge存储的值，从而实现不同标签页之间的通信。

　　　　　2. cookies

　　　　　　使用cookies+setInterval，将要传递的信息存储在cookie中，每隔一段时间读取cookie信息，即可随机获得传递的信息。

 

11.webSocket如何兼容低浏览器

　　webSocket类似HTTP协议，是为了弥补HTTP协议的缺陷：通信只能服务端发起，HTTP不能做到服务端主动向客服端推送信息。

　　解决兼容问题

　　　　　1. 使用flash

　　　　　2. 使用轮询或长连接的方式实现伪websocket的通信

 

12.线程与进程的区别

　　一个程序至少一个进程，一个进程至少一个线程。

　　　　　1. 进程拥有独立的堆栈空间和数据段，每启动一个新的进程就要分配一个独立的地址空间；线程有独立的堆栈空间，但是共享数据段。

　　　　　2. 通信机制上，进程之间互不干扰，互相独立，通信机制相当复杂；但线程共享数据，通信机制方便。

　　　　　3. 同一个进程的所有线程共享该进程的所有资源，不同进程相互独立。

 

13.你如何对网站的文件和资源进行优化

　　　　　1. 文件合并

　　　　　2. 文件压缩

　　　　　3. cdn托管

　　　　　4. 多个域名缓存

 

14.请说出三种减少页面加载时间的方法

　　　　 1. 图片优化

　　　　 2. 图像格式选择

　　　　 3. CSS优化

　　　　 4. 网址后面加斜杆

　　　　 5. 标明宽高度

　　　　 6. 减少HTTP请求

 

15.你都使用哪些工具来测试代码的性能

　　　　1. JSPerf

　　　　2. Dromaeo

 

16.什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？　　

　　　　1. 如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。

　　　　2. 使用LINK标签将样式表放在文档HEAD中。

 

17.null和undefined的区别

　　　　1. null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

　　　　2. 当声明的变量还未被初始化时，变量的默认值为undefined。

　　　　3. null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
      

18. new操作符具体干了什么呢

　　　　1. 创建一个空对象，并用this指向该对象，同时继承函数

　　　　2. 属性和方法加入this引用的对象

　　　　3. 新创建的对象由this所引用，并且最后隐式的返回this

　　　　

19.JSON 的了解

　　是一种轻量级的数据交换格式，它基于JavaScript的一个子集，数据格式简单，易于读写，占用带宽小

 

20.js延迟加载的方式有哪些

　　　　1. defer

　　　　 　　HTML4.01为script标签定义了的defer属性，告诉浏览器立即下载，但延迟执行。但只适合外部脚本文件

　　　　2. async

　　　　　　HTML5为script定义了async属性，和defer一样，只适合外部脚本文件，不让页面等待脚本的下载和执行，从而异步加载页面其他内容

　　　　3. 动态创建DOM

　　　　4. 使用jQuery的getScript

$.getScript("outer.js",function(){//回调函数，成功获取文件后执行的函数  
      console.log("脚本加载完成")  
});

　　　　5. setTimeOut延时

　　　　6. js放最底部，最后加载

 

21. 如何解决跨域问题

　　跨域是指一个域下面的文档或脚本试图请求另一个域下的资源

　　常见跨域场景

　　　　技术图片

　　解决方式

　　　　1. JSONP

　　　　2. NGINX反向代理

　　　　　　nginx支持配置反向代理，通过反向代理实现网站的负载均衡，通过配置proxy_pass_http配置代理站点，upstream实现负载均衡

　　　　

22.documen.write和 innerHTML的区别

　　document.write只会绘制整个页面，innerHTML可以重绘页面的一部分。

 

23. .call() 和 .apply() 的区别和作用？

　　JavaScript中的每一个function对象都有一个apply()方法和一个call()方法。

　　apply:调用一个对象的一个方法，用另一个对象替换当前对象，例：B.apply(A, arguments);即A对象应用B对象的方法。

　　call:调用一个对象的一个方法，用另一个对象替换当前对象，例：B.call(A, ag1,ag2);即A对象调用B对象的方法。　　　

　　相同之处：

　　　　1. 都可以代替另一个对象调用一个方法

　　不同之处：

　　　　1. apply最多只能有两个参数，新的this对象和一个数组argArray。

　　　　2. call可以接受多个参数，新的this对象和一串参数列表，主要用于js对象各方法的相互调用。

 

24.js哪些操作会造成内存泄漏？

　　内存泄露是指一个分配的内存既不使用，也不能回收，直到浏览器运行结束。

　　标记清除：js中最常见的垃圾清除器

　　导致内存泄漏的操作：

　　　　1. 意外的全局变量

　　　　2. 闭包

　　　　3. 没有清理的DOM元素引用

　　　　4. 定时器　　

 

25.JavaScript中的作用域与变量声明提升

　　JavaScript是函数级作用域，不是块级作用域。

　　块级作用域：一对花括号{}中的语句集都属于一个块，在其中定义的变量块外都不可见

　　变量提升：当一个函数外定义了一个全局变量，而想在函数内改变这个变量的值，可以通过声明一个局部变量。

　　

var name="haha";
 function changeName(){
     console.log(name);
     var name="xixi";
 }
 changeName();
 console.log(name);

变量提升

var name="haha";
  function changeName(){
      var name;
      console.log(name);
      name="xixi";
 }
 changeName();
 console.log(name);

26. 如何判断当前脚本运行在浏览器还是node环境中？

　　通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中。

 

27. 什么叫优雅降级和渐进增强？

　　优雅降级：以最低要求，实现最基础的功能，向上兼容

　　渐进增强：开始先针对较高版本浏览器构建页面，完善功能，再进行各种不同浏览器适配

 

28.WEB应用从服务器主动推送Data到客户端有那些方式

　　　　1. 轮询

　　　　2. 长连接

　　　　3. WebSocket

 

29.对Node的优点和缺点提出了自己的看法

　　优点：

　　　　1. node基于时间驱动和无阻塞，便于处理并发事件

　　　　2. 交互的客户端用的是相同的语言

　　缺点：

　　　　1. node是一个相对新的开源项目，不太稳定

　　　　2. 缺乏较多的第三方库支持

 

30.你有哪些性能优化的方法

　　　　1. 减少http请求次数：CSS源码压缩，图片适当大小，data缓存，图片服务器。

　　　　2. 前端模板js+数据，减少HTML标签导致的带宽浪费，前端使用变量保存ajax请求结果，每次操作本地变量，不用请求，减少请求次数。

　　　　3. 用innerHTML代替DOM，减少DOM的操作次数，优化JavaScript性能

　　　　4. 不要直接设置style，而是通过classname设置

　　　　5. 少用全局变量，缓存DOM节点查找结果，减少IO读取操作(IO指的是input和output)

　　　　6. 图片预加载

 

31.http状态码有那些？分别代表是什么意思？

　　　　1. 200 OK

　　　　2. 301  临时跳转

　　　　3. 304 永久跳转

　　　　4. 400 error

　　　　5. 401 未授权

　　　　6. 403 禁止访问

　　　　7. 404 not found

　　　　8. 500 服务器错误

　　　　9. 503 服务器无法使用

 

32.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么

　　　　1. 当发送一个URL请求，浏览器会开一个线程处理这个请求，同时远程dns服务器启动dns查询，使得浏览器获得相对应的ip。

　　　　2. 浏览器和远程web服务器通过TCP三次握手建立TCP/IP连接。

　　　　3. 一旦TCP/IP建立，浏览器会通过该连接向服务器发送http的get请求，远程服务器找到资源后通过http响应该资源，值为200是一个正确的响应。

　　　　4. web服务器提供资源服务，客户端下载资源，请求返回后，就进入前端模块，浏览器解析HTML生成DOM tree。

 

33.javascript对象的几种创建方式

　　　　1. 工厂模式

　　　　2. 原型模式

　　　　3. 构造函数模式

　　　　4. 混合原型模式和构造函数模式

　　　　5. 动态原型模式

　　　　6. 寄生构造函数模式

　　　　7. 稳妥构造函数模式

 

34.javascript继承的6种方法

　　　　1. 原型链继承 （将父类的实例作为子类的原型）

　　　　2. 借用构造函数继承　（）

　　　　3. 组合继承（原型+借用构造）

　　　　4. 原型式继承

　　　　5. 寄生式继承

　　　　6. 寄生组合式继承

 

35.ajax过程

　　ajax = async javascript and xml 异步JavaScript和XML

　　ajax是一种创建动态页面，通过后台和服务器进行少量数据交互，ajax可以实现异步更新，实现页面某部分更新。

　　　　1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象

　　　　2. 创建一个新的HTTP请求，并指定该HTTP的请求方式和URL及验证信息

　　　　3. 设置响应HTTP请求状态变化的函数

　　　　4. 发送HTTP请求

　　　　5. 获取异步调用返回的数据

　　　　6. 使用JavaScript和DOM实现局部刷新

 

36.异步加载和延迟加载

　　异步加载：又称非阻塞模式，浏览器下载执行js的同时，还可以进行后续的处理

　　实现方法

　　　　1. script DOM Element（async）

　　　　2. onload

　　延迟加载：有些js代码在某些情况才需要使用，并不是页面初始化的时候才用到，延迟加载就是为了解决这个问题，js将分成许多模块，初始化只需加载需要立即执行的js,其他js等到第一次使用的时候再加载。

　　

以上是关于如何处理html5新标签的浏览器兼容问题的主要内容，如果未能解决你的问题，请参考以下文章

html5都有哪些新特性，移除了那些元素？如何处理html5新标签的浏览器兼容问题？

HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容性问题？如何区分HTML和HTML5？

前端面试题总结

前端面试题

前端开发面经

如何处理使用js兼容所有浏览器的问题