乐趣区

关于前端:202009-中高级前端面试题

jiezi

最近因为公司的策略调整与职业倒退的缘故来到了老东家，期间变成了求职者的角色，也做了半个月的面试官。当初曾经从面试官的职务抽离了进去，故来分享一下 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. 是否理解麻利开发
    • *

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

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

退出移动版