前端基础

• 前端开发模式的演变

    -------      ----------     -------     --------     --------     -----------
    静态页面 -->  后端动态页面 --> 后端 MVC --> 前后端分离 --> MV* 架构 --> Virtual DOM
    -------      ----------     -------     --------     --------     -----------

• 浏览器组成及渲染原理

    ---------------     --------     --------    ----------    
    解析HTML 构建DOM --> 构建渲染树 --> 渲染树布局 --> 绘制渲染树
    ---------------     --------     --------    ----------   

• 浏览器缓存技术

st=>start: 浏览器请求
e=>end: 浏览器渲染
op1=>operation: 有缓存
op2=>operation: 从缓存读取(from cache)
op3=>operation: 带If-None-Match向web服务器请求
op4=>operation: 带If-Modified-Since向服务器请求
op5=>operation: 向服务器请求
op6=>operation: 从缓存读取
op7=>operation: 请求响应

cond1=>condition: Cache-Control是否过期?
cond2=>condition: 判断是否有 Last-Modified
cond3=>condition: 判断是否有 Etag?
cond4=>condition: 服务器判断是200?


st->op1->cond1
cond1(no)->op2
op2->e

cond1(yes)->cond3
cond3(no)->cond2
cond2(no)->op5
op5->op7
op7->e

cond3(yes)->op3
op3->cond4
cond4(no)->op6
cond4(yes)->op7
op6->e

op4->cond4

cond2(yes)->op4

op7=>e

前端协议

• HTTP 协议 + Web 安全

• 前端实时协议

• REST数据协议

• Native 交互协议

前端三层结构

• 结构层基础与演讲

• 脚本层演进历史

• ES5、ES6、ES7+、TypeScript

• 表现层基础与预编译

• 响应式网站开发

主流交互框架

• DOM操作

• MV* 交互模式

• Virtual DOM

• Angular、Vue、React

跨端实现

• NodeJS后端实现

• Hybrid 跨终端实现

性能优化

• 性能测试

• 性能优化策略

前端用户数据分析

• 访问统计

• 行为分析

• 前端日志上传

• 性能分析上报

未来

• 前端VR