我给面试题，你给答案，可好？

时间 2019-12-09

原文原文链接

越挫越勇，面试中反应自身的不足之处，喜欢被虐的感受。好期待进入把我虐的最惨的那家公司，由于我相信能够学到更多的知识。期待！期待！期待！css

如下是我在面试中，遇到的一些面试题，欢迎你们提供答案，一块儿学习呀。html

问题1：https与http的区别？

//答案：
一、HTTPS更安全
二、HTTPS须要申请证书
三、端口不一样：http(80端口)，https(443端口)
四、状态不一样
   http：链接简单，无状态
   https：由ssl+http构建、加密传输、身份认证的网络协议
HTTPS是http的升级版
对安全性很高的网络协议，采用HTTPS协议，例如：支付宝
复制代码

问题2：浏览器的内核？

一、Trident：IE内核 （css前缀：-ms-）
二、Gecko：FireFox内核（css前缀：-moz-）
三、Presto：Opera内核（css前缀：-o-）
四、Webkit：Safari、Chrome内核（css前缀：-webkit-）
五、Blink：Chrome内核（css前缀：-webkit-）
复制代码

问题3：ajax为何有局部刷新功能？前端
问题4：this的指向？vue

this的指向，在函数定义时肯定不了，
只有在函数执行时才能肯定this的指向。
this的最终指向的是那个调用他的对象（指向上一级对象）。
复制代码

问题5：css样式的优先级怎么比较？

优先级：内联-》ID选择器-》伪类=属性选择器-》类选择器-》元素选择器(p)-》通用选择器(*)-》继承的样式

权重：内联样式(1000)-》ID选择器(100)-》class选择器(10)-》标签选择器(1)

优先级同样的：
伪类=属性选择器=类选择器
复制代码

问题6：ES6和ES7的区别？web
问题7：Vue的过滤器的使用？面试
问题8：Vue组件的使用，请说明？ajax

面试题设计模式

技术面：数组

问题1：如何作优化？项目中作了哪些优化？（页面性能优化）

可参考一下连接：
一、https://www.cnblogs.com/coober/p/8078847.html  
二、https://blog.csdn.net/xustart7720/article/details/79960591
复制代码

问题2：用户输入URL的整个流程？请说明？

答案可参考：
https://www.cnblogs.com/daijinxue/p/6640153.html 

//答案：
一、浏览器的地址栏输入URL地址并按下回车；
二、浏览器查找当前URL是否存在缓存，并比较缓存是否过时；
三、DNS解析URL对应的IP；
四、根据IP创建TCP链接（三次握手）；
五、http发起请求；
六、服务器处理请求，浏览器接受http响应；
七、渲染页面，构建DOM树；
八、关闭TCP链接（四次挥手）
复制代码

人事面：浏览器

问题1：你从参与工做至今，有哪些收获？
问题2：若是一个刚毕业的新人，你要怎么带她/他？
问题3：你经历了哪些困难的事，让你印象深入的？
问题4：若是让你原公司的上司对你评价，你以为他会怎么评价你？优势和缺点？

面试题

问题1：数据脱敏怎么实现？例如187****7851
问题2：报文传输时，前端怎么作加密操做？

可参考的连接：
https://blog.csdn.net/guxingsheng/article/details/84451430
复制代码

问题3：Vue单页面的应用？
问题4：移动端有哪几种适配方式？

一、vh和vw 【面试官给的答案】
二、rem方式
三、经过媒体查询方式：css的media queries
四、为天猫为表明：flex弹性布局
五、以淘宝首页为表明的：rem+viewport缩放

可参考： A、https://blog.csdn.net/chenjuan1993/article/details/81710022
B、https://blog.csdn.net/chenjuan1993/article/details/81710022
复制代码

问题5：Vue的父子组件怎么传值？父组件传给子组件？子组件传给父组件？

一、父组件与子组件传值：
	父组件经过标签上面定义传值
	子组件经过props接受数据
二、子组件向父组件传递数据：
	子组件经过$emit方法传递参数
复制代码

问题:6：watch和computed的区别？

同：均可以观察页面的数据变化
异：
	computed：对原数据进行改造输出。例如：格式的编辑、大小写的转换、顺序重排、添加符号等。
	watch：监控数据。应用：天气预报的穿衣指数。
复制代码

面试题

问题1：document.cokie是什么数据类型？

答案：字符串
复制代码

问题2：localStorage、sessionStorage和cookie三者的区别？

同：都是保存在浏览器端，且同源。
异：
	一、cookie数据始终在同源http请求中携带(即便不须要)，即在浏览器和服务器之间来回传递；sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存；cookie数据还有路劲(path)的概念，能够限制cookie只属于某个路劲下。
	二、存储大小限制的不一样。cookie数据不能超过4K，同时由于每次http请求都会携带cookie，因此cookie只适合保存很小的数据，如：会话标识。sessionStorage和localStorage虽有大小限制，可是比cookie大，可达5M或更大。
	三、数据有效期不一样。sessionStorage：仅在当前浏览器关闭以前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，所以用做持久数据；cookie：只在设置的cookie过时时间以前有效，即便窗口或浏览器关闭。
	四、做用域不一样。sessionStorage不在不一样的浏览器窗口中共享，即便是同一个页面；localStorage在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。

参考的连接：https://www.cnblogs.com/zr123/p/8086525.html
复制代码

问题3：要遍历页面中全部父元素为p标签的img标签，有哪几种方式？你会选择哪一种方式？为何？（讲一下思路）
问题4：position有哪几种值？

一、absolute：生成绝对定位的元素。相对于static定位之外的第一个父元素进行定位；
二、fixed：生成绝对定位的元素。相对于浏览器窗口进行定位；
三、relative：生成相对定位的元素。相对于其正常位置进行定位；
四、static：默认值。没有定位，元素出如今正常的流中。
五、inherit：规定应该从父元素继承position属性的值。
复制代码

问题5：position的值absolute、relative和fixed的区别？

答案：见以上的问题4
复制代码

问题6：实现一个块级元素水平垂直居中，有几种方法？

法1：绝对定位 + margin负值使用
	
法2：绝对定位 + transform属性

法3：flex布局

法4：display:table来模拟表格形式，vertical-align:middle

参考连接：https://www.cnblogs.com/TigerZhang-home/p/7085503.html

复制代码

问题7：一个变量a，被赋值成字符串和对象，有什么区别？

答案：基本数据类型 和 引用数据类型
复制代码

问题8：js的原型和原型链，有什么区别？

原型链实现了继承。
原型链：每一个继承父函数的子函数的对象都包含一个内部属性_proto_。该属性包含一个指针，指向父函数的prototype，若父函数的原型对象的_proto_属性为再上一层函数，在此过程当中就造成了原型链。
原型：在JavaScript中，一共有两种类型的值，原始值和对象值，每一个对象都有一个内部属性[[prototype]]，咱们称之为原型。
复制代码

问题9：js深拷贝，讲一下原理？
问题10：js的call、apply和bind三者的区别？

同：
	一、三者都是用来改变函数的this对象的指向的
	二、第一个参数都是this要指向的对象
	三、均可以利用后续参数传值
异：
	一、call和apply都是对函数的直接调用，而bind返回的还是一个函数，因此还须要()来进行调用，例：xw.call(xh)、xw.apply(xh)、xw.bind(xh)()
	二、传参不同。call是列表式传法，apply是数组形式的传法，bind的传参与call一致，可是须要先调用再传参。例：xw.call(xh,'参数1','参数2')、xw.apply(xh,['参数1','参数2'])、xw.bind(xh)('参数1','参数2')

复制代码

问题11：请解释一下变量提高和暂时性死区？

变量提高：变量在声明以前使用，值为undefined。
暂时性死区：在代码块内，使用let命令声明变量以前，该变量都是不可用的。
复制代码

问题12：看如下代码，说出输出什么结果？

let a = [
    {
       index:'1',
       name:'apple'
    },
    {
       index:'2',
       name:'apple1'
    }
];
a.forEach(item=>{
     item = {index:'0',name:'banana'};
});
console.log(a);
复制代码

问题13：看如下2个代码段，请说一下都输出了什么？并说明。

//代码1：
var aa = 1;
function funA(){
   console.log(aa);
   var aa = 2;
   console.log(aa);
}
funA();
console.log(aa);

//代码2：
let bb = 1;
function funB(){
   console.log(bb);
   let bb = 2;
   console.log(bb);
}
funB();
console.log(bb);
复制代码

问题14：讲解一下栈和堆的区别？
问题15：Java的23种设计模式？

整体来讲设计模式分为三大类：

建立型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。

结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。

行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。

其实还有两类：并发型模式和线程池模式。

参考连接：https://www.cnblogs.com/wangzhongqiu/p/6245820.html
复制代码

问题16：vue的生命周期？并讲解每一个生命周期的做用？通常用到哪几个生命周期？更新周期，vue的执行原理是什么？
问题17：vue的生命周期中的销毁，实际开发中通常会应用到哪里？

//答案提示：关闭定时器、清数据
复制代码

问题18：vue的双向数据绑定的原理是什么？
问题19：用户输入URL后，都发生了什么？请介绍？

答案可参考：
https://www.cnblogs.com/daijinxue/p/6640153.html 

//答案：
一、浏览器的地址栏输入URL地址并按下回车；
二、浏览器查找当前URL是否存在缓存，并比较缓存是否过时；
三、DNS解析URL对应的IP；
四、根据IP创建TCP链接（三次握手）；
五、http发起请求；
六、服务器处理请求，浏览器接受http响应；
七、渲染页面，构建DOM树；
八、关闭TCP链接（四次挥手）
复制代码

问题20：DNS域名解析的原理是什么？

DNS域名解析：将域名还原为IP地址的过程。
过程：
	一、首先浏览器先检查本地hosts文件是否有这个网址映射关系，如有就调用这个IP地址映射，完成域名解析；
	二、若没找到则会查找本地DNS解析器缓存，若是查找到则返回；
	三、若仍是没找到则会查找本地DNS服务器，若查找到则返回；
	四、最后迭代查询，按根域服务器-》顶级域,.cn-》第二层域,hb.cn-》子域，www.hb.cn的顺序找到IP地址
复制代码

问题21：http的状态吗，都表示什么？200/304/403/404/500/503请讲解这几个状态码？

200：OK 服务器成功处理了请求
301：重定向，请求的URL已移走
304：未修改，客户的缓存资源是最新的，要客户端使用缓存
403：禁止，请求被服务器拒绝了
404：未找到资源
500：内部服务器错误
503：服务不可用
504：网关超时

参考连接：https://blog.csdn.net/allen_a/article/details/50715957
复制代码

问题22：看如下2段代码，输出什么？并说明。

//代码1：
for(var i=0;i<5;i++){
   setTimeout(function(){
       console.log(i);
   },1000);
}

//代码2：
for(let j=0;j<10;j++){
   setTimeout(function(){
       console.log(j);
   },1000);
}
复制代码

加油站

Vue.js面试题：www.jianshu.com/p/b1dd80f4d…
ES6,ES7,ES8特性总结整理：www.jianshu.com/p/7d7d64c0e…