2020.09 中高级前端面试题

头像
anran758
    阅读 3 分钟
    35

    最近因为公司的战略调整与职业发展的缘故离开了老东家，期间变成了求职者的角色，也做了半个月的面试官。现在已经从面试官的职务抽离了出来，故来分享一下 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 单向数据流

    React 面试题详细答案解析:

    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 储存库的更新，后续也会陆续同步到此处上~

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

    前端javascriptvue.jsreact面试
    anran758
    1.6k 声望72 粉丝

    咸鱼前端工程师, 专注web领域的知识.

    « 上一篇
    webpack + Travis CI 自动部署项目应用
    下一篇 »
    React 知识回顾 (使用篇)

    引用和评论

    推荐阅读
    头像
    Promise 与异步编程

    anran758赞 3阅读 872

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.4k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    0 条评论
    得票最新