马上准备面试了，从今天开始每天准备10道比较经典的面试题，希望对自己和同样准备面试的伙伴有所帮助吧。

好，言归正传，

1.简述js的回收机制？

垃圾回收机制就是间隙的不定期的寻找不在使用的变量，并释放掉他们所指向的内存；

主要为了防止内存泄漏，（当已经不需要某块内存的时候这块内存还存在）

说到这里我们要说一下js的两种变量

全局变量和函数中的局部变量

局部变量的生命周期在函数执行后就结束了，此时便可将他引用的内存释放，（即，垃圾回收）

但是，全局变量的生命周期会持续到浏览器关闭页面

js执行环境中的垃圾回收有两种方式、

标记清除

引用计数

标记清除：工作原理：是当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。

工作流程

1.垃圾回收器，在运行的时候会给存储在内存中的所有变量都加上标记。

2.去掉环境中的变量以及被环境中的变量引用的变量的标记。

3.再被加上标记的会被视为准备删除的变量。

4.垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间。

第二种引用计数是引用一次计个1，释放一次减个1，当引用计数为0的时候才可以清掉。在IE低版本中引用计数也会造成内存泄露。

工作流程：

1.声明了一个变量并将一个引用类型的值赋值给这个变量，这个引用类型值的引用次数就是1。

2.同一个值又被赋值给另一个变量，这个引用类型值的引用次数加1.

3.当包含这个引用类型值的变量又被赋值成另一个值了，那么这个引用类型值的引用次数减1.

4.当引用次数变成0时，说明没办法访问这个值了。

5.当垃圾收集器下一次运行时，它就会释放引用次数是0的值所占的内存。

但是循环引用的时候就会释放不掉内存。循环引用就是对象A中包含另一个指向对象B的指针，B中也包含一个指向A的引用。

因为IE中的BOM、DOM的实现使用了COM，而COM对象使用的垃圾收集机制是引用计数策略。所以会存在循环引用的问题。

解决：手工断开js对象和DOM之间的链接。赋值为null。IE9把DOM和BOM转换成真正的JS对象了，所以避免了这个问题。

2.Javascript-节点的增删改查？

  1.创建元素节点

  document.createElement("元素标签名");

  example:var elea=document.createElement("a");

                 elea.href="www.baidu.com";   

                elea.title="简书首页";

  2.插入节点

  父对象.appendChild(要插入的对象)——插入到最后     

  父对象.insertBefore(要插入的对象a,之前的对象b)——在对象b之前插入对象a

    example：document.body.appendChild("elea");

  3.修改节点

  父对象.replaceChild(newnode,oldnode);

  4、删除节点

    父对象.removeChild(要删除的对象); //被删除对象只是在html页面中消失，但仍存在于  内存中。       

    elea=null——彻底删除

3.js继承的理解？

有大佬总结了，直接上传送门-  传送门地址

4.跨域？jsonp？

首先我们想什么是跨域？为什么要跨域？

跨域：浏览器对于js有同源策略的限制，例如：域名a.cn下面的js不能调用b.cn中的js的对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.

那上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同

同源策略:

请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

如何跨域：

我们发现凡是拥有scr这个属性的标签都可以跨域例如<script><img>等

但是AJAX直接请求普通文件存在跨域无权限访问的问题，这时jsonp应运而生。

该协议的一个要点就是允许用户传递一个callback 参数给服务端，

JQuery Ajax对JSONP进行了很好的封装，我们使用起来很方便。前端示例：

5.闭包？

为什么要使用闭包？

因为js中变量的作用域分类：全局变量和局部变量

函数内部可以读取函数外部的局部变量；

函数外部无法读取函数内部的局部变量；

为了让函数执行完成后，内部的函数，变量还能被调用，可以采用闭包延长局部变量/函数的生命周期，

表现形式：使函数外部能够调用函数内部的变量

使用场景：排她，函数节流

注意点：滥用闭包，会造成内存泄漏；由于闭包会使得函数中的变量都被宝岑在内存中，内存消耗很大，否则会造成网页的性能问题，在IE中可能导致内存泄漏，解决办法：在退出函数之前将不使用的局部变量指向null

6.页面加载过程中可触发那些事件？他们的顺序？

1）开始解析HTML文档结构

2）加载外部样式表及js脚本

3）解析执行js脚本

4）DOM树渲染完成

5）加载未完成的外部资源（如图片）

6）页面加载成功

执行顺序.

1）document  readystatechane事件

2）document  DOMContentloaded事件

3）window load事件

7.hash，以及hashchange事件？

1、hash即URL中"#"字符后面的部分。

　　①使用浏览器访问网页时，如果网页URL中带有hash，页面就会定位到id（或name）与hash值一样的元素的位置；

　　②hash还有另一个特点，它的改变不会导致页面重新加载；

　　③hash值浏览器是不会随请求发送到服务器端的；

　　④通过window.location.hash属性获取和设置hash值。

window.location.hash值的变化会直接反应到浏览器地址栏（#后面的部分会发生变化），同时，浏览器地址栏hash值的变化也会触发window.location.hash值的变化，从而触发onhashchange事件。

2、hashchange事件（IE8已支持该事件）

　　①当URL的片段标识符更改时，将触发hashchange事件（跟在#符号后面的URL部分，包括#符号）

　　②hashchange事件触发时，事件对象会有hash改变前的URL（oldURL）和hash改变后的URL（newURL）两个属性：

window.addEventListener('hashchange',function(e) { console.log(e.oldURL);  console.log(e.newURL) },false);

8.vue-router两种模式:hash模式和history模式？

1. hash模式（vue-router默认hash模式）

hash模式背后的原理是onhashchange事件。

由于hash发生变化的url都会被浏览器记录下来，使得浏览器的前进后退都可以使用了，尽管浏览器没有亲求服务器，但是页面状态和url关联起来。后来人们称其为前端路由，成为单页应用标配。

比如http://www.abc.com/#/index，hash值为#/index。hash模式的特点在于hash出现在url中，但是不会被包括在HTTP请求中，对后端没有影响，不会重新加载页面。

2.history模式

history模式利用了HTML5 History Interface中新增的pushState()和replaceState()方法。MDN相关介绍（需要特定浏览器支持）。这两个方法应用于浏览器的历史记录栈，提供了对历史记录进行修改的功能。只是当他们进行修改时，虽然修改了url，但浏览器不会立即向后端发送请求。

当使用history模式时，url就像正常的url,例如http://abc.com/user/id相比hash模式更加好看。特别注意，history模式需要后台配置支持。如果后台没有正确配置，访问时会返回404。

通过history api，我们丢弃了丑陋的#，但是有一个缺点，当刷新时，如果服务器中没有相应的相应或者资源，会分分钟刷出一个404来（刷新需要请求服务器）。所以history模式不怕前进，不怕后退，就怕刷新。

9.ES6新特性？

ps：额赶时间回寝室.搞几个简单的题。后面会补充

1.let && const

2.模板字面量

3.箭头函数

4.延展操作符

5.解构赋值

10.HTML语义化标签？

为什么要语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；

用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；

有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

 <header></header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。

 也适合对页面内部一组介绍性或导航性内容进行标记。

 <nav></nav>：标记导航，仅对文档中重要的链接群使用。

 html5规范不推荐对辅助性页脚链接使用nav，除非页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。

 <main></main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

 <article></article>：包含像报纸一样的内容= =||是这么理解的，表示文档、页面、应用或一个独立的容器。

 article可以嵌套article，只要里面的article与外面的是部分与整体的关系。

 <section></section>：具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。

 如果只是为了添加样式，请用div！

 <aside></aside>：指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。

 如果放在main内，应该与所在内容密切相关。

 <footer></footer>：页脚，只有当父级是body时，才是整个页面的页脚。

下一期预告？MVC和MVVM的区别？飞飞对VUEX的全面理解？