佐罗菌的小屋

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

September 12, 2019 • ☕️☕️☕️ 13 min read

开始之前

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

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

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

JavaScript

  1. 正则表达式

  2. 闭包

    • 闭包是指那些能够访问自由变量的函数(MDN)
    • 原理
    • 面试题
  3. 原型链

  1. 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
  2. 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.)
  3. 实现深克隆

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;
}
  1. this

    • 参考《You Don’t Know JS》
    • this 是在函数被调用时绑定的,它的指向取决于函数的调用方式
    • 优先级:new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定
  2. 垃圾回收

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

  4. 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 排序浅谈
  5. Fetch API

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

  7. Promise

  8. 防抖与节流

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 四种定位以及区别

  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. 行内元素和块元素区别

  11. 适配问题(媒体轮询,rem)

  12. 动画

  13. 重排和重绘

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

  15. 水平、垂直居中

  16. calc

  17. vertical-align

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

  19. 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

  9. 跨页面通信

Web

  1. CSRF

  2. XSS

  3. web缓存机制

  4. Websocket

    • MDN
    • 握手(HTTP)+数据传输,详见《深入浅出nodejs》p164
  5. 跨域

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

  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. 生命周期

Vue

  1. 生命周期

  2. 双向绑定

    • 观察者模式
    • Object.defineProperty() or Proxy
    • 实现
  3. vue源码解读

webpack

  1. 原理

babel

  1. 编写插件

计算机网络

  1. DNS

  2. TCP

  3. UDP

    • 无连接
    • 不可靠(不保证有序,不保证无丢失)
    • 高效
  4. HTTPS

  5. HTTP/2

  6. 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. 写给前端面试者