面向应届生的前端面试知识点梳理

开始之前

这篇内容采集于2018年秋招的牛客网前端面经，前端技术更替较快，文中部分内容可能已经过时。

我将收集来的知识点进行了相应的分类，包括 HTML、CSS、JavaScript、计算机网络、数据结构与算法、前端框架等模块。

前端知识的学习并非一蹴而就，源于自己对前端的喜爱并在平时不断地积累。个人不赞成通过背面经临阵磨枪成为面霸拿到大厂 offer。本文罗列的知识点是供自己巩固基础、查漏补缺的清单，希望在复习前端准备面试的过程中自己有所提升，少一分应试多一分沉淀，这是留下该清单的初衷。

JavaScript

1. 正则表达式

2. 闭包

   • 闭包是指那些能够访问自由变量的函数（MDN）
   • 原理
   • 面试题

3. 原型链

   • 原型到原型链

   • 原型继承

   • 

   • why-foo-tostring-is-not-the-same-as-tostring.callfoo

4. DOM API

   • createElement, removeChild, replaceChild, getElementById | getElementsByName | getElementsByTagName | getElementsByClassName | querySelector | querySelectorsAll
   • children, childElementCount, firstElementChild, lastElementChild, nextElementSibling, previousElementSibling
   • childNodes, childNodes.length, firstChild, lastChild, nextSibling, previousSibling
   • what-is-the-difference-between-children-and-childnodes-in-javascript

5. new 操作符

   • MDN
   • When the code new Foo(...) is executed, the following things happen:
     1. A new object is created, inheriting from Foo.prototype.
     2. The constructor function Foo is called with the specified arguments, and with this bound to the newly created object. new Foo is equivalent to new Foo(), i.e. if no argument list is specified, Foo is called without arguments.
     3. The object (not null, false, 3.1415 or other primitive types) returned by the constructor function becomes the result of the whole new expression. If the constructor function doesn't explicitly return an object, the object created in step 1 is used instead. (Normally constructors don't return a value, but they can choose to do so if they want to override the normal object creation process.)

6. 实现深克隆

function clone(obj) {
  if (obj === null || typeof (obj) !== 'object' || 'isActiveClone' in obj) {
    return obj;
  }

  if (obj instanceof Date) {
    var temp = new obj.constructor(); //or new Date(obj);
  } else {
    var temp = obj.constructor();
  }

  for (var key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      obj['isActiveClone'] = null;
      temp[key] = clone(obj[key]);
      delete obj['isActiveClone'];
    }
  }
  return temp;
}

7. this

   • 参考《You Don't Know JS》
   • this 是在函数被调用时绑定的，它的指向取决于函数的调用方式
   • 优先级：new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定

8. 垃圾回收

   • 内存管理
   • 引用计数的缺点是无法处理循环引用，标记-清除算法解决了这个问题，现代浏览器的垃圾回收算法都是基于标记-清除

9. 数组去重

10. Array.prototype.sort() 底层排序方式

    • Quicksort is generally considered to be efficient and fast and so is used by V8 as the implementation for Array.prototype.sort() on arrays with more than 23 items. For less than 23 items, V8 uses insertion sort. Merge sort is a competitor of quicksort as it is also efficient and fast but has the added benefit of being stable. This is why Mozilla and Safari use it for their implementation of Array.prototype.sort().
    • javascript Array.prototype.sort 排序浅谈

11. Fetch API

    • response 是流对象：fetch(url).then(res => res.json())
    • 只会在只会在网络错误的情况下（比如 IP 地址无法解析，服务器不可访问或是不允许 CORS）reject 这个 promise。404或500时不会
    • 默认不带 cookie，默认不开 CORS，需要添加配置项
    • 使用 AbortController 取消请求
    • 不支持进度

12. ES2018

    • Exploring ES2018 and ES2019
    • [译] ES2018（ES9）的新特性

13. Promise

    • promise + xhr
    • 手写 Promise

14. 防抖与节流

    • 防抖
    • 节流
    • 我的实现

CSS

1. 伪类和伪元素

2. 选择器优先级

   • 内联样式 1,0,0,0
   • ID 0,1,0,0
   • 类、属性选择、伪类 0,0,1,0
   • 元素、伪元素 0,0,0,1
   • 结合符（>,+）、通配选择器 0,0,0,0
   • 继承的值没有特殊性，会被上面的覆盖
   • 读者重要 > 代码重要 > 代码正常 > 读者正常 > 用户代理
   • LVHA

3. position 四种定位以及区别

   • mdn

4. 盒子模型

   • box-sizing: content-box;
   • box-sizing: border-box;
   • 见《精通CSS》

5. 两栏布局

   • 若左固定宽度：float + margin; margin + float
   • 若左不定宽度：float + float; float + BFC; flex

6. BFC

   • 可以用来清除浮动
   • 可以用来避免外边距合并
   • 可以用于两栏布局
   • 这是个 demo

7. clearfix

   • 创建一个额外的 clear: both 元素
   • BFC
   • 伪元素实现，思路同1

8. 外边距合并 margin collapsing

   • 相邻元素之间
   • 父元素与其第一个或最后一个子元素之间
   • 空的块级元素

9. 三栏布局

10. 行内元素和块元素区别

    • block, inline和inline-block概念和区别

11. 适配问题（媒体轮询，rem）

12. 动画

13. 重排和重绘

    • 参考《高性能JavaScript》P50
    • 重排发生于 DOM 元素的增删；元素尺寸或位置的改变；浏览器窗口尺寸的改变
    • 重绘发生于元素可视化属性的改变
    • 批量修改 DOM 以避免多次重排：隐藏，修改，显示；document.createDocumentFragment()；拷贝需要修改的元素并修改副本，然后替换原元素
    • 绝对定位让动画元素脱离文档流

14. 可替换元素

15. 水平、垂直居中

    • CSS实现水平垂直居中的1010种方式
    • 如何居中一个元素（终结版）

16. calc

17. vertical-align

    • Vertical-Align: All You Need To Know
    • mdn

18. opacity: 0; vs visibility: hidden; vs display: none;

    • stackoverflow

19. z-index

    • stack context
    • CSS3 Transform 引起的 z-index "失效"

HTML

1. 冒泡、捕获

   • 详见红宝书第13章事件
   • e.target is what triggers the event dispatcher to trigger and e.currentTarget is what you assigned your listener to.

2. HTML的语义化

3. web worker

   • 应对计算密集型场景

4. SPA的SEO怎么优化

   • <meta name="keywords">, <meta name="description">, <title>
   • sitemap
   • SSR

5. window.requestAnimationFrame

6. defer, async

   • defer和async的区别
   • 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。另一个不同的事件 load 应该仅用于检测一个完全加载的页面。

7. 谈谈移动端的click300ms延迟和点透问题

8. event loop

   • Tasks, microtasks, queues and schedules
   • 浏览器和NodeJS中不同的Event Loop

9. 跨页面通信

Web

1. CSRF

   • 前端安全系列之二：如何防止CSRF攻击？

2. XSS

   • 前端安全系列（一）：如何防止XSS攻击？

3. web缓存机制

   • 一文读懂前端缓存
   • 上文备份

4. Websocket

   • MDN
   • 握手（HTTP）+数据传输，详见《深入浅出nodejs》p164

5. 跨域

   • 浏览器的同源策略
   • 跨域资源共享 CORS 详解

6. 输入一个网址到显示的总过程

   • 在浏览器地址栏输入一个URL后回车，背后会进行哪些技术步骤？
   • 浏览器细节参考《现代前端技术解析》p10
   • 计网细节参考《网络是怎样连接的》
   • DOM CSSOM
   • 渲染树构建、布局及绘制

7. PWA

8. 点击劫持

常用设计模式

todo

前端框架

React

参考《深入react技术栈》

1. virtual dom

2. Dom diff

   1. 生成 js dom
   2. 对新旧树进行深度优先遍历并记录
   3. 基于策略:
      • DOM节点跨层级移动少
      • 相同组件会生成相似的树形结构
      • 同层级子节点用 key 进行区别
   4. 判断树节点是否相同
   5. 判断列表，lastIndex记录访问过的节点在旧集合中最右的位置。（移动，删除，新增）
   6. 对DOM树进行深度优先遍历，apply patch

3. 生命周期

   • react-component
   • react-lifecycle-methods-diagram
   • How can we fetch data async in reaction to props changes with getDerivedStateFromProps?
   • 关于React v16.3 新生命周期

Vue

1. 生命周期

2. 双向绑定

   • 观察者模式
   • Object.defineProperty() or Proxy
   • 实现

3. vue源码解读

webpack

1. 原理

babel

1. 编写插件

计算机网络

1. DNS

   • 全方位认识DNS
   • DNS递归/迭代
   • 什么情况下DNS会使用TCP传输协议？

2. TCP

   • 三握四断
   • 为什么TCP4次挥手时等待为2MSL
   • 拥塞控制：先慢启动，拥塞窗口指数增长直至超时，这时设置慢启动阈值为超时时窗口大小的一半；下次慢启动到阈值之后，窗口线型增长直至超时；重复第二步。
   • 超时重传
   • 可靠机制：序号+确认号
   • 滑动窗口
   • 对 MSS 进行拆分

3. UDP

   • 无连接
   • 不可靠（不保证有序，不保证无丢失）
   • 高效

4. HTTPS

   • 基于TLS的混合加密+CA
   • TLS1.2 握手 （《图解http》也有讲）

5. HTTP/2

   • google developers
   • 基于应用层与传输层之间的二进制分帧
   • 多路复用（解决 HTTP队头阻塞）
   • 并行双向字节流
   • 首部压缩
   • 服务端推送

6. HTTP/3

   • HTTP/3详解

7. HTTP Status Codes

数据结构及算法

参考 javascript-algorithms

排序

排序算法

我的实现js版

1. quick sort

   • 阮老师讲解
     1. 在数据集之中，选择一个元素作为"基准"（pivot）。
     2. 所有小于"基准"的元素，都移到"基准"的左边；所有大于"基准"的元素，都移到"基准"的右边。
     3. 对"基准"左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。

2. merge sort

3. insertion, selection sort

4. bubble sort

5. heap sort

leetcode 刷题

1. 贪心算法
2. 动态规划
3. 回溯

参考

1. 前端面试之道
2. 写给前端面试者