现代前端技术解析

[rogerxu]

现代前端技术解析 (豆瓣)

• [x] 第1章 Web前端技术基础
  • [x] 1.1 现代Web前端技术发展概述
  • [x] 1.1.1 现代Web前端技术应用
  • [x] 1.1.2 现代Web前端技术概述
  • [x] 1.1.3 Web前端技术发展
  • [x] 1.2 浏览器应用基础
  • [x] 1.2.1 浏览器组成结构
  • [x] 1.2.2 浏览器渲染引擎简介
  • [x] 1.2.3 浏览器数据持久化存储技术
  • [x] 1.3 前端高效开发技术
  • [x] 1.3.1 前端高效开发工具
  • [x] 1.3.2 前端高效调试工具
  • [x] 1.4 本章小结
• [x] 第2章 前端与协议
  • [x] 2.1 HTTP协议简介
  • [x] 2.1.1 HTTP协议概述
  • [x] 2.1.2 HTTP 1.1
  • [x] 2.1.3 HTTP 2
  • [x] 2.2 web安全机制
  • [x] 2.2.1 基础安全知识
  • [x] 2.2.2 请求劫持与HTTPS
  • [x] 2.2.3 HTTPS协议通信过程
  • [x] 2.2.4 HTTPS协议解析
  • [x] 2.2.5 浏览器Web安全控制
  • [x] 2.3 前端实时协议
  • [x] 2.3.1 WebSocket通信机制
  • [x] 2.3.2 Poll和Long-poll
  • [x] 2.3.3 前端DDP协议
  • [x] 2.4 RESTful数据协议规范
  • [x] 2.5 与Native交互协议
  • [x] 2.5.1 Hybrid App应用概述
  • [x] 2.5.2 Web到Native协议调用
  • [x] 2.5.3 Native到Web协议调用
  • [x] 2.5.4 JSBridge设计规范
  • [x] 2.6 本章小结
• [x] 第3章 前端三层结构与应用
  • [x] 3.1 HTML结构层基础
  • [x] 3.1.1 必须要知道的DOCTYPE
  • [x] 3.1.2 Web语义化标签
  • [x] 3.1.3 HTML糟糕的部分
  • [x] 3.1.4 AMP HTML
  • [x] 3.2 前端结构层演进
  • [x] 3.2.1 XML与HTML简述
  • [x] 3.2.2 HTML5标准
  • [x] 3.2.3 HTML Web Component
  • [x] 3.3 浏览器脚本演进历史
  • [x] 3.3.1 CoffeeScript时代
  • [x] 3.3.2 ECMAScript标准概述
  • [x] 3.3.3 TypeScript概况
  • [x] 3.3.4 JavaScript衍生脚本
  • [x] 3.4 JavaScript标准实践
  • [x] 3.4.1 ECMAScript 5
  • [x] 3.4.2 ECMAScript 6
  • [x] 3.4.3 ECMAScript 7+
  • [x] 3.4.4 TypeScript
  • [x] 3.5 前端表现层基础
  • [x] 3.5.1 CSS发展概述
  • [x] 3.5.2 CSS选择器与属性
  • [x] 3.5.3 简单的应用举例
  • [x] 3.6 前端界面技术
  • [x] 3.6.1 CSS样式统一化
  • [x] 3.6.2 CSS预处理
  • [x] 3.6.3 表现层动画实现
  • [x] 3.6.4 CSS4与展望
  • [x] 3.7 响应式网站开发技术
  • [x] 3.7.1 响应式页面实现概述
  • [x] 3.7.2 结构层响应式
  • [x] 3.7.3 表现层响应式
  • [x] 3.7.4 行为层响应式
  • [x] 3.8 本章小结
• [x] 第4章 现代前端交互框架
  • [x] 4.1 直接DOM操作时代
  • [x] 4.2 MV*交互模式
  • [x] 4.2.1 前端MVC模式
  • [x] 4.2.2 前端MVP模式
  • [x] 4.2.3 前端MVVM模式
  • [x] 4.2.4 数据变更检测示例
  • [x] 4.3 Virtual DOM交互模式
  • [x] 4.3.1 Virtual DOM设计理念
  • [x] 4.3.2 Virtual DOM的核心实现
  • [x] 4.4 前端MNV*时代
  • [x] 4.4.1 MNV*模式简介
  • [x] 4.4.2 MNV*模式实现原理
  • [x] 4.5 本章小结
• [x] 第5章 前端项目与技术实践
  • [x] 5.1 前端开发规范
  • [x] 5.1.1 前端通用规范
  • [x] 5.1.2 前端HTML规范
  • [x] 5.1.3 前端CSS规范
  • [x] 5.1.4 ECMAScript 5常用规范
  • [x] 5.1.5 ECMAScript 6+ 参考规范
  • [x] 5.1.6 前端防御性编程规范
  • [x] 5.2 前端组件规范
  • [x] 5.2.1 UI组件规范
  • [x] 5.2.2 模块化规范
  • [x] 5.2.3 项目组件化设计规范
  • [x] 5.3 自动化构建
  • [x] 5.3.1 自动化构建的目的
  • [x] 5.3.2 自动化构建原理
  • [x] 5.3.3 构建工具设计的问题
  • [x] 5.4 前端性能优化
  • [x] 5.4.1 前端性能测试
  • [x] 5.4.2 桌面浏览器前端优化策略
  • [x] 5.4.3 移动端浏览器前端优化策略
  • [x] 5.5 前端用户数据分析
  • [x] 5.5.1 用户访问统计
  • [x] 5.5.2 用户行为分析
  • [x] 5.5.3 前端日志上报
  • [x] 5.5.4 前端性能分析上报
  • [x] 5.6 前端搜索引擎优化基础
  • [x] 5.6.1 title、keywords、description的优化
  • [x] 5.6.2 语义化标签的优化
  • [x] 5.6.3 URL规范化
  • [x] 5.6.4 robots
  • [x] 5.6.5 sitemap
  • [x] 5.7 前端协作
  • [x] 5.7.1 沟通能力和沟通技巧
  • [x] 5.7.2 与产品经理的“对抗”
  • [x] 5.7.3 与后台工程师的合作
  • [x] 5.7.4 与运维工程师的“周旋”
  • [x] 5.7.5 对前端团队的支持
  • [x] 5.8 本章小结
• [x] 第6章 前端跨栈技术
  • [x] 6.1 JavaScript跨后端实现技术
  • [x] 6.1.1 Node后端开发基础概述
  • [x] 6.1.2 早期MEAN简介
  • [x] 6.1.3 Node后端数据渲染
  • [x] 6.1.4 前后端同构概述
  • [x] 6.1.5 前后端同构实现原理
  • [x] 6.2 跨终端设计与实现
  • [x] 6.2.1 Hybrid技术趋势
  • [x] 6.2.2 Hybrid实现方式
  • [x] 6.2.3 基于localStorage的资源离线和更新技术
  • [x] 6.2.4 基于Native与Web的资源离线和更新技术
  • [x] 6.2.5 资源覆盖率统计
  • [x] 6.2.6 仍需要注意的问题
  • [x] 6.3 本章小结
• [x] 第7章 未来前端时代
  • [x] 7.1 未来前端趋势
  • [x] 7.1.1 新标准的进化与稳定
  • [x] 7.1.2 应用开发技术趋于稳定并将等待下一次革新
  • [x] 7.1.3 持续不断的技术工具探索
  • [x] 7.1.4 浏览器平台新特性的应用
  • [x] 7.1.5 更优化的前端技术开发生态
  • [x] 7.1.6 前端新领域的出现
  • [x] 7.2 做一名优秀的前端工程师
  • [x] 7.2.1 学会高效沟通
  • [x] 7.2.2 使用高效的开发工具
  • [x] 7.2.3 处理问题方法论
  • [x] 7.2.4 学会前端项目开发流程设计
  • [x] 7.2.5 持续的知识和经验积累管理
  • [x] 7.2.6 切忌过分追求技术
  • [x] 7.2.7 必要的产品设计思维
  • [x] 7.3 本章小结

[rogerxu]

与产品经理的沟通

• 需求是否明确。
• 技术方案是否可行，需求开发的难度评估
• 需求性价比是否高
  • 翻新架构才能完成的需求
• 需求是否合理。
• 风险管理。
  • 因为需求变更导致延期，询问是否接受

[rogerxu]

前端项目开发流程设计

• 项目基础工程
• 常用业务模块
• 开发流程的搭建能力

项目开发的codebase

• 前端框架选型
• 模块化方案
• 代码规范化
• 构建自动化
• 组建化目录设计
• 代码优化处理
• 数据统计
• 同构项目结构设计

[rogerxu]

浏览器数据持久化存储技术

• HTTP文件缓存
• localStorage
• sessionStorage
• Cookie
• WebSQL
• IndexDB
• Application Cache - 🚫 deprecated
• cacheStorage in ServiceWorker