web前端面试题整理
目录
1. 怎样实现JS继承, ES5和ES6中实现继承有什么区别？
2. 强制缓存与协商缓存，举例写几个缓存相关的Header；
3. 编写函数实现如何快速让字符串变成以千为精度的数字？
4. 前端项目大多都有编译构建环节，请例举说明Web应用“编译时”与“运行时”的区别？
5. 不使用JSX如何编写React?比如：编写一个内容为“hello”的p标签；
6. 闭包的原理和优劣？
7. vue v-model；
8. vue 动态绑定；
9. vue工作原理；
10. 跨域请求的种类、区别？
11. 水平、垂直居中；
12. redux原理；
13. fetch与ajax优缺点；
14. createElement如何构建虚拟dom；
15. React.Component如何实现组件化；
16. setState异步队列；
17. dom的diff算法；
18. render渲染逻辑；
19. React16 fiber 架构；
20. React Hooks;
21. MVVM, MVP各模式是怎么样的？
22. transfer中颜色能渐变吗？
23. SAAS产品是什么？
24. vue中的name作用？
27. fetch怎么实现请求超时的设置？
28. continue、 break、return分别返回什么地方？
29. 怎么实现单点登录？
30. 怎么在前端实现登录超时？
31. 前端页面怎么实现静态资源更新的控制（自动更新与不更新）？
32. 单元测试和docker发布？
33. 深拷贝对象？
34. 请写出下面一段JS脚本的打印结果：
35. 按顺序写下打印的值，并口述讲出js的运行过程
1. 怎样实现JS继承, ES5和ES6中实现继承有什么区别？
2. 强制缓存与协商缓存，举例写几个缓存相关的Header；
3. 编写函数实现如何快速让字符串变成以千为精度的数字？
4. 前端项目大多都有编译构建环节，请例举说明Web应用“编译时”与“运行时”的区别？
5. 不使用JSX如何编写React?比如：编写一个内容为“hello”的p标签；
6. 闭包的原理和优劣？
7. vue v-model；
8. vue 动态绑定；
9. vue工作原理；
10. 跨域请求的种类、区别？
11. 水平、垂直居中；
12. redux原理；
13. fetch与ajax优缺点；
14. createElement如何构建虚拟dom；
15. React.Component如何实现组件化；
16. setState异步队列；
17. dom的diff算法；
18. render渲染逻辑；
19. React16 fiber 架构；
20. React Hooks;
21. MVVM, MVP各模式是怎么样的？
22. transfer中颜色能渐变吗？
2D转换（transform）：
3D转换：
过度（transition）：
div{
width: 200px;
height: 200px;
background-color: #f00;
transition: all 2s;
}
div:hover{
background-color: #00f;
transform: translateX(500px) translateY(500px) scale(0.8) rotate(360deg);
}动画（animation）：
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}23. SAAS产品是什么？
24. vue中的name作用？
25. token和cookie区别？
26. contextmenu提示过时，现在是怎么用的？
27. fetch怎么实现请求超时的设置？
参考链接：
https://www.jianshu.com/p/8556d4394a5d
28. continue、 break、return分别返回什么地方？
1. break :
(1).结束当前整个循环，执行当前循环下边的语句。忽略循环体中任何其它语句和循环条件测试。
(2).只能跳出一层循环，如果你的循环是嵌套循环，那么你需要按照你嵌套的层次，逐步使用break来跳出。[逐层判断，逐步跳出]
(3).break在循环体内，强行结束循环的执行，也就是结束整个循环过程，不在判断执行循环的条件是否成立，直接转向循环语句下面的语句。
(4).当break出现在循环体中的switch语句体内时，其作用只是跳出该switch语句体。
总的来说：就近原则，结束当前的整个循环。
for(var i=0;i<10;i++) {
console.log(i);//0，1，2，3，4
if(i===4)//当i=4时，退出循环。不在判断执行的条件是否成立。
break;
}
bigloop:
for(var i=0;i<10;i++) {
smallerloop:
for(var x=0;x<10;x++) {
console.log('i:'+i+'x:'+x)
if(x===3)
break smallerloop;//仅仅是终止里面的循环，外层的循环并没有终止。
if(i===2)
break bigloop;
}
}
2. return：
(1).return 从当前的方法中退出,返回到该调用的方法的语句处,继续执行。
(2).return 返回一个值给调用该方法的语句，返回值的数据类型必须与方法的声明中的返回值的类型一致。
(3). return后面也可以不带参数，不带参数就是返回空，其实主要目的就是用于想中断函数执行，返回调用函数处。
3. continue：
(1).终止本次循环的执行，即跳过当前这次循环中continue语句后尚未执行的语句，接着进行下一次循环条件的判断。
(2).结束当前循环，进行下一次的循环判断。
(3).终止当前的循环过程，但他并不跳出循环,而是继续往下判断循环条件执行语句.他只能结束循环中的一次过程,但不能终止循环继续进行.
var myArray=['a','b','tiger','big','c'];
for(var i=0;i29. 怎么实现单点登录？
这个需要cookie或者session配合后台完成。
30. 怎么在前端实现登录超时？
在请求或者操作之间做时间差的计时操作，超时自动退出。
31. 前端页面怎么实现静态资源更新的控制（自动更新与不更新）？
32. 单元测试和docker发布？
33. 深拷贝对象？
参考链接：
https://blog.csdn.net/JohnZhongJob/article/details/96211163
34. 请写出下面一段JS脚本的打印结果：
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
Promise.resolve().then(function(){
console.log('promise1');
}).then(function(){
console.log('promise2');
});
console.log('script end');
// script start
// script end
// promise1
// promise2
// setTimeout
// 这里面涉及到‘宏任务’和‘微任务’35. 按顺序写下打印的值，并口述讲出js的运行过程
function Foo() {
bar = function () {
console.log(1);
};
return this;
}
Foo.bar = function () {
console.log(2);
};
Foo.prototype.bar = function () {
console.log(3);
};
var bar = function () {
console.log(4);
};
function bar() {
console.log(5);
}
bar(); // 4
Foo.bar(); // 2
Foo().bar(); // 1
(new Foo).bar(); // 3
bar(); // 136. 深入浅出JavaScript运行机制（微任务和宏任务）
37. var和let、const的区别
38. 箭头函数和普通函数的区别（主要时this指向问题）
39. LeetCode的了解
40. 一次完整的http响应涉及了哪些知识
41. React Hooks学习
1. useState() 2.useContext() 3.useRender() 4.useEffect()