面试题记录

一如初衷
291 阅读9分钟

以下是我在面试中，遇到的一些面试题，欢迎大家提供答案，一起学习呀。

  • 问题1：https与http的区别？
//答案：
1、HTTPS更安全
2、HTTPS需要申请证书
3、端口不同：http(80端口)，https(443端口)
4、状态不同
   http：连接简单，无状态
   https：由ssl+http构建、加密传输、身份认证的网络协议
HTTPS是http的升级版
对安全性很高的网络协议，采用HTTPS协议，例如：支付宝
  • 问题2：浏览器的内核？
1、Trident：IE内核 （css前缀：-ms-）
2、Gecko：FireFox内核（css前缀：-moz-）
3、Presto：Opera内核（css前缀：-o-）
4、Webkit：Safari、Chrome内核（css前缀：-webkit-）
5、Blink：Chrome内核（css前缀：-webkit-）
问题3：ajax为什么有局部刷新功能？
  • 问题4：this的指向？
this的指向，在函数定义时确定不了，
只有在函数执行时才能确定this的指向。
this的最终指向的是那个调用他的对象（指向上一级对象）。
  • 问题5：css样式的优先级怎么比较？
优先级：内联-》ID选择器-》伪类=属性选择器-》类选择器-》元素选择器(p)-》通用选择器(*)-》继承的样式

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

优先级一样的：
伪类=属性选择器=类选择器

问题6：ES6和ES7的区别？

问题7：Vue的过滤器的使用？

问题8：Vue组件的使用，请说明？

面试题

技术面：

  • 问题1：如何做优化？项目中做了哪些优化？（页面性能优化）
可参考一下链接：
1、https://www.cnblogs.com/coober/p/8078847.html  
2、https://blog.csdn.net/xustart7720/article/details/79960591
  • 问题2：用户输入URL的整个流程？请说明？
答案可参考：
https://www.cnblogs.com/daijinxue/p/6640153.html 

//答案：
1、浏览器的地址栏输入URL地址并按下回车；
2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期；
3、DNS解析URL对应的IP；
4、根据IP建立TCP连接（三次握手）；
5、http发起请求；
6、服务器处理请求，浏览器接受http响应；
7、渲染页面，构建DOM树；
8、关闭TCP连接（四次挥手）

人事面：

问题1：你从参与工作至今，有哪些收获？

问题2：如果一个刚毕业的新人，你要怎么带她/他？

问题3：你经历了哪些困难的事，让你印象深刻的？

问题4：如果让你原公司的上司对你评价，你觉得他会怎么评价你？优点和缺点？

问题1： 数据脱敏怎么实现？例如187****7851

  • 问题2： 报文传输时，前端怎么做加密操作？
可参考的链接：
https://blog.csdn.net/guxingsheng/article/details/84451430

问题3：Vue单页面的应用？

  • 问题4：移动端有哪几种适配方式？
1、vh和vw 【面试官给的答案】
2、rem方式
3、通过媒体查询方式：css的media queries
4、为天猫为代表：flex弹性布局
5、以淘宝首页为代表的：rem+viewport缩放

可参考： A、https://blog.csdn.net/chenjuan1993/article/details/81710022
B、https://blog.csdn.net/chenjuan1993/article/details/81710022
  • 问题5：Vue的父子组件怎么传值？父组件传给子组件？子组件传给父组件？
1、父组件与子组件传值：
	父组件通过标签上面定义传值
	子组件通过props接受数据
2、子组件向父组件传递数据：
	子组件通过$emit方法传递参数
  • 问题:6：watch和computed的区别？
同：都可以观察页面的数据变化
异：
	computed：对原数据进行改造输出。例如：格式的编辑、大小写的转换、顺序重排、添加符号等。
	watch：监控数据。应用：天气预报的穿衣指数。

面试题

  • 问题1：document.cokie是什么数据类型？
答案：字符串
  • 问题2：localStorage、sessionStorage和cookie三者的区别？
同：都是保存在浏览器端，且同源。
异：
	1、cookie数据始终在同源http请求中携带(即使不需要)，即在浏览器和服务器之间来回传递；sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存；cookie数据还有路劲(path)的概念，可以限制cookie只属于某个路劲下。
	2、存储大小限制的不同。cookie数据不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如：会话标识。sessionStorage和localStorage虽有大小限制，但是比cookie大，可达5M或更大。
	3、数据有效期不同。sessionStorage：仅在当前浏览器关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口或浏览器关闭。
	4、作用域不同。sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

参考的链接：https://www.cnblogs.com/zr123/p/8086525.html

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

  • 问题4：position有哪几种值？
1、absolute：生成绝对定位的元素。相对于static定位以外的第一个父元素进行定位；
2、fixed：生成绝对定位的元素。相对于浏览器窗口进行定位；
3、relative：生成相对定位的元素。相对于其正常位置进行定位；
4、static：默认值。没有定位，元素出现在正常的流中。
5、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三者的区别？
同：
	1、三者都是用来改变函数的this对象的指向的
	2、第一个参数都是this要指向的对象
	3、都可以利用后续参数传值
异：
	1、call和apply都是对函数的直接调用，而bind返回的仍是一个函数，所以还需要()来进行调用，例：xw.call(xh)、xw.apply(xh)、xw.bind(xh)()
	2、传参不一样。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 

//答案：
1、浏览器的地址栏输入URL地址并按下回车；
2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期；
3、DNS解析URL对应的IP；
4、根据IP建立TCP连接（三次握手）；
5、http发起请求；
6、服务器处理请求，浏览器接受http响应；
7、渲染页面，构建DOM树；
8、关闭TCP连接（四次挥手）
  • 问题20：DNS域名解析的原理是什么？
DNS域名解析：将域名还原为IP地址的过程。
过程：
	1、首先浏览器先检查本地hosts文件是否有这个网址映射关系，若有就调用这个IP地址映射，完成域名解析；
	2、若没找到则会查找本地DNS解析器缓存，如果查找到则返回；
	3、若还是没找到则会查找本地DNS服务器，若查找到则返回；
	4、最后迭代查询，按根域服务器-》顶级域,.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);
}

加油站

avatar
文章
阅读
粉丝