Web前端入门必看：前端入门应该知道的技术知识点

删除线划掉的可以不掌握，Node 和浏览器原理部分可以不掌握，性能优化部分不要求列全，有自己的理解，知道有哪几个努力的方向即可，下面和千锋广州小编一起来看看吧。

​

点击添加图片描述（最多60个字）
编辑

HTML

defer & async

Fetch API & 使用

Localstorage & SessionStorage

postMessage

自定义属性 data=*

Document Type

转义 & 实体字符

语义化

requestAnimationFrame

ServiceWorker

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-Encoding

HTTPS 原理

正向代理 & 反向代理含义

建议阅读《图解 HTTP》，只要从事 web 相关工作都应该了解 HTTP 协议

React

数据驱动 UI

state & props 区别

生命周期、useEffect 第二个参数

常用 hook

父子组件通信

Context & redux

redux 发送异步请求

ant design

性能优化

HOC

saga

dva

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/

前端技术的更新如此迅速，在这样的大环境下，前端工程师保持自学能力就显得尤其重要了。