hawtim.github.io
hawtim.github.io copied to clipboard
hawtim
前端知识图谱概览
如何通过思维导图将零散的碎片知识系统化？
笔者最近的工作中，前端资源很紧缺，日常招人，领导希望我整理一些前端面试的知识点，方便有些时候可以直接由他去面试。
然后我开始用思维导图来整理，基本上是从 HTML CSS JavaScript 的顺序来写的，想到什么就补充点什么，以工作中使用到的知识点来看的话，一个下午就搞定写完了。
思前想后，应该可以更加系统全面的整合前端的知识体系，第一点是先整理出哪些主要的模块，比如一开始我定的就是前端三板斧 HTML CSS JS，第二点是是根据前面的主要模块，在每一块里面找到经典的面试题目，由点及面，由浅到深的学习相关的知识和内容。帮助我做到以下三点：
- 查漏补缺
- 重难点攻克
- 培养脑图思维
我认为的前端知识点包括下面这些大模块
- HTML
- CSS
- JavaScript
- 浏览器
- 新技术
- 工程化
- 数据结构与算法
- 编译原理
- 设计模式
- 手撕代码
- 前端框架
- 性能和安全
- 计算机网络
我用 xmind zen 来完成这个工作
- HTML
- meta 标签，有哪些属性? 能做什么？
- 如何适配 iphoneX 的刘海屏，如何获取
- audio / video / canvas / svg
- 语义化标签
- CSS
- display 有哪些属性， flex 布局 grid 布局
- animation 属性
- 两栏布局 / 三栏布局
- 水平垂直居中
- FC (BFC / IFC / FFC / GFC)
- 文档流的类型
- 选择器优先级计算
- 重绘和回流，CSS 和 JavaScript 的规避方案吗？
- 盒模型类型，特点
- BEM 命名方式
- CSS 模块化、scoped
- JS
- ES6 有哪些新特性
- 闭包是什么？
- this 的指向
- JavaScript 的事件循环机制
- web worker / service worker
- 封装 Ajax
- Promise 的理解
- setTimeout / setInterval
- 线程和进程的差异
- prototype 、 proto 、 constructor 的关系
- 什么是原型链
- JS 的模块化实现
- 数组有哪些方法
- 基本类型和引用数据类型有什么差异
- 为什么 typeof null === ’object‘
- Object.defineProperty
- 内存泄露是什么，什么原因，怎么处理
- 严格模式的差异
- JS 如何实现继承
- 浏览器缓存
- 强缓存、协商缓存的原理
- cookie、localStorage、sessionStorage
- 上线发版本如何解决缓存的问题
- 浏览器读取缓存的顺序
- 浏览器事件周期， domcontentloaded、load、beforeunload、unload、readyState
- 浏览器事件冒泡、捕获、阻止冒泡、阻止默认事件
- 什么是跨域，如何解决
- 浏览器兼容问题
- 浏览器下载文件的方法
- 新技术/实现相关
- webAssembly 和 JavaScript 有什么差别
- 小程序的生命周期
- WebGL
- webRTC
- web worker
- JSbridge
- 工程构建
- webpack 的 loader plugins
- webpack 热更新
- webpack 构建优化
- git stash/rebase/merge
- git hook 能做什么
- npm 和 yarn 有什么差异
- docker 是什么，为什么使用
- 代码校验 eslint stylelint
- 提交规范 commitzen
- 如何封装一个组件
- 数据结构与算法
- 基本数据结构 堆 栈 链表 队列 集合 字典 二叉树
- 排序算法： 快排、基线排序、冒泡
- 动态规划的套路
- 大O表示法
- 编译原理
- 分词、语法分析、生成 AST
- 应用
- 常见的设计模式
单例模式、原型模式、工厂模式、观察者模式、策略模式、代理模式、发布订阅模式
- 手撕代码
- 防抖节流
- 设计一个 ajax 库
- jsonp
- instanceOf
- 柯里化
- new 做了什么
- 浅拷贝
- 深拷贝
- 前端框架（Vue）
- Vue 生命周期有哪些，执行顺序，父子组件的执行的先后顺序
- 如何实现数据劫持
- $nextTick 这个 API 用来做什么，原理是什么
- computed 和 watch 的差异
- 数据响应后是如何更新视图的？
- vue 的 diff 算法是怎样？
- vue hook 是什么？
- 性能和安全
- XSS
- CSRF
- Cookie 安全
- HTTP 劫持
- 性能分析和监控
- 网络
- 网络模型 OSI 七层模型、五层模型、TCP/IP 四层模型
- tcp 三次握手、四次挥手
- HTTP1.0 / HTTP1.1 / HTTP2.0 / HTTP3.0
- 常见状态码
- nginx 负载均衡是什么原理
- CDN 的原理
- Https 的全过程
- DNS 的解析过程
- 浏览器运行机制，从输入 url 到页面展示内容过程中做了什么？
- 合成 URL
- 解析 URL， 生成 HTTP 消息
- 进入浏览器缓存阶段
- DNS 域名解析，找到服务器地址
- 将 HTTP 的传输工作委托给系统的协议栈
- 服务器处理请求的过程
- 浏览器处理响应
- 解析文档
- 生成渲染树
- 客户端绘制
- 加载并执行js脚本
以上内容肯定不是前端的全部，大概才20%，主要是认为这些问题比较大，水平的区分度比较强。
脑图还在持续优化中，后续开源。
