前端入门应该知道的
删除线划掉的可以不掌握,Node 和浏览器原理部分可以不掌握,性能优化部分不要求列全,有自己的理解,知道有哪几个努力的方向即可
HTML
- defer & async
- Fetch API & 使用
- Localstorage & SessionStorage
- postMessage
- 自定义属性
data=*
- Document Type
- 转义 & 实体字符
- 语义化
requestAnimationFrameServiceWorker
CSS
- 盒模型 box-sizing
- 定位(static、relative、absolute、fixed、
sticky) - z-index(生效元素、父子 z-index 关系、相邻容器子元素 z-index 关系)
- 布局 & 居中(双栏布局、三栏布局、垂直居中、垂直对齐)
- 浮动 & 清理浮动
- media query
- flex 相关属性
- rem
- sass、less
建议看看 《CSS 世界》
JavaScript 基础
- ES6
- 数据类型
- 引用类型
- 原型链 & 继承
- this & 修改 this 指向(bind、箭头函数、apply、call)
- 事件 & 事件代理
- Ajax、jsonp
- 使用 Promise 改善异步代码
- 闭包
defineProperty & Proxy 作用TypeScript,TS 应用越来越广泛,有余力一定要学一下
Web 基础 & HTTP 协议
- cookie & session
- 本地 hosts 绑定
- User Agent
- MIME Type
- HTTP 状态码含义
- 客户端缓存
- 协商缓存
- GET、POST 协议区别、限制、语义
- 无状态是什么意思
- gzip 是做什么的
- XSS 与 CSRF
- 跨域及解决
Transfer-EncodingHTTPS 原理正向代理 & 反向代理含义
建议阅读《图解 HTTP》,只要从事 web 相关工作都应该了解 HTTP 协议
React
- 数据驱动 UI
- state & props 区别
- 生命周期、useEffect 第二个参数
- 常用 hook
- 父子组件通信
- Context & redux
- redux 发送异步请求
- ant design
- 性能优化
HOCsagadva
React 15 和 16 都应该学习
工程
- 语义化版本号
- package.json 常用字段(version、main、scripts、repository、dependencies,devDependencies)
- npm 常用命令(install、test、link、dev、build)
- webpack & babel(bundle、JSX、ES6、Sass)
- eslint 常见规则 & 错误解决办法
- git & commit 规范
- 非覆盖式发布(多版本发布)
- 简单的 linux 命令
性能优化
Performance API & Performance timeline- 针对浏览器渲染页面原理的 CSS、JavaScript 语法层面优化
- 针对 HTTP(2) 协议特性网络性能优化(合并资源、压缩、多个域名等)
- 用户体验层面性能优化(懒加载之类)
Node
- 单线程
- EventLoop
- Buffer & Stream
- pipe
- Koa、eggjs
浏览器工作原理
http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/