面试题51——60

51.JS内存回收机制？

Javascript语言有自己的一套内存回收机制，一般情况下局部变量和对象使用完就会被系统自动回收，无需我们理会。但是碰到闭包的情况这些变量和对象是不会被回收的，对于普通的web站点，页面刷新或跳转这些内存也会被回收。如果是单页web站点，页面切换及数据请求都是通过ajax无刷新机制实现的，页面资源无法自动回收，时间长了会严重影响性能，造成内存泄漏甚至页面崩溃直接退出，这时候手动释放不用资源就非常必要了，包含删除dom、释放对象等
想手动释放含有闭包的对象时，必须先将引用对象属性的事件删除，然后设置为null方可消耗对象。这种事件一般是可以多次执行的，如原生事件的监听，定时器。一般比较有名较完善的插件都有带销毁资源方法，如iscroll插件，里面就有一个destroy原型方法，它里面也就是移除事件监听和删除定时器。

52.promise是什么？能解决什么问题？

Promise是ES6中新增的一种异步编程的方式，用于解决回调的方式的各种问题，提供了更多的可能性。

Promise表示的是一个计算结果或网络请求的占位符。由于当前计算或网络请求尚未完成，所以结果暂时无法取得。

Promise对象一共有3中状态，pending，fullfilled（又称为resolved）和rejected：

        pending——任务仍在进行中。
        resolved——任务已完成。
        reject——任务出错。
Promise对象初始时处于pending状态，其生命周期内只可能发生以下一种状态转换：

        任务完成，状态由pending转换为resolved。
        任务出错返回，状态由pending转换为rejected。
Promise对象的状态转换一旦发生，就不可再次更改。这或许就是Promise之“承诺”的含义吧。

53.float和absolute有什么区别？

     只有position才是定位，float不能说是定位，不过你可以说这两种布局方式有什么不同。float和position这两者并没有孰好孰不好的问题，两者按需使用，各得所需的效果。
float从字面上的意思就是浮动,float能让元素从文档流中抽出，它并不占文档流的空间，典型的就是图文混排中文字环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是你可能需要注意的地方。并且如果你要考虑到IE6兼容问题。
而position顾名思义就是定位。他有以下这几种属性：static(默认)，relative(相对定位)，absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间，他们并不是脱离文档的。absolute和fixed是脱离文档流的，不会占据文档流空间。
比较可以发现，float和position最大的区别其实是是否占据文档流空间的问题。虽然position有absolute和fixed这两个同样不会占据文档流的属性，但是这两个并不适合被用来给整个网页做布局。为什么？因为这样你就得为页面上的每一个元素设置一个xy坐标来定位。
float布局就显得灵活多了。但是一些特殊的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位，当父级元素是relative的时候，absolute的元素就会是基于它的定位了。比如你可以让一个按钮始终显示在一个元素的右下角。
总结一句就是不推荐用position来布局整个页面的大框架，而推荐用float或者文档流的默认方式。
 

54.cookie和session有什么联系？

1.cookie

cookie是啥？
【是一个由程序员自己定义的字符串】

cookie从哪来？
【从服务器中来，程序员会在服务器的header中写入一个Set-Cookie字段，把对应的值会存在浏览器中，这个值可以在响应中看到】

cookie存到哪？
【cookie是按照域名来存的，每个域名都有自己的cookie，浏览器都是用域名来区分的，也就是每个浏览器的cookie都不一样】

cookie以什么形式保存？
【cookie以键值对的形式把用户数据存入客户端中】

cookie怎么用？
【可以用来识别身份信息，比如说一次访问后，后续访问相同的域名/地址请求，就会带上cookie，服务器会感知到这个cookie，进而就可以做出一些处理，就比如登录的时候，如果由cookie，就不需要重复登陆了】

cookie有什么缺陷？
【cookie是可以用来识别身份信息的，但是通过抓包就能很容易的看到身份信息在cookie字段里呈现出来，这就大大增加的信息泄露的风险，如果别人拿到了这个cookie字段，就会获取你的身份信息】

cookie缺陷的解决方式？
【引入session】

2.session

session以什么形式保存？
【session以键值对的形式把用户数据存入服务器中】

session怎么解决信息泄露问题？
【session会产生一个随机字符sessionId，可以保证每次生成的字符不一样，给浏览器返回的cookie中包含sessionId就可以了，拿着sessionId就可以找到对应的用户信息】

sessionId被别人“拿走”了怎么办？
【很多人的疑问在于“如果别人能获取到这个sessionId怎么办，不是会照样可以拿走用户的信息吗？” 其实session是有过期机制的，可以在session中保存该用户的session是何时建立的，以及何时要过期，就可以拿一个单独的线程不停的扫描session，只要发现过期就会自动删掉。如果别人拿走了sessionId，短期内是可以使用用户信息的，但是过了期限，session就自动删掉了，那么这个旧的session就失效了，相当于需要重新登陆】
 

55.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变更双向绑定效果。
 

56.vue父组件子组件通信？

1.props和$emit

父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的.

　    1).父组件传递了message数据给子组件，并且通过v-on绑定了一个getChildData事件来监听子组件的触发事件；

　　2).子组件通过props得到相关的message数据,最后通过this.$emit触发了getChildData事件

2.$attrs和$listeners

　　第一种方式处理父子组件之间的数据传输有一个问题：如果父组件A下面有子组件B，组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢？ 如果采用第一种方法，我们必须让组件A通过prop传递消息给组件B，组件B在通过prop传递消息给组件C；要是组件A和组件C之间有更多的组件，那采用这种方式就很复杂了。Vue 2.4开始提供了$attrs和$listeners来解决这个问题，能够让组件A之间传递消息给组件C。

 3. 中央事件总线

上面两种方式处理的都是父子组件之间的数据传递，而如果两个组件不是父子关系呢？这种情况下可以使用中央事件总线的方式。新建一个Vue事件bus对象，然后通过bus.$emit触发事件，bus.$on监听触发的事件。

4. provide和inject

　　在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项。他们成对出现，用于父级组件向下传递数据。

父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。

5. v-model

　　父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(‘input',val)自动修改v-model绑定的值

 6. $parent和$children

      在组件内部可以直接通过子组件$parent对父组件进行操作，父组件通过$children对子组件进行操作.

7. vuex处理组件之间的数据交互

如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候才有上面这一些方法可能不利于项目的维护，vuex的做法就是将这一些公共的数据抽离出来，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。

57.图片预加载和懒加载？

1.什么是懒加载

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。

2.为什么要用懒加载

能提升用户的体验，不妨设想下，用户打开像手机淘宝长页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长，用户难免会心生抱怨，这就严重影响用户体验。
减少无效资源的加载，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。
防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用。

3.懒加载的原理

首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中， 当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。

1.什么是预加载

资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

2.为什么要用预加载

在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。

3.实现预加载的几种办法

使用HTML标签
<img src="http://pic26.nipic.com/20121213/61681830044449030002.jpg" style="display:none"/>

懒加载和预加载的对比

• 两者都是提高页面性能有效的办法.
• 两者主要区别是一个是提前加载，一个是迟缓甚至不加载。
• 懒加载对服务器前端有一定的缓解压力作用
• 预加载则会增加服务器前端压力

58.MVVM和MVC区别？

MVC

任何一个正经开发过一阵子软件的人都熟悉MVC，它意思是Model View Controller, 是一个在复杂应用设计中组织代码的公认模式. 它也被证实在 iOS 开发中有着第二种含义: Massive View Controller(重量级视图控制器)。它让许多程序员绞尽脑汁如何去使代码被解耦和组织地让人满意. 总的来说, iOS 开发者已经得出结论: 他们需要给视图控制器瘦身, 并进一步分离事物;但该怎么做呢?

MVVM

于是MVVM流行起来, 它代表Model View View-Model, 它在这帮助我们创建更易处理, 更佳设计的代码.

在有些情况违背苹果建议的编码方式不是很能讲得通。我不是说不赞成这样子, 我指的是可能会弊大于利。比如我不建议你去实现个自己的 view controller 基类并试着自己处理视图生命周期.

59.vue删除数据监测不到？

1.首先先说js的数据类型
分为两种：基本数据类型和引用数据类型
对于基本数据类型的观测可以使用watch,或者computed计算数据
然而引用数据类型 数组或者对象 需要深度监听
        watch: {
        arr: {
        immediate: true,
        handler(val) {
        。。。
        }
        }
        },
2.我们在项目中会遇到数据改变了但视图没有发生变化,例如使用computed
这是什么原因呢？
原因在Object.defineproperty()方法在操作数据和对象不会触发set方法所以视图不会更新
受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。

解决方法：1.this.$set(obj,‘b’,2)=》针对于对象
2.生成一个新的数组在使用数组的变异方法如push,splice,等,因为数组的变异方法,也不会触发set所以会出现视图不更新
 

60.编程：连接两个数组并返回？

concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

var arr = [1,2,3]

var arr2 = [4,5,6]

console.log(arr.concat(arr2)) //1,2,3,4,5,6