react 面试题高级_2020秋季中高级前端面试题

最新推荐文章于 2024-05-29 23:55:50 发布

Juice-emi

最新推荐文章于 2024-05-29 23:55:50 发布

阅读量1.6k

点赞数

文章标签： react 面试题高级

本文链接：https://blog.csdn.net/weixin_35892779/article/details/112227765

版权

这篇博客分享了2020年中高级前端工程师面试的常见问题，涵盖HTML、CSS、JavaScript、TypeScript、React、Vue、Webpack等技术领域。内容包括面试准备、技术概念、计算题、优化策略和解决方案，旨在帮助求职者充分准备前端面试。

摘要由CSDN通过智能技术生成

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

面试前的准备

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

HTML

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

css

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

已知设备 IPhone6, 写出 div 最后的 color、font-size 值:

<style>
 div { font-size: 1rem; color: blue; }
 .class1 { font-size: .32rem; color: red; }
 #id1 { color: #333; }
 #id1 div { color: #666; }
 .class1 div { color: #999; }
 .class1 .class2 div { color: #aaa; }
</style>

<div class="class1">
 <div id="id1" class="class2">
 <div>文字</div>
 </div>
</div>

JavaScript

数组去重
数组多层扁平化
深拷贝数组和对象
数组里面有 10 万个数据，取第 1 个数据与第 10 万个数据的时间相差多少？
数组的 map 和 forEach 有什么区别？
Fetch 与 XHR 的区别?
bind、call、apply的区别?
如何检测变量的类型(尽可能多，描述可能出现的问题)?
简述一下原型链
使用过 ES6 吗？你常用的有哪一些？
简述一下 Promise 的特点
Promise 怎么做异常处理?
Promise 串联加载?
Promise 并行加载?
Promise 限流并发? 假设我有 500 个请求，现在我想限制每次最多请求为 5 个。当其中一个请求完毕后再从剩余未发送的请求中继续发送，这种情况你要怎么实现？
async/await?
一定要使用 async/await 吗，如果我不做异步处理，可能只是处理简单的关闭弹框不能用 Promise 吗?(说出自己的看法)
事件循环 (event-loop)

计算题

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

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

概念类

什么是闭包？列举闭包的应用场景
什么是科里化？
节流与防抖
说说从浏览器地址栏输入 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 储存库的更新，后续也会陆续同步到知乎上~

如果有同学感兴趣的话，后续还可以分享一些面试的心得，以及做面试官时观察到的一些问题。最后希望大家能在“金九银十”的求职季中找到满意的工作~

Juice-emi

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
react 面试题高级_2020秋季中高级前端面试题

最近因为公司的战略调整与职业发展的缘故离开了老东家，期间变成了求职者的角色，也做了半个月的面试官。现在已经从面试官的职务抽离了出来，故来分享一下 2020 中高级前端工程师常见的面试题。面试前的准备中/英文自我介绍离职的原因HTML把带 css 链接的 <link> 标签放在 <head> 标签内，而带 js 链接的 <script> 标签尽量靠近 </b...
复制链接

扫一扫