【前端面试】前端面试必看！前端工程师之常见面试题 附讲解
前端工程师之常见面试题
该专题搜集了前端工程师常见的面试题，并附上讲解 将持续更新。
对你有帮助的话，麻烦点个关注、赞或者评论一下吧。
专题的主要的面试题目范围：
从计算机网络--HTML/CSS/JAVASCRIPT--ES6--Vue.js/JQuery/Ajax--更多常见框架
未来会考虑单独出个专题，专门针对不同范围的面试题做一次单独的讲解。
一、Vue的生命周期
1、什么是Vue的生命周期？
Vue实例从创建到销毁的过程称为Vue的生命周期。
2、Vue生命周期的主要内容及周期顺序？
① 创建实例 new Vue()
② 初始化数据
③ 编译new Vue({…}) 模板
④ 加载HTML-DOM
⑤ 渲染
⑥ 更新
⑦二次渲染
⑧卸载
⑨销毁
二、前端常见跨域解决方案?
1、什么是同域？
同域指的是 同一域下 的文档或脚本 试图去请求 同一域下 的另一个文档或脚本称为跨域。即当前URL向 同一域 下的URL发起网络请求。
2、什么是跨域?
跨域指的是 同一域下 的文档或脚本 试图去请求 不同一域下 的另一个文档或脚本称为跨域。即当前URL向 不同一域 下的URL发起网络请求。
3、判断跨域的标准？
在网页的同源策略下狭义定义：一个URL向另一个URL发起请求时，凡是涉及：
①域名不一致 ②端口不一致 ③协议不一致 都为跨域。在同源策略下，跨域访问是被禁止访问不能通信的。
4、如何解决跨域不能通信的问题？
只列举了比较常用的解决方法
① 一般处理方法
如果不涉及Cookie传递的跨域，一般只需要在服务端设置 Access-Control-Allow-Origin，它是HTML5中定义的一种解决资源跨域的策略。
从服务端发起跨域请求:respose 设置 Access-Control-Allow-Origin : 要跨域的网页
response.addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
从网页向另一个网页发起跨域请求：
在Meta标签上设置 <meta http-equiv="Access-Control-Allow-Origin" content="*">
② 跨域资源共享 CORS
CORS背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
IE10 对CORS的实现基于AJAX的核心对象 new XMLHttpRequest()
# 在IE10以前 IE对CORS的实现是xdr
var xdr = new XDomainRequese();
# 对该网页发起get的跨域请求
xdr.open('get', 'http://www.baidu.com');
# 跨域请求完成后的方法
xdr.onload = function(){
# responseText为跨域响应内容
console.log(xdr.responseText);
}
# 在IE10及以后 IE对CORS的实现是xhr
var xhr = new XMLHttpRequest();
# 跨域请求完成后的方法
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 304 || xhr.status == 304){
console.log(xhr.responseText);
}
}
}
# 对该网页发起get的跨域请求
xhr.open('get', 'http://www.baidu.com');
......
② 使用浏览器的API Web sockets
web sockets是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。
只有在支持web socket协议的服务器上才能正常工作。
var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss
socket.send('hello WebSockt');
socket.onmessage = function(event){
var data = event.data;
}
③Nginx设置反向代理
该方法不作陈述，背后的原理为Nginx将不同域的内容定位为同一域内，即时请求也是发送同域的请求。
三、Vue中的computed计算属性与watch监听属性的区别？
1、什么是computed计算属性与watch监听属性?
computed计算属性：即为在Vue对象中由computed计算出来的属性。当计算的依赖属性改变其计算属性也会改变。
watch监听属性：即为在Vue对象中，在watch上声明的监听的属性 ，当该属性发生改变后则会执行对应方法。
<p1>num = {{num}}</p1> //num =3
var vue = new Vue({
el:'#workingarea', //绑定的dom模板
data:{
num1 :1 //绑定的数据
num2 :2
num3 :4
},
computed:{
num(){
//当计算的依赖属性num1和num2改变后，num也会发生改变
return this.num1+this.num2;
}
},
watch:{
//num3发生改变后触发该方法
num3(){
.........
}
}
})
2、computed计算属性与watch监听属性的区别？
computed属性和watch属性本质上都是用于监听属性的变化。
区别一：computed监听的属性可以不被声明，并由依赖属性组成。
而watch监听的属性一般则为由声明的属性组成。
区别二：computed监听的属性有缓存机制，而watch无。在性能上看computed更好。如果不想用缓存可以用method进行替代。
四、cookie与Session
1、cookie与Session的区别？
2、cookie、localStroge与SessionStroge的区别？
五、输入网址后，浏览器发生了什么事情？
六、盒模型?
七、网页如何进行适配？
八、apply与call区别
九、闭包
十、setTimeout、setInterval的区别
十一、多线程
十二、Promise对象
十三、网页适配
十四、Vue相关面试题
本文地址：https://blog.csdn.net/weixin_38800668/article/details/110897898