共计 2408 个字符,预计需要花费 7 分钟才能阅读完成。
最近因为公司的策略调整与职业倒退的缘故来到了老东家,期间变成了求职者的角色,也做了半个月的面试官。当初曾经从面试官的职务抽离了进去,故来分享一下 2020 中高级前端工程师常见的面试题。
面试前的筹备
- 中 / 英文自我介绍
- 到职的起因
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)
计算题
-
按程序写出程序的输入后果:
考查 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,写出你能想到的所有解法。
for (var i = 0;i < 10; i++) {setTimeout(() => {console.log(i) }, 1000); }
-
请写出上面代码的运行后果
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 储存库的更新,后续也会陆续同步到此处上~
如果有同学感兴趣的话,后续还能够分享一些面试的心得,以及做面试官时察看到的一些问题。最初心愿大家能在“金九银十”的求职季中找到称心的工作~
正文完