这是一套基本的由浅入深考察前端知识体系的清单, 自测用:

CSS

  • 什么是 CSS 盒模型

  • 标准模型和 IE 模型有什么不同

  • CSS 如何设置这两种模型

  • JS 如何设置获取盒模型对应的宽和高

  • 如何实现垂直居中

  • Flex 布局居中

  • BFC 的基本概念

  • BFC 的原理

  • 如何触发(消除) BFC

DOM 事件类

  • DOM 事件的级别了解吗

  • DOM 事件模型了解吗

  • DOM 事件流了解吗

  • 描述 DOM 事件捕获的具体流程

  • 讲一下事件委托(事件袋里)

  • 自定义事件了解吗

类型转换

  • 了解显式转换、隐式转换吗?

  • 了解显式转换的过程吗

HTTP 相关

  • HTTP 协议主要特点

  • HTTP 报文组成部分

请求报文: 请求行 请求头 空行 请求体
响应报文: 响应行 响应头 空行 响应体
  • HTTP 协议类: POST 和 GET 的区别

  • HTTP 状态码

  • 强缓存和协商缓存 资料

  • 持久连接

  • 管线化

原型链类

  • 创建对象有几种方法

  • 聊聊原型、构造函数、实例、原型链

  • instanceof 的原理了解吗

  • new 运算符的原理了解吗

const new2 = function(func) {
const o = Object.create(func.prototype)
const result = func.call(o)
if (typeof(result) === 'object') {
return result
} else {
return o
}
}

面向对象类

  • 如何进行类的声明

  • 如何生成实例

  • 如何实现继承

  • 各继承方式的优缺点

通信类

  • 什么是同源策略及限制

  • 如何创建 Ajax

const xhr = new XMLHttpRequest()
xhr.open('GET', '/api', false)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200 || xhr.status === 304) {
console.log(xhr.responseText)
}
}
}
xhr.send(null)
  • 跨域通信的几种方式

安全类

  • 了解 CSRF 吗 ? 如何防止 CSRF

  • 了解 XSS 吗 ? 如何防止 XSS

  • cookie 与 token 有什么区别

渲染机制类

  • 什么是 DOCTYPE 及作用

  • 浏览器解析和渲染过程

  • 重排 Reflow

  • 重绘 Repaint

运行机制类

  • 如何理解 JS 的单线程

没办法同时做两件事情

  • 什么是 Event Loop

页面性能类

  • 提升页面性能的方法有哪些