现代前端技术解析

前端技术发展日新月异，而且涉及的知识面极为广泛，本书以现代前端技术为背景，结合典型易懂的示例，从前端的三层结构发展、现代前端技术、前端工程化、前端框架演进、前端工业化、前端数据分析、前端跨端和未来前端等多个方面详细介绍了前端各项技术的发展、演进和实现原理，涵盖了目前主流框架设计知识与项目工程实践思路的讲解，同时也包括了最新的前端开发标准和未来的前端趋势分析，提出了前端效率和质量是一切技术的发展核心的观点。除了技术上的讲解剖析，作者也结合自己的实际项目工作经历描述了成为一名优秀的前端工程师应该具备的能力和素质。

这是一本以现代前端技术思想与理论为主要内容的书。前端技术发展迅速，涉及的技术点很多，我们往往需要阅读很多书籍才能理解前端技术的知识体系。这本书在前端知识体系上做了很好的总结和梳理，涵盖了现代前端技术绝大部分的知识内容，起到一个启蒙作用，能帮助读者快速把握前端技术的整个脉络，培养更完善的体系化思维，掌握更多灵活的前端代码架构方法，使读者获得成为高级前端工程师或架构师所必须具备的思维和能力。

张成文，毕业于华中科技大学，硕士学历。2014.7-2016.5，腾讯深圳科技网络社交事业群前端工程师。2016.5-至今，武汉校导科技前端组负责人。

第1章 Web前端技术基础 1 1.1 现代Web前端技术发展概述 1 1.1.1 现代Web前端技术应用 1 1.1.2 现代Web前端技术概述 4 1.1.3 Web前端技术发展 6 1.2 浏览器应用基础 10 1.2.1 浏览器组成结构 10 1.2.2 浏览器渲染引擎简介 12 1.2.3 浏览器数据持久化存储技术 20 1.3 前端高效开发技术 34 1.3.1 前端高效开发工具 34 1.3.2 前端高效调试工具 36 1.4 本章小结 42 第2章 前端与协议 43 2.1 HTTP协议简介 43 2.1.1 HTTP协议概述 43 2.1.2 HTTP 1.1 45 2.1.3 HTTP 2 51 2.2 web安全机制 53 2.2.1 基础安全知识 53 2.2.2 请求劫持与HTTPS 57 2.2.3 HTTPS协议通信过程 59 2.2.4 HTTPS协议解析 61 2.2.5 浏览器Web安全控制 63 2.3 前端实时协议 64 2.3.1 WebSocket通信机制 65 2.3.2 Poll和Long-poll 66 2.3.3 前端DDP协议 70 2.4 RESTful数据协议规范 71 2.5 与Native交互协议 73 2.5.1 Hybrid App应用概述 74 2.5.2 Web到Native协议调用 74 2.5.3 Native到Web协议调用 77 2.5.4 JSBridge设计规范 78 2.6 本章小结 81 第3章 前端三层结构与应用 82 3.1 HTML结构层基础 83 3.1.1 必须要知道的DOCTYPE 83 3.1.2 Web语义化标签 84 3.1.3 HTML糟糕的部分 87 3.1.4 AMP HTML 90 3.2 前端结构层演进 94 3.2.1 XML与HTML简述 94 3.2.2 HTML5标准 95 3.2.3 HTML Web Component 96 3.3 浏览器脚本演进历史 102 3.3.1 CoffeeScript时代 103 3.3.2 ECMAScript标准概述 105 3.3.3 TypeScript概况 105 3.3.4 JavaScript衍生脚本 106 3.4 JavaScript标准实践 107 3.4.1 ECMAScript 5 107 3.4.2 ECMAScript 6 113 3.4.3 ECMAScript 7+ 128 3.4.4 TypeScript 130 3.5 前端表现层基础 131 3.5.1 CSS发展概述 131 3.5.2 CSS选择器与属性 132 3.5.3 简单的应用举例 133 3.6 前端界面技术 135 3.6.1 CSS样式统一化 136 3.6.2 CSS预处理 138 3.6.3 表现层动画实现 141 3.6.4 CSS4与展望 149 3.7 响应式网站开发技术 149 3.7.1 响应式页面实现概述 149 3.7.2 结构层响应式 152 3.7.3 表现层响应式 160 3.7.4 行为层响应式 166 3.8 本章小结 167 第4章 现代前端交互框架 168 4.1 直接DOM操作时代 168 4.2 MV*交互模式 176 4.2.1 前端MVC模式 176 4.2.2 前端MVP模式 180 4.2.3 前端MVVM模式 181 4.2.4 数据变更检测示例 185 4.3 Virtual DOM交互模式 193 4.3.1 Virtual DOM设计理念 193 4.3.2 Virtual DOM的核心实现 196 4.4 前端MNV*时代 200 4.4.1 MNV*模式简介 201 4.4.2 MNV*模式实现原理 201 4.5 本章小结 203 第5章 前端项目与技术实践 204 5.1 前端开发规范 204 5.1.1 前端通用规范 205 5.1.2 前端HTML规范 208 5.1.3 前端CSS规范 212 5.1.4 ECMAScript 5常用规范 218 5.1.5 ECMAScript 6+ 参考规范 222 5.1.6 前端防御性编程规范 227 5.2 前端组件规范 229 5.2.1 UI组件规范 230 5.2.2 模块化规范 233 5.2.3 项目组件化设计规范 237 5.3 自动化构建 242 5.3.1 自动化构建的目的 243 5.3.2 自动化构建原理 243 5.3.3 构建工具设计的问题 246 5.4 前端性能优化 248 5.4.1 前端性能测试 248 5.4.2 桌面浏览器前端优化策略 253 5.4.3 移动端浏览器前端优化策略 258 5.5 前端用户数据分析 266 5.5.1 用户访问统计 266 5.5.2 用户行为分析 267 5.5.3 前端日志上报 270 5.5.4 前端性能分析上报 275 5.6 前端搜索引擎优化基础 275 5.6.1 title、keywords、description的优化 275 5.6.2 语义化标签的优化 277 5.6.3 URL规范化 278 5.6.4 robots 279 5.6.5 sitemap 279 5.7 前端协作 280 5.7.1 沟通能力和沟通技巧 280 5.7.2 与产品经理的“对抗” 281 5.7.3 与后台工程师的合作 281 5.7.4 与运维工程师的“周旋” 282 5.7.5 对前端团队的支持 282 5.8 本章小结 283 第6章 前端跨栈技术 284 6.1 JavaScript跨后端实现技术 284 6.1.1 Node后端开发基础概述 285 6.1.2 早期MEAN简介 288 6.1.3 Node后端数据渲染 289 6.1.4 前后端同构概述 290 6.1.5 前后端同构实现原理 291 6.2 跨终端设计与实现 297 6.2.1 Hybrid技术趋势 297 6.2.2 Hybrid实现方式 299 6.2.3 基于localStorage的资源离线和更新技术 301 6.2.4 基于Native与Web的资源离线和更新技术 308 6.2.5 资源覆盖率统计 310 6.2.6 仍需要注意的问题 311 6.3 本章小结 312 第7章 未来前端时代 313 7.1 未来前端趋势 314 7.1.1 新标准的进化与稳定 314 7.1.2 应用开发技术趋于稳定并将等待下一次革新 314 7.1.3 持续不断的技术工具探索 315 7.1.4 浏览器平台新特性的应用 315 7.1.5 更优化的前端技术开发生态 315 7.1.6 前端新领域的出现 316 7.2 做一名优秀的前端工程师 318 7.2.1 学会高效沟通 318 7.2.2 使用高效的开发工具 319 7.2.3 处理问题方法论 319 7.2.4 学会前端项目开发流程设计 320 7.2.5 持续的知识和经验积累管理 321 7.2.6 切忌过分追求技术 321 7.2.7 必要的产品设计思维 322 7.3 本章小结 323