前端基础知识体系之专业知识篇

HTML与CSS

DOM元素相关的问题

DOM操作、事件冒泡/委托、虚拟DOM设计等

HTML

• DOM操作与性能问题，包括
  • DOM操作是否会带来性能操作
  • 页面需要渲染一万个DOM元素，如何提升页面性能
  • 页面需要操作一万个DOM元素，如何提升页面性能
• 事件冒泡和事件委托
  • 事件委托到父节点上或者document中，哪个更好
• 虚拟DOM的设计
  • 为什么要使用虚拟DOM
  • 为什么要使用javascript对象来描述DOM结构
  • 简单描述下虚拟DOM的实现原理

页面布局（考察点：居中对齐等）

• 页面布局原理
  • 我们常说的盒子模型是指什么
  • 什么是文档流
  • 浮动元素为什么无法撑开父元素？如何解决
• 常见页面布局的技巧
  • 元素居中布局的几种实现方式
  • 对flex布局，crid布局的理解和使用
• 浏览器的布局过程
  • 浏览器在进行页面布局过程中会做些什么
  • 重绘和重排会导致什么问题
  • css动画和javascript动画相比，有什么优缺点

HTML和CSS的知识基本上围绕着设计原理和运行机制来考察

javascript

考察范围	具体问题
javascript的原型和继承	如何理解javascript中的“一切皆对象” 如何创建一个对象 proto与prototype的区别
对单线程javascript的理解	单线程来源 web workers和 service workers的理解
异步事件机制	为什么使用异步事件机制 在实际使用中异步事件可能会导致什么问题 关于setTimeout和setInterval的时间精确性
作用域与闭包	请描述以下代码的执行输出内容（考察作用域） 什么场景需要使用闭包 闭包的缺陷
this与执行上下文	简单描述this在不通场景下的指向 apply/call/bind的使用 箭头函数与普通函数的区别
对eventloop的理解	介绍浏览器的eventloop 宏任务（Macrotask）和薇任务（Microtask）的区别 setTimeout、promise、async/await在不通浏览器的执行顺序

以写代码的形式来对javascript中一些知识点进行考察

• 手写到吗实现call/apply/bind
• javascript中0.1 + 0.2 为什么等于0.30000000000004,如何通过代码解决这个问题
• 手写代码实现promise
• 为什么要使用async、await
• 怎样让es6/es7代码可以泡在各个浏览器中（考察babel与polyfill）
• 介绍下set和map的数据结构
• javascript是怎么实现let和const作用域的

浏览器相关

考察内容	相关问题
浏览器的同源策略	“同源”指什么 那些行为收到同源策略的限制 常见的跨域方案有哪些
浏览器的缓存相关	web缓存通常包括哪些 浏览器什么情况下会使用本地缓存 强缓存和协商缓存的区别 强制ctrl+F5刷新会发生什么 session、cookie、token及storage的区别
浏览器加载顺序	为什么我们通常将javascript放在的最后面 为什么我们将css放在里
浏览器的渲染原理	HTML/CSS/JS的解析过程 渲染树是怎样生成的 重排和重绘是怎样的过程 日常开发红要注意那些渲染性能问题
浏览器事件	浏览器中包括哪些事件 在浏览器中，是如何处理用户的交互的 对事件进行监听的回调函数，会在什么被执行

node.js相关

node.js

• node.js模块与api
  • node.js有哪些定时功能
  • process.nextTick和setlmmediate的区别
  • node.js中的异步和同步怎么理解，异步流程如何控制
  • 简单介绍一下node.js中的核心内置类库（事件、流、文件、网络等）
• 用作服务端的node.js
  • node.js有哪些特点，单线程的优势和缺点是什么
  • 如何用node.js来监听80端口
  • express是如何从一个中间件执行到下一个中间件的
  • express、koa、egg之间的区别
  • rest api 有使用过吗，介绍一下

网络相关

网络（问题点：一个完整的http请求过程）

• 域名解析（此处设计DNS的寻址过程）
• tcp连接请求
  • tcp的三次握手过程
  • 为什么tcp连接握手需要三次通信，挥手却需要四次
• 建立tcp连接后发起http请求
• 服务器响应http请求

网络请求存在各式各样的情况，比如使用缓存，建立websocket，短轮询与长轮询，获取用户登录状态等，这些内容都会直接与http协议相关

http协议

• http消息的结构
  • request请求
  • response响应
  • 常见的http状态码
  • http请求方法
  • 使用put、delete等方法时为什么有时候在浏览器看到两次请求（涉及cros中的简单请求和复杂请求）
• http请求的应用场景
  • 浏览器是如何控制缓存的：响应的头信息，状态码
  • websocket与http请求的区别
  • 如何对请求进行抓包和改造
  • 网络请求的优化方法
• http的更新迭代
  • https与http的区别
  • http/2、http/3分别做了怎样的设计调整

网络请求的优化方案

• 缓存的使用
• 减少资源大小（分片、压缩、懒加载、预加载）
• 减少每个环节的耗时（DNS查询，使用CDN）
• 使用HTTP/2等

安全相关

web安全

• 前端安全
  • 前端安全中，需要注意有哪些问题
  • xss/csrf是怎样的攻击过程，要怎么防范
  • 除了xss和csrf，你还了解哪些网络安全相关的问题呢
• 其他web安全
  • sql注入、命令行注入是怎样进行的
  • DDOS攻击是什么
  • 流量劫持包括哪些内容

算法与数据结构

对于前端来说，大多数工作都不会涉及算法相关，但在一些场景下我们可以使用它们设计出更好的数据结构和计算方式

算法与数据结构

• 算法相关
  • 各种排序算法、稳定排序与原地排序、javascript中的sort使用的是什么排序
  • 查找算法（顺序、二分法查找）
  • 递归、分治的理解与应用
  • 动态规划
• 常见的数据结构
  • 链表与数组
  • 栈与队列
  • 二叉树、平衡树、红黑树等

较大型的前端应用领域

vsc中对于文本缓冲区的性能优化过程中重构了数据结构，其中就有用到红黑树

计算机通用知识

计算机通用知识

• 计算机资源
  • 理解计算机资源、认识进程与线程（单线程、单进程、多线程、多进程）
  • 进程间通信（ipc）常包括哪些方式，进程间同步机制又包括哪些方式
  • 了解阻塞与非阻塞、同步与异步任务等
  • socket与网络进程通信是怎样的关系、socket连接过程是怎样的
• 编程与设计模式
  • 常见的设计模式有哪些
  • 列举实际使用过得一些设计模式
  • 如何理解面向对象编程

以实战来学习java，希望每个从我这边都有收获，有需要的同学加扣扣群：646410846，一起学习，共同进步~