1.说说你知道Javascript的内存回收机制
内存回收机制在回收内存时,首先会判断该对象是否被其它对象引用.在确定没有其它对象引用便释放该对象内存区域。
Javascript具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。
原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。
JavaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。
不再使用的变量也就是生命周期结束的变量，当然只可能是局部变量，全局变量的生命周期直至浏览器卸载页面才会结束。局部变量只在函数的执行过程中存在，而在这个过程中会为局部变量在栈或堆上分配相应的空间，以存储它们的值，然后在函数中使用这些变量，直至函数结束，而闭包中由于内部函数的原因，外部函数并不能算是结束。
2.简单介绍一下Promise，它解决了什么问题？
Promise 是异步编程的一种解决方案： 从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。 promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。Promise 规范中还规定了 Promise 中必须有 then 方法，这个方法也是实现异步的链式操作的基本。
Promise解决的问题：
（1）回调地狱问题
- 异步的嵌套可称之为回调地狱，回调地狱有两个很典型的问题就是可读性问题和信任问题
（2）可读性问题
（3）信任问题（也称控制反转问题）
- 对于回调过早的问题，由于Promise只能是异步的，所以不会出现异步的同步调用。即便是在决议之前的错误，也是异步的，并不是会产生同步（调用过早）的困扰。
- 对于回调过晚或没有调用的问题，Promise本身不会回调过晚，只要决议了，它就会按照规定运行。所以不会存在回调过晚或没有调用的问题
- 对于回调次数太少或太多的问题，由于Promise只能被决议一次，且决议之后无法改变，所以，即便是多次回调，也不会影响结果，决议之后的调用都会被忽略。
3.position : absolute和float属性的异同
两者的共同点：对行内元素设置float或absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
两者的不同点：float仍会占位置，position会覆盖文档流中的其他元素。
网友总结的图如下：
4.Cookie和Session有什么联系和区别？
cookie：
在网站中，http请求是无状态的。也就是说即使第一次和服务器连接后并且登录成功后，第二次请求服务器依然不能知道当前请求是哪个用户。cookie的出现就是为了解决这个问题，第一次登录后服务器返回一些数据（cookie）给浏览器，然后浏览器保存在本地，当该用户发送第二次请求的时候，就会自动的把上次请求存储的cookie数据自动的携带给服务器，服务器通过浏览器携带的数据就能判断当前用户是哪个了。
session：
session和cookie的作用有点类似，都是为了存储用户相关的信息。不同的是，cookie是存储在本地浏览器（易伪造、不安全），而session存储在服务器端（会消耗服务器资源）。存储在服务器的数据会更加的安全，不容易被窃取。其次，Cookie 只能保存ASCII字符串，如果是Unicode字符或者二进制数据需要先进行编码。Cookie中也不能直接存取Java对象。 Session能够存取很多类型的数据，包括String、Integer、List、Map等，Session中也可以保存Java对象。
5.Vue是如何实现双向数据绑定的？原理是什么？
- vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue追踪依赖，在属性被访问和修改时通知变化。
- vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 { {}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。
6.css水平、垂直居中的写法，请至少写出4种（请写出垂直水平居中的实现方法）
（1）水平居中：
- 元素为行内元素，在父元素设置text-align:center
- 如果元素宽度固定，可以设置左右margin为auto
- 如果元素为绝对定位，可以设置父元素position为relative，元素设置left:0;right:0;margin:auto
- 使用
flex-box布局，指定justify-content属性为center display设置为tabel-ceil
（2）垂直居中：
- 文本垂直居中设置
line-height为height值 - 绝对定位中固定高度时设置
top:50%，margin-top值为高度一半的负值 - 绝对定位中设置
bottom:0,top:0,并设置margin:auto - 使用
flex布局，设置为align-item：center - 将显示方式设置为表格，
display:table-cell,同时设置vertial-align：middle
7.对MVC和MVVM的理解？
(1)MVC(Model View Controller)是一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
(2)MVVM是 Model-View-ViewModel的缩写，即模型-视图-视图模型，是一种设计思想。
Model：代表数据模型，数据和业务逻辑都在Model层中定义；
View：代表UI视图，负责数据的展示；
ViewModel：就是与界面(view)对应的Model。因为，数据库结构往往是不能直接跟界面控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。
8.vue-router有哪些钩子函数？
（1）全局路由钩子函数beforeEach和afterEach
每次路由跳转，都会执行beforeEach和afterEach，一般写在main.js可以做权限控制
beforeEach函数有三个参数：
to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
afterEach函数不用传next()函数
这类钩子主要作用于全局,一般用来判断权限等操作
（2）单个路由钩子函数beforeEnter和beforeleave
beforeEnter有三个参数：to/from/next
单个路由钩子函数主要用于写某个指定路由跳转时需要执行的逻辑
（3）组件路由钩子函数beforeRouteEnter，beforeRouteUpdate,beforeRouteLeave
三个参数：to/from/next
beforeRouteEnter：进入这个组建路由之前
beforeRouteLeave：离开这个组建路由
beforeRouteUpdate：再本路由的下级路由切换才会触发beforeRouteUpdate
总共有7个钩子函数！
9.display : none和visiable : hidden区别
-
联系：它们都能让元素不可见
-
区别：
display:none会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见display: none是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible可以让子孙节点显式- 修改常规流中元素的
display通常会造成文档重排。修改visibility属性只会造成本元素的重绘 - 读屏器不会读取
display: none元素内容；会读取visibility: hidden元素内容
10.你是怎么学习JS的？（请写出渠道：网站、书籍和方法）
网站：慕课网、bilibili、CSDN学院、简书、博客园、开源中国、github等；
书籍：JavaScript高级程序设计（第3版）、Java Web程序设计（慕课版）；
方法：
- 跟着优质教学视频进行学习，跟着著名老师敲代码；
- 找到动力；
- 学习时间投入；
- 找学习路线图；
- 写博客。博客是程序员必备的，在编程过程总要反思，知其然知其所以然，写代码多问问为什么。问懂了，记录下来，这些就成了你的宝贵经验；
- 阅读源代码；
11.说一下localStorage、sessionStorage和cookie的区别
-
localStorage: localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据，否则数据永远不会消失
-
sessionStorage: sessionStorage 的生命周期是仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念，sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的
-
cookie: cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右, 有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取
共同点：都是保存在浏览器端、且同源的
区别：
- cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
- 存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
- 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
- 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
- web Storage支持事件通知机制，可以将数据更新的通知发送给监听者
- web Storage的api接口使用更方便
12.HTML5有哪些新特性？
Html5 现在已经不是SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加
- 新增选择器
document.querySelector、document.querySelectorAll - 拖拽释放(
Drag and drop) API - 媒体播放的
video和audio - 本地存储
localStorage和sessionStorage - 离线应用
manifest - 桌面通知
Notifications - 语意化标签
article、footer、header、nav、section - 增强表单控件
calendar、date、time、email、url、search - 地理位置
Geolocation - 多任务
webworker - 全双工通信协议
websocket - 历史管理
history - 跨域资源共享(CORS)
Access-Control-Allow-Origin - 页面可见性改变事件
visibilitychange - 跨窗口通信
PostMessage Form Data对象- 绘画
canvas
13.介绍一下Vue的生命周期钩子函数
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。在vue组件中，组件的实例从创建前(beforeCreate)、创建后(created)、挂载前(beforeMount)、挂载后(mounted)、更新前(beforeUptate)、更新后(updated)、销毁前(beforeDestroy)、销毁后(destroyed)一系列，即从创建到销毁的整个过程，我们把它称之为vue组件的一个完整的生命周期。
beforeCreate(){}：实例初始化之前 数据没有加载 页面没有显示
debugger; 断点调试
往往在这个阶段做loading 请求状态
Created(){}：实例初始化后，请求到了数据，事件，属性等，但是没有加载，页面依然没有显示，在这个阶段，往往发送 ajax请求，http请求
create---beforeMount之间 vue会在options中查找有没有el选项，有就把它作为模板，没有就通过vm.$mount() 去挂载
created之后有个判断，先看你有没有el属性，在看看有没有模板属性，有模板属性呢，就会把模板上的东西渲染出去，没有模板属性呢，就把el上的东西当做模板渲染出去，
created-boforeMount的过程就是找模板，而模板都是虚拟的
beforeMount(){}：vue会将el对应的模板 加到$el中去,但是还没有挂载出去，页面没有显示
mounted(){}：页面加载出来
beforeUpdate(){}：数据更新前，在虚拟dom中使用differ算法，在内存中实现的，mounted之前的过程就不管了。如果想看属性的变化，
在这个阶段可以使用watch(属性监听)这个方法监听属性
update(){}：更新完了，在渲染，谁改变了渲染谁，不是整个dom树重新渲染
beforeDestroy(){}：销毁之后
destroy销毁，实例销毁需要人为触发
销毁：之前渲染好的保持不变，保留下来，后面再使用这个实例就不起作用了
Vm.$destroy() 进行销毁
destroyed(){}：销毁之后
简述一下每个周期具体适合那些场景：
beforeDestroy：可以在这加个loading事件，在加载实例是触发
created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mouted：挂载元素，获取到DOM节点
updated：如果对数据统一处理，在这里写上相应函数
beforeDestroy：可以做一个确认停止事件的确认框
nextTick：更新数据后立即操作Dom
14.Vue有哪些指令，各自的用处是什么？
v-if：根据表达式的值的真假条件渲染元素，在切换时元素及它的数据绑定/组件被销毁并重建。
v-show：根据表达式之真假值，切换元素的display CSS 属性。
v-for：循环指令，基于一个数组或对象渲染一个列表，Vue 2.0 以上必须需配合key值使用。
v-bind：动态地绑定一个或多个特性，或一个组件prop到表达式。
v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。
v-model：实现表单输入和应用状态之间的双向绑定。
v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译。
v-once：只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
15.请写出css优先级
优先级关系：！important（在样式属性后不加“;”，在！important后加分号） > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符 > 继承 > 浏览器默认属性
CSS选择器分类
- 全局选择器（通配符*）
- 标签选择器（body，div，p，ul，li）
- 类选择器（.）
- ID选择器（#）
- 组合选择器（.head .head_loge，两选择器之间用空格隔开）
- 后代选择器（#head .nav li ul，从父级到子孙集的选择器）
- 子选择器（div>p）
- 群组选择器（div，span，img{color：red；}，即将具有相同样式的标签分组显示）
- 继承选择器（div p，两选择器用空格键分开）
- 伪类选择器（链接样式a元素的伪类：:link(未被访问)，:visited(已访问)，:active(被选择)，:hover(当鼠标悬停在链接上)）
- 字符串匹配的属性选择符（^(开始)，$(中间)，*(结尾)）
- css相邻兄弟选择器（如h1+p）
CSS选择器权值：是由四个级别和各级别出现次数决定的
四个级别：行内样式，id选择器，class选择器，标签
每个规则对应一个初始值0,0,0,0
- 若是 行内选择器，则加1、0、0、0
- 若是 id选择器，则加0、1、0、0
- 若是 类选择器/属性选择器/伪类选择器，则分别加0、0、1、0
- 若是 元素选择器/伪元素选择器，则分别加0、0、0、1
算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。
优先级相同时，则采用就近原则，选择最后出现的样式
16.介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
17.在以下元素，哪些是空元素？
a) img
b) span
c) meta
d) input
e) dd
18.(window.a || (window.a = 'a')) 最后输出什么？为什么？
以上皆是本人目前在广州找实习期间（到现在还没找到）亲身经历过的笔试题中的概念题，部分答案源于网上，如有错漏或有更好的答案欢迎大家指出，仅作为笔记收录使用，也衷心希望各位能少走弯路，能够找到自己心仪的工作！