Top X Front-end Interview Questions and Better Answers

开篇词

你如果细心的话(可以 fork)，发现这是依赖VuePress 搭建的知识文档。此仓库包含三个部分（视频+文档+案例代码）。为什么会有这个项目，是因为我觉得基于每个前端面试题目去看原理。这也许是破局的较好的方式。 我是小洋同学 目前就职于 xx 上市公司。不管是一年 或者三年 甚至校招。扪心自问，自己的知识体系是不是一碰就碎 异常的脆弱 建立自己的知识宇宙 本身就是一个相当漫长的过程。在这条路上 希望我们一起前行。这条战线是相当长的，需要我们阅读大量的优质经典纸质书 + 优秀电子书 源码 真题 面经 然后进行filter 并且需要我们甄别（有的伙伴甚至都完不成这个过程）

争做一个有主观见解的开发者而不是一个背面试题的机器。在内卷如此严重 焦虑各种贩卖的环境下 ，希望你保持乐观积极，不要落伍 吃老本就很可怕了

  • 在录制视频的时候，为了更好的演示案例代码，我想到的方式是起一个前端的静态服务然后读取SRC 下的代码案例

    // server.js
app.listen(2021, () => {
  console.log(`http://localhost:2021`)
})

  • 提供线上的文档 TOP-FE-IQA

    • 需要注意的是这份线上的文档目前是基于VuePress 可能更新不及时（酌情参考）
    • 线上文档后续会重构一版本
    • 我最近把一些 2020 年整理的注释了，等视频更新到了时候，就会放开

视频录制进度

如果你希望看视频版本的话，请点击下方的视频连接会跳转到对应的B 站的技能点讲解分享

前端不要玩那么花里胡哨的东西，你知道为啥浏览器 是我除了JS 最先录制的视频。你不掌握一切瞎扯淡！！那么浏览器的定位是什么，其实是JavaScript 的运行环境，那么和它同样角色的还有什么——NodeJS

如果说你让我推荐个当下最该学 最应该学的方向 我会毫无疑问提交你JavaScript 但是 JS语言层面的细节你真的都清晰 执行上下文？ 闭包？ 作用域？

为了能更好的索引 我会定时不定时的把我整理的文档放到下边，包括 HTML CSS JavaScript 等等 还有一些框架 工程化 ……

前端 coder 如何有序的进阶 ： 笔者认为 ： 你要掌握专业知识（HTML+ CSS + JavaScript + 浏览器）我们先重点看这部分。稍后可能才是能力进阶（所谓的框架原理 + 工程能力 + 开发技巧 + 思维） 最后你要能独立开发项目（出色的技术选型方案 + 项目设计 + 性能优化）

HTML

关于 HTML 很纯粹的话也没什么好考察的，多半是结合JS 这部分我会参考权威书籍以及 MDN 文档

  • HTML 头部高频面试题及参考答案

  • <script> 标签的async 与defer 有什么区别

  • DOMContentLoaded与load有什么不同呢

  • 谈谈你对同源策略的理解以及什么是CORS

  • JSONP的原理是什么

  • XHTML 与HTML 的区别

  • 有几种文档模式（文档类型）

  • DOM 操作能否带来性能问题

  • 页面渲染 1 万个 DOM 元素 如何提升页面性能

  • 事件委托到父节点或者document 中 哪个更好

  • 为什么需要虚拟DOM

  • 为什么要用JS 描述 DOM 结构

  • 简单描述虚拟 DOM 的实现原理

  • 事件类型

  • 说说DOM 中的事件流

  • Node 节点获取及增删查改

  • 讲讲事件冒泡和事件捕获

  • 什么是事件代理

  • 知道什么是事件委托吗

CSS

CSS 主要考察的大致两个方面 页面布局的原理 + 页面布局的技巧

  • 页面布局原理：盒子模型 + 文档流 + 浮动布局
  • 页面布局技巧： 传统布局 + Flex 布局 + Grid 布局

JavaScript 核心体系

JavaScript 高级进阶

异步专题

  • 同步编程和异步编程的区别在哪里？
  • JS 编程中为什么需要异步？
  • JS 异步编程方式发展历程
    • 常见的异步任务有哪些
  • 回调地狱缺点？有哪些方法可以解决？
  • Promise构造函数是同步还是异步执行
  • setTimeout,Promise,Async/Await 的区别
  • Promise 的缺点
  • Promise 内部究竟有几种状态？
  • Promise 是怎么解决回调地狱问题的？
  • Promise 到底解决了什么痛点？这样的痛点还可以如何解决
  • React中的setState是同步的还是异步的？什么时候同步什么时候异步?(实践题目)

JavaScript 手写实现/手写代码

浏览器

  • 为什么很多站点第二次打开速度会很快？
  • 什么是 DNS 缓存
  • 浏览器在进行页面布局过程中会做些什么
  • 重绘和重排会导致什么问题
  • 如何实现浏览器内多个标签页之间的通信?
  • 常见的浏览器兼容性问题 -本地存储 cookie 与 token
  • 了解 SameSite 属性吗

Node

  • 谈谈对RESTful 的理解

计算机网络

一名程序员，无论是应对日常开发、日常排查，还是解决突发的网络问题（网络调试、网络优化）都离不开计算机网络。而要想成为优秀的工程师、架构师，朝着更高阶、更高薪的岗位去晋升，补足编程必备基础知识——计算机网络是绕不过去的一关。

  • 当在网页浏览器的地址栏输入url后，发生了什么
  • 三次握手？TCP 为什么要 3 次握手？
  • HTTPS 协议的 TTFB 传输时间
  • HTTPS 链接的创建过程 以及为什么 HTTPS 就是安全的
  • 什么是长链接 为什么需要长链接
  • HTTP2 的信道复用为什么能提高性能
  • 浏览器输入 URL 后 HTTP 承担的角色是什么
  • URI URL URN 的区别
  • 收到 IP 数据包解析以后，它怎么知道这个分组应该投递到上层的哪一个协议（UDP 或 TCP）
  • 你怎么理解HTTP和TCP的关系
  • telnet 调试远程服务
  • 用 Whireshark抓包定位网络故障

算法与数据结构

  • 数据结构中稳定的排序算法 不稳定的排序算法
  • 时间复杂度 与空间复杂度代表什么

Webpack

  • 介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面的

  • 介绍webpack 的实现原理

  • Webpack 的 loader 和 plugins 的区别

  • 谈谈babel 的原理是什么

  • 你有使用过webpack 吗?简单说说你的看法

  • 你有没有脱离脚手架，从基本搭建一个工程化的项目？

  • webpack 的loader 与 plugin 有什么区别？谁先执行

  • 介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面的？说说其原理

  • 介绍webpack 的实现原理

  • webpack 打包react 项目怎么减少生成js 的大小

  • webpack 怎么处理模块化？模块化机制是怎么样的？

  • 你还了解其他的打包工具吗？比如 rollup、grunt、gulp 它们有什么异同点、优劣势

  • 有哪些常见的loader

  • 有哪些常见的Plugin

  • 简单说说 webpack 的构建流程是什么?

  • 是否写过 Loader 和 Plugin？描述一下编写 loader 或 plugin 的思路？

  • webpack怎么配置单页应用？怎么配置多页应用？

  • webpack的打包原理是怎么样的

  • 分别介绍 bundle chunk module是什么?

  • webpack中 babel 的原理以及实现

  • 代码分割的本质是什么？

Vue

讲道理，其实Vue 的官方文档写的真的非常好！！ 如果你什么都没开始，就一定把 Vue 的文档教程、以及 API 都好好研读研读 我是在看了Vue生态的 的文档（VueCLI VUE2 Vuex VueRouter VueLoader ）然后基于vue2的源码 给大家整理了如下的面试题目 绝对不是口水话 目前的状态是视频还没开始录制 文字版已经在写了 如下的链接还不能点 不过你可以看看都是有哪些 耳熟能详的问题 当然了这只是一小部分

React

  • 列表组件中的 key
  • 为什么使用框架而不是原生
  • 虚拟 DOM 的优劣如何
  • 虚拟 DOM 的实现原理
  • React 最新的生命周期是怎样的?
  • React 的请求应该放在哪个生命周期中?
  • Ajax 请求放在 componentDidMount 里进行处理还是放在componentWillMount 里进行处理比较合适？
  • react-router 里的 <Link> 标签和 <a> 标签有什么区别
  • react 与vue 的区别
  • React 高阶组件的作用有哪些
  • 简述下 flux 的思想
  • redux 的工作流程?
  • react-redux 是如何工作的?
  • redux 与 mobx 的区别?
  • redux 中如何进行异步操作?
  • React 组件通信如何实现?
  • React 如何进行组件/逻辑复用?
  • mixin、hoc、render props、react-hooks 的优劣如何？
  • 你是如何理解 fiber 的?
  • 有没有使用过 React Hooks？使用 React Hooks 的同时为什么需要使用高阶组件？
  • 受控组件以及非受控组件的区别
  • react-router 里的 <Link> 标签和 <a> 标签有什么区别

框架（宏观）

  • React 和 Vue 的区别？
  • 能对比一下 Create React App 和 Vue CLI 吗？
  • 了解 MVC / MVP / MVVM 的区别吗？

移动端

  • 触摸事件
  • 移动端的兼容问题
  • 移动端 300ms 延迟
  • 移动端 rem
  • 移动端 1px