2020.09 中高级前端面试题

时间 2020-12-01

标签 css html 前端 vue node react webpack git github web 栏目 CSS 繁體版

原文原文链接

最近由于公司的战略调整与职业发展的缘故离开了老东家，期间变成了求职者的角色，也作了半个月的面试官。如今已经从面试官的职务抽离了出来，故来分享一下 2020 中高级前端工程师常见的面试题。css

面试前的准备

中/英文自我介绍
离职的缘由

html

把带 css 连接的 <link> 标签放在 <head> 标签内，而带 js 连接的 <script> 标签尽可能靠近 </body>, 为何会有这种提议？若是必须不这样作，如何处理？

css

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

JavaScript

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

计算题

按顺序写出程序的输出结果:html

考察 this 问题

var length = 10;

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

obj.callApi(fn, 3)

列出下面代码的不足及优化方案前端

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

改造下面的代码，使之输出 0 ~ 9，写出你能想到的全部解法。vue
```
for (var i = 0;i < 10; i++) {
  setTimeout(() => {
    console.log(i)
  }, 1000);
}
```

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

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");

概念类

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

TypeScript

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

React

虚拟 dom 是如何提高性能的
React 经过什么方式来更新数据
React 不能直接修改 State 吗？
setState 是同步仍是异步的？
React 生命周期
组件通讯
简述一下 React.Context 怎么使用
函数组件是什么？
高阶函数、高阶组件
受控组件与非受控组件的区别
异步组件怎么使用？
怎么对组件的参数作类型约束呢？
组件设计原则
React 性能优化
父组件在执行 render 时会不会触发子组件的 render 事件？若是会该怎么避免？
有了解过 Portals 吗？
Hook 相比 class 的优势
自定义 Hook 约束
自定义 Hook 使用
redux 是什么？
redux 的三大原则是什么？
描述 redux 单向数据流

Vue

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

webpack

module、chunk、bundle 分别是什么？
loader 和 plugin 有什么区别？有本身实现过吗？
除了作基础脚手架外，还用来作过什么?
webpack 实现懒加载
webpack 优化项
babel-runtime 和 babel-polyfill
什么是 Tree-Shaking

优化类

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

解决方案

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

HTTP

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

运维相关

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

其余

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

目前只是整理了常见的题目，如今正在 front-end-lab 中持续更新: 2020 前端面试笔记，同窗们能够 watch 储存库的更新，后续也会陆续同步到此处上~react

若是有同窗感兴趣的话，后续还能够分享一些面试的心得，以及作面试官时观察到的一些问题。最后但愿你们能在“金九银十”的求职季中找到满意的工做~webpack