2020年中的中高级前端面试题

面试前的准备

1.中/英文自我介绍
2.离职的原因

html

1.把带 css 链接的<link>标签放在 <head> 标签内，而带 js 链接的 <script> 标签尽量靠近 </body> , 为什么会有这种提议？如果必须不这样做，如何处理？

css

1.列举水平垂直居中的实现
2.简述一下什么是盒子模型
3.了解过 flex 布局、 grid 布局吗
4.计算样式权重

JavaScript

1.数组去重
2.数组多层扁平化
3.深拷贝数组和对象
4.数组里面有 10 万个数据，取第 1 个数据与第 10 万个数据的时间相差多少？
5.数组的 map 和 forEach 有什么区别？
6.Fetch 与 XHR 的区别?
7.bind、call、apply 的区别?
8.如何检测变量的类型(尽可能多，描述可能出现的问题)?
9.简述一下原型链
10.使用过 ES6 吗？你常用的有哪一些？
11.简述一下 Promise 的特点
12.Promise 怎么做异常处理?
13.Promise 串联加载?
14.Promise 并行加载?
15.Promise 限流并发?
16.async/await?
17.一定要使用 async/await 吗，如果我不做异步处理，可能只是处理简单的关闭弹框不能用 Promise 吗?
18.事件循环 (event-loop)

计算题

1.按顺序写出程序的输出结果:

考察 this 问题

var length = 10;

function fn() { alert(this.length); }
var obj = {
  length: 5,
  callApi: function(fn) {
    fn();
    arguments[0]();
  }
}

obj.callApi(fn, 3)

2.列出下面代码的不足及优化方案

var node = document.querySelectorAll('ul');
for (var i = 0;i < node.length; i++) {
  node[i].addEventListener('click', function() {
    alert('click' + i);
  });
}

3.改造下面的代码，使之输出 0 ~ 9，写出你能想到的所有解法。

for (var i = 0;i < 10; i++) {
  setTimeout(() => {
    console.log(i)
  }, 1000);
}

4.请写出下面代码的运行结果

async function async1() {
 console.log("async1 start");
 await async2();
 console.log("async1 end");
}

async function async2() {
    console.log("async2");
}

console.log("script start");

setTimeout(() => {
    console.log('setTimeout');
}, 0);

async1();

new Promise((reslove) => {
    console.log("promise1");
    reslove();
}).then(() => {
    console.log("promise2");
})

console.log("script end");

概念类

1.什么是闭包？列举闭包的应用场景
2.什么是科里化？
3.节流与防抖
4.说说从浏览器地址栏输入 URL 到页面加载完的过程中都发生了什么事情?

TypeScript

1.为什么要引入 TypeScript，引入的好处是什么？

React

1.虚拟 dom 是如何提升性能的
2.React 通过什么方式来更新数据
3.React 不能直接修改 State 吗？
4.setState 是同步还是异步的？
5.React 生命周期
6.组件通信
7.简述一下 React.Context 怎么使用
8.函数组件是什么？
9.高阶函数、高阶组件
10.受控组件与非受控组件的区别
11.异步组件怎么使用？
12.怎么对组件的参数做类型约束呢？
13.组件设计原则
14.React 性能优化
15.父组件在执行 render 时会不会触发子组件的 render 事件？如果会该怎么避免？
16.有了解过 Portals 吗？
17.Hook 相比 class 的优点
18.自定义 Hook 约束
19.自定义 Hook 使用
20.redux 是什么？
21.redux 的三大原则是什么？
22.描述 redux 单向数据流

Vue

1.列举 Vue 的生命周期以及它们的应用场景
2.父组件和子组件生命周期钩子执行顺序是什么？
3.DOM 渲染在 Vue 的哪个生命周期就已经完成
4.v-for 遍历模板时为什么要用 key? key 有什么用？
5.v-if 与 v-show 有什么区别? 在什么场景下可以应用
6.组件通信
7.vue 的双向绑定原理是什么？
8.怎么在组件中实现 v-modal
9.vue router 的 beforeEach 和 afterEach 一般用法/使用场景?

webpack

1.module、chunk、bundle 分别是什么？
2.loader 和 plugin 有什么区别？有自己实现过吗？
3.除了做基础脚手架外，还用来做过什么?
4.webpack 实现懒加载
5.webpack 优化项
6.babel-runtime 和 babel-polyfill
7.什么是 Tree-Shaking

优化类

1.SPA（vue/react）如何优化首页的加载速度？首屏空白是什么问题引起的？
2.页面优化有哪些方案？

解决方案

1.列举移动端适配方案
2.怎么处理跨域？
3.Vue 与 React 的区别，怎么做技术选型？

HTTP

1.列举 HTTP 状态码以及它们的含义
2.有了解过 HTTP 缓存吗？

运维相关

1.了解过 docker 吗？
2.你们项目的 CI/CD 是怎么搭建的？
3.阿里云的 CDN 资源有缓存，如何强制更新缓存?
4.git 除了 pull 、 push 外还了解哪些命令？

其他

1.你哪些项目实现的比较满意？
2.你碰到最难的一个问题是什么？
3.是否写过测试用例
4.是否了解敏捷开发

目前只是整理了常见的题目