作者：张成文
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
现代前端技术解析试读：
前言
欢迎阅读本书，本书是一本以现代前端技术思想与理论为主要内容的书。前端技术发展迅速，涉及的技术点很多，我们往往需要阅读很多本书籍才能理解前端技术的知识体系。这本书在前端知识体系上为大家做了很好的总结和梳理，涵盖了现代前端技术绝大部分的知识内容，包括前端技术基础、开发调试技术、前端相关协议、三层结构演进与实践、响应式网站、页面交互框架、大型项目实践经验、跨栈开发实践等，这些都能使大家获得成为高级前端工程师或架构师所必须具备的思维和能力。目标读者
本书主要面向各类前端工程师。
初中级前端工程师们可以通过本书快速地领略到前端领域的深度和广度，把握整个前端技术领域的发展方向和所涵盖的绝大多数技术要点，为未来深入学习前端知识提供指导和方向。当然，笔者还是建议你在有一定前端技术基础的前提下再来阅读本书，因为这并不是一本入门的工具类书籍，对基础知识讲解较少。如果你已经是高级前端工程师，也希望你通过本书了解到自己在前端知识体系中没有掌握的内容。笔者欢迎你对本书的内容提出建议，帮助我指出书中的不足，补充书中没有涉及的内容。写作目的
本书的写作目的是希望通过笔者对现代前端知识体系的剖析来帮助那些需要快速成长和提升的前端读者们，为他们提供一个系统的知识体系和明确的学习方向，快速了解现代前端所涉及的主要知识点，把握前端知识体系结构的整个脉络。前端入门很简单，但是优秀的前端工程师却很少，如果你希望变得更优秀，那你一定会需要这本书。如果你觉得自己已经很优秀，也可以阅读本书进一步梳理知识体系，帮助自己查缺补漏。
不希望你购买本书后因为工作忙而翻几页便将它一直放在某个角落，所以，本书会用尽量少的篇幅和浅显的语句让大家掌握最核心的技术思想，少数偏理论的细节不会展开太多，只将其中最关键的部分讲清楚。如果大家希望有一本更全面、更清晰的书籍，笔者后期也会在本书的基础上深入展开。
总之，本书的写作目的是，希望区别于基础入门的工具书而从实质上帮助所有的前端读者们快速理解前端技术知识体系，培养自身更完善的体系化思维，掌握更多灵活的前端代码架构技术。最后，衷心希望这本书能真正帮助需要知识引导的同学，起到一个学习启蒙的作用，也希望大家多多支持这本书。写作背景
随着互联网的持续发展和网络信息的多样化，我们对网络信息的获取量越来越大，获取方式越来越多，获取媒介种类也越来越复杂。就目前而言，我们生活的方方面面都与互联网息息相关，通信、娱乐、购物、企业服务等均已成为每天生活中不可或缺的部分。就获取信息的媒介来看，终端设备（主要包括个人电脑、智能手机、平板电脑等）是我们从互联网上获取信息的最主要媒介。
与此同时，互联网信息展现的内容和形式越来越偏向于终端设备屏幕，而且基于终端设备的交互越来越多，越来越复杂。目前在终端设备屏幕上，获取互联网信息的最主要途径仍然是通过Web浏览器（或内嵌浏览器WebView，下文中统称为Web浏览器），网络信息在Web浏览器上是以Web应用的形式展现的。随着信息量的增大和信息多样化增加，Web浏览器应用也越来越复杂，规模越来越庞大，原有的由后台服务器直接产生网页数据的技术已经不能满足需要。
在我国，随着2000年左右第一批互联网企业的崛起，中国互联网累积输出的网络信息量越来越大，用户数越来越多，信息业务也越来越多样化。国内许多第一批从事网站开发的技术人员渐渐意识到Web浏览器端业务信息处理逻辑的复杂，因此他们不能把主要精力只集中在服务器端的数据收集和处理工作上。任何一项复杂工作简单化的最好方式必然是分工，在这种情况下，第一批半职业的前端工程师出现了，具体时间可以大致认为是Web 2.0时代开始的时候，也就是说，国内的前端工程师可以认为是在以用户原创产生内容（User Generated Content，UGC）为主的互联网应用网站产生时开始出现的。不仅如此，在UGC应用大行其道的时代，各类电子商务网站的蓬勃发展又大大增加了互联网企业对前端工程师的需求。
随着互联网的普及，社交和电商的蓝海中涌现出了无数的互联网企业，这类企业中的大部分目前仍然是以利用Web浏览器与用户进行信息交互为主要业务，用来完成用户的信息消费。自2008年开始，移动互联网的另一波浪潮让互联网行业的发展如日中天，整个国内外互联网行业一片欣欣向荣。与此同时，为数不多的前端工程师和呈指数增长的前端工程师需求量形成了巨大的产业人力资源矛盾。不少互联网公司因为业务发展需要，鼓励大量服务端工程师向前端工程师转型来填补前端人力的空缺。直至今天，前端工程师的数量仍然远远不能满足企业的发展需要，不过与UGC时代相比，前端工程师的数量有了一定的提升。与此同时，互联网应用场景的复杂化也提高了企业对前端工程师基本能力的要求，一部分初级前端工程师仍然不能胜任企业的工作，而优秀的前端工程师一将难求。
面对这种形势，笔者觉得，目前缺乏优秀前端工程师的主要因素有以下两点。前端专业教育引导资源的稀缺
可以认为，前端工程师培养起来难度大，和前端教育学习资源的缺乏有一定的关系。虽然有专门的前端方向培训机构，但是这种模式下的人才培养专业度和产出完全不如人意。笔者的感觉是，一般毕业就被选拔进入大型互联网公司且技术能力相对较强的前端工程师都是通过平时自学进入这一领域的。笔者很明白前端学习的困难，所以如果有充足的前端教育资源来引导，结果就有可能不一样。前端领域的技术革新速度快，对前端工程师的要求越来越高
真正了解前端技术的工程师都会感觉前端技术发展变化远快于其他端。浏览器特性、编程语言标准、前端框架、前端工具、多终端浏览器等都在快速地换代更新。作为一名前端工程师，不仅要掌握现有的技术来实现业务需求，解决业务问题，还要不断快速学习新的技术知识，为新技术时代的到来做准备。对于后接触的人来说，需要了解掌握的东西会越来越多。
所以希望本书所讲解的前端体系化内容能够降低前端从业人员的学习成本，帮助读者快速从宏观上把握前端知识体系结构的整个脉络。主要内容
本书一共分7章，每一章的主要内容如下所述。
• 第1章，主要介绍现代Web应用的发展概况和相关的技术知识，同时也深入总结目前主要浏览器的基础原理知识与常用的前端开发调试技术。
• 第2章，主要讲解了前端技术的相关协议，包括HTTP、HTTP2、HTTPS、Web实时协议、前端安全机制、RESTful规范和Hybrid混合应用交互协议等。
• 第3章，以前端的三层结构发展演进和实践技术为主，讲解HTML5、ECMAScript 5+、CSS3的发展历程和特性，同时介绍现代前端开发中的编译技术和响应式站点的设计思路。
• 第4章，主要讲解前端交互框架的演进和各类前端框架的实现原理，包括直接型DOM交互框架、MVC、MVP、MVVM、Virtual DOM、MNV＊等框架的设计思路。
• 第5章，以专题的方式讲解现代前端大型项目的实践思路，主要包括开发规范、组件化规范、构建原理、用户数据分析、前端优化手段、搜索引擎优化基础等内容。
• 第6章，围绕跨栈主题介绍前端技术栈在后端和移动端Hybrid上的开发实践，例如，后端直出同构原理、Hybrid离线包与增量机制实现等关键架构的设计思路。
• 第7章，就前端的未来趋势进行分析，简单介绍物联网Web化、Web VR、网站人工智能等未来的前端技术趋势，总结成为一名优秀前端工程师的要素。
相信读者们看到这里就会兴奋起来，因为本书涵盖了现代前端中大部分需要掌握的技术实践理念，这也是编写本书的初衷。相比于深入介绍具体某一个前端框架的书籍，这本书能带给读者体系化思维和技术理念上的提升，因为前端学习不是学会某个框架就可以了。写作声明
关于本书的内容，在此声明如下。
1．书中所涉及的内容均为基于笔者理解之上的原著输出，部分内容如有雷同，属于共性知识。
2．书中提出了一些自定义概念，可能之前没有被提出，请读者认真理解。
3．书中涉及技术原理类的内容较多，并不是只介绍某个特定框架的工具类书籍，建议读者在有一定前端技术基础的前提下阅读，本书的编写宗旨是提高前端工程师的体系思维和设计能力，而不是帮大家快速入门。
4．本书使用的全部样例代码均基于ECMAScript 6＋环境，需要较高版本的浏览器或Node服务器的运行支持。
5．本书涉及的知识点量大，涵盖范围广，对相关基础知识细节的展开不会过于详细，但对于每种技术的实现都有较深入的原理性分析，希望读者认真阅读领会。致谢
感谢为了这本书得以完成而做出贡献的小伙伴们。首先感谢电子工业出版社策划编辑陈晓猛的辛苦跟进和鼎力协助，保证了书籍能够按期出版；其次感谢腾讯IMWEB团队的培养，没有团队给予的锻炼机会，我根本不可能完成这本书；最后感谢腾讯IMWEB团队的成员们帮我提供素材和校对稿件；另外要特别感谢来自腾讯的kenkozheng、samarali、helondeng和来自携程的sheiladai等同事给予本书的写作建议与技术审校。由衷感谢大家。张成文
读者服务
轻松注册成为博文视点社区用户（www.broadview.com.cn），您即可享受以下服务：
• 提交勘误 您对书中内容的修改意见可在【提交勘误】处提交，若被采纳，将获赠博文视点社区积分（在您购买电子书时，积分可用来抵扣相应金额）。
• 与作者交流 在页面下方【读者评论】处留下您的疑问或观点，与作者和其他读者一同学习交流。
页面入口：http://www.broadview.com.cn/31033
二维码：专家推荐
近几年前端技术发展迅猛，各大公司对前端优秀人才的需求急剧增加。本书从一名一线专业前端从业者的角度，面面俱到地为大家剖析了当前Web前端所需要具备的各种现代技术。无论是从网络、浏览器方面，还是从工程化、团队协作的角度都给出了非常好的呈现，非常值得大家阅读。郭学亨（Henry），腾讯前端IMWeb团队负责人
近几年，有关前端的书籍很少能全面而且深入地介绍前端技术思想与理论相关内容，大部分都是独立拆分介绍前端单点领域的技术栈。这本书以现代前端技术思想与理论为主，详细而且深入，但又通俗地向读者阐述了现代前端技术栈，无论对初学者还是中级学者都是值得一读的好书。读者可以通过本书快速领略到前端领域的深度和广度，把握整个前端技术领域所涵盖的绝大多数知识技术要点和发展方向，为未来深入学习前端知识提供指导和方向。大漠，W3cplus.com站长
现如今，前端已经不再是一种“新兴职业”，对技术系统且全面的追求愈显重要，但繁杂的技术体系及各种旁支经常让初学者无所适从。本书能从全局和主流的视野介绍前端职业工程师几乎涉猎的所有知识，并将前端工作中涉及的解决方案分门别类，抽象成易于理解的思路。相信对前端感兴趣的读者一定能够借助这本难得的好书触类旁通，一帆风顺地推开通往前端界的神秘大门，快速地成为一名优秀的前端工程师。许诺（Darksnow），阿里巴巴前端无线开发专家
本书从一名前端工程师的角度，梳理了现代前端技术所涉及的基础知识体系和原理性技术解析，包括开发方式的变更、前端框架的演进、前端跨栈技术以及未来的VR等，契合当前流行的“大前端”概念，非常适合读者扩宽个人知识面。另外，作者本人在前端方面有很深的造诣，对目前的一些前端问题有深入的研究和个人独特的见解。相信读者朋友们一定能从本书中收获颇多。邓海龙（Helon），腾讯前端IMWeb团队成员
前端技术日新月异且涉及的知识面较广泛，对于初学者来说又不知从何学起、所学的东西是否已经过时。对于中级学者，可能又存在对某些知识的了解不够全面和深刻的问题。本书由前端技术的发展历程向整体架构体系逐层展开，基本涵盖了现阶段的前端技能树，为前端学习者指明了方向。同时，本书注重从原理的层面进行知识点的解析，万变不离其宗，各种框架或技术之间的很多思想是相通的，把握住这一点，将对读者后续的学习更有帮助。李双双（Lissa），腾讯前端工程师第1章 Web前端技术基础
前端技术自诞生以来，就一直保持着较快的发展速度。与此同时，前端技术的快速发展对前端工程师的要求也越来越高。到目前为止，除了浏览器的应用复杂度在提升，前端的开发模式也在不断演进。前端开发模式先后经历了静态黄页时期、服务器组装动态网页数据时期、后端为主的MVC（Model-View-Controller，一种数据模型、视图、逻辑分离的开发模式）模式时期、前后端分离方案开发时期、纯前端MV*（Model-View-＊，数据模型、视图、控制方式分离的开发设计方式，这里的控制方式有多种实现方法，所以一般用＊代替）为主与中间层直出的时期，最后进入到前端Virtual DOM（虚拟DOM，用来描述页面DOM树节点之间关系的一种特殊JavaScript对象）、MNV*（Model-NativeView-＊，数据模型、原生视图、控制方式分离的开发设计模式，这里的控制方式也可以有多种实现方法，所以用＊代替）模式以及前后端同构的开发时代。可能你对这些内容还不熟悉，不过不用担心，在后面的章节中将会详细为大家介绍。
工欲善其事，必先利其器。为了更好地学习和了解后面的知识，我们有必要先来了解现代Web前端技术的发展概况和Web浏览器的基础开发技术。在这一章中，我们就先来了解一下Web应用技术基础及其发展概况。1.1 现代Web前端技术发展概述1.1.1 现代Web前端技术应用
互联网信息呈现的方式越来越偏向于终端设备屏幕，而且终端设备屏幕上的交互也越来越多，越来越复杂。如图1-1所示，如今我们获取网络信息的设备种类越来越多，除了借助传统的个人计算机来访问网络，还可以通过智能手机、平板电脑或穿戴设备等来获取网络信息。图1-1 现代网络信息主要访问媒介
而在众多不同终端设备屏幕上，获取互联网信息的最主要途径仍然是Web浏览器（内嵌浏览器WebView，后面统称为Web浏览器），网络信息内容在Web浏览器上最终是以Web应用的形式展现的。
如今，互联网Web浏览器上的应用已经变得十分庞杂，接下来我们将通过一个具体的例子来了解现代Web浏览器应用的具体发展是怎么样的。
图1-2是目前一个非常典型的浏览器端Web应用——腾讯课堂的首页部分用户界面。注意，这只是一部分，整个页面的内容很长很复杂，可操作的部分也很多，我们只截取了头部导航的一部分内容进行分析。从用户界面上来看，这部分其实已经包含了很多的数据内容和用户交互，可见，不同于十年前网页端的应用，现在浏览器上的应用实现已经非常复杂了。图1-2 腾讯课堂桌面浏览器端首页部分用户界面
在这个页面中，浏览器发起的直接网络请求多达190个，图片请求约为160个，在带有大量高清图片下载的条件下，页面内容体积大小大约只有2.2MB，平均一个请求大约只有11.6KB，通过用户操作触发的间接网络请求数可以达到上千个，而在没有使用浏览器缓存的情况下，从用户打开页面网址请求到浏览器页面显示内容却只用了480~520ms。需要做到这些是一件很不容易的事情，很多方面都需要考虑。首先，网页数据内容多的情况下代码怎么实现？请求数目大时怎么做到快速加载？图片请求数多时内容体积怎样做到尽可能小？网页体积大时怎样在500ms内展示给用户？用户操作种类繁杂时怎么去管理实现……然而，我们要明白的是，这个用户首页也只是一个相对比较复杂的页面，还有比这更加复杂且内容更多的网页，那我们又该怎样来解决这些问题呢？
现代前端Web应用内容变得更加庞杂，通常也是以多平台的形式展现。仍以腾讯课堂的应用为例，腾讯课堂首页在移动端浏览器下展示的部分用户界面如图1-3所示。在移动端，用户打开页面时默认加载的内容大小不到100KB，页面内容全部加载完成时总请求数约为50个，总内容大小约为200KB，页面中除图片外主要的内容请求不到10个，在无缓存的情况下页面内容平均加载时间约为1000ms。和桌面端浏览器（这里主要指个人计算机上面安装运行的浏览器）加载的内容相比有些不同，页面请求数量和体积大幅减小，页面内容结构也显得更加简单，但是加载时间却更长了，这又是为什么呢？图1-3 腾讯课堂移动浏览器端首页部分用户界面
先不急于回答这些问题，从整体上来看，和互联网应用初始阶段的静态页面相比，现代Web浏览器应用具有一些明显的特点，例如页面内容更加复杂、用户交互更多、涉及的平台更广、用户的访问实时性要求更高等。上面的案例只是现代Web前端应用的一个缩影，也是一个非常典型的应用案例。要解决以上的这些问题，我们需要先了解一些必要的前端技术知识。1.1.2 现代Web前端技术概述
为了解决上一节中的问题，我们从以下几个方面来思考。
○ 页面内容多而复杂，怎样保证开发效率？通常，在前端项目实践中，我们需要借助符合特定场景的前端框架来提高开发效率，例如使用jQuery、MVVM等开发框架，对常用的HTML DOM（Document Object Model，文档对象模型，是指HTML内容通过浏览器解析后建立的具有节点父子关系的树形对象）操作进行高效封装，大大简化开发工作量，提高效率。 document.getElementById('text') .innerHTML ='这是一段文本';
在jQuery框架里面就可以如下简洁高效地实现。 $('#text') .html('这是一段文本');
○ 页面内容多且复杂，项目的管理和维护该如何去做？前端项目代码越来越多，结构越来越复杂，如何实现项目的管理将直接决定后期的维护成本。所以我们必须考虑用模块化和组件化的思路来管理，所谓的模块化和组件化是指采用代码管理中分治的思想，将复杂的代码结构拆分成多个独立、简单、解耦合的结构或文件分开管理，使项目结构更加清晰。例如，某新闻版块组件的内容可以用下面的HTML结构来表示。 这是新闻标题
如果页面的内容增多，我们可以借助Web Component（HTML5的一种组件化规范）注册一个这是新闻标题
○ 页面加载的内容很多，怎样保证尽快将网页内容显示给用户？在页面内容较多、较复杂的情况下，为了让用户尽可能快速看到内容，我们可以通过异步的方式来实现，即将一部分内容先展示给用户，然后根据用户的操作，异步加载用户需要的其他内容，避免用户长时间等待。
○ 怎样限制页面内图片的大小以保证页面快速展示？通常，网页上的图片都是比较大的，下载时也比较消耗流量。在上节的这个用户首页中图片请求大约为160个，那么我们怎样保证页面下载时消耗的流量尽可能小呢？这可能就需要考虑图片的优化处理了，如使用更高压缩比webp格式的图片，在图片质量不降低的情况下，可以大幅度减小图片的网络流量消耗，提高图片加载速度。 
○ 对于重复打开的页面，能否让浏览器不再向服务器请求重复的内容呢？其实合理地利用文件缓存就能做到这一点，这样可以大幅度提高网页资源的加载速度，而且幸运的是，浏览器默认可以支持文件缓存，对于一段时间内浏览器的重复请求，服务器可能会返回HTTP的304状态码或者不发送请求，让浏览器直接从本地读取内容。
○ 针对上一节中关于移动端提出的最后一个问题，如果页面地址在移动端浏览器打开，又该怎么处理呢？通常，我们认为移动端和桌面端浏览器相比，有以下几个明显劣势：移动端设备计算资源和网络资源比较有限；移动端设备CPU处理速度较慢且网速也相对较低，加载和解析同样的内容需要更长的时间；移动端浏览器受屏幕大小限制，一次能展示的内容有限；移动端设备通常没有键盘和鼠标等外部设备，用户交互的难度增大；移动端浏览器的整体性能不如桌面端浏览器。所以使用移动端浏览器打开一个Web页面时，我们常常会考虑让它打开一个用户界面和内容更加简洁的页面。例如，在移动端上访问桌面浏览器端腾讯课堂首页https : //ke.qq.com/index.html将会自动定位到https://m.ke.qq.com/index.html页面上。尽管这样可以让移动端浏览器加载更少的内容，但所需要的时间还是比较长，仍需要进行更多的优化来提升加载速度。
通过思考上述问题，我们可以大大优化用户访问页面时的体验。与此同时，也涉及了前端开发框架、模块化和组件化开发、资源异步加载、响应式站点开发、缓存和前端优化等多个方面的技术知识。1.1.3 Web前端技术发展
除了从Web应用的角度上考虑，我们也可以从前端工程师的角度出发，通过一段代码来看看现代前端的一些特点。作为一个前端工程师，目前我们很可能会这样来写一个HTML文件。
或许你还不理解这里每一行代码的意思，也不了解为什么要这么写。那么，我们先来看一个之前写的页面。
相比这个更早的网页结构，我们现在写的HTML结构有些地方变简单了，但是更多的地方变复杂了。在现代浏览器页面开发中，我们通常会使用HTML5的新规范，这样能够一定程度上简化开发过程，提高开发效率，也有利于搜索引擎进行检索。当然这些只是基本结构模板的举例，在现在的页面代码中，我们甚至还可能看到如下的使用方法。
这是HTML5中组件化Web Component的一种实现方式，它通过自定义标签的方式来封装一部分独立的结构功能代码块。另外在Angular2框架中，前端页面组件也可以定义如下：使用TypeScript语言的装饰器特性来描述声明一个前端页面组件。 @Component({ selector: 'my-app', template:`
不仅如此，除了浏览器上的开发，JavaScript前端脚本语言在Node.js（Node.js是一个基于Chrome V8引擎的JavaScript运行环境，使用了事件驱动、非阻塞式I/O的模型，使其轻量又高效，它使用的包管理器为npm，是目前全球最大的开源库生态系统）服务器端也可以进行自由高效的开发，例如结合Koa（Koa是一个简洁高效的Node.js端Web框架）Web框架，我们就可以非常便捷地加载中间件创建一个Web服务来运行。'use strict'; const http = require('http'); const koa = require('koa'); const serve = require('koa-static'); const koaBody = require('koa-body'); const router = require('./routes'); // 创建一个 Koa 应用 const app = koa(); app.keys = ['site.com']; // 加载中间件 app.use(serve('./pages')).use(serve('./static)); app.use(koaBody({ formidable: { uploadDir: __dirname } })); app.use(router.routes()); // 创建服务器监听 http.createServer(app.callback()).listen(8000); console.log('Server listening on port 8000');
这些示例代码中涉及了一些ECMAScript 6＋标准的新特性，在Web前端开发实践中，这些新的特性早已经深入到项目开发的各个环节当中了，ECMAScript 6＋和原来的语言规范相比更加简洁、高效。我们知道，前端技术栈中的JavaScript语言不仅能在浏览器端解析，也能在Node.js服务器上运行，而且目前已经被广泛使用在各类企业后端服务中。但是这里要说的是，前端技术上的这些变化仅仅发生在四年之间，而且这里列举的只是前端技术变化中极少的一部分。可以说互联网和移动互联网的诞生与井喷式的发展促进了前端技术的发展，带来了这些巨大的变化。我们不能确定未来前端技术会变成什么样子，但可以肯定的是，从现在起，四年后又将是完全不同的。
我们必须承认，前端工程师需要做的事情远不只是将一个设计稿图片在页面上实现这么简单，仅从Web前端结构的开发实现模式上来看就已经发生了翻天覆地的变化。
如图1-4所示，前端结构的开发实现模式先后经历了静态黄页时期、服务器组装动态网页数据时期、后端为主的MVC模式时期、前后端分离时期、纯前端MV＊为主和中间层直出时期、前端Virtual DOM、MNV*、前后端同构时期。图1-4 前端应用开发模式演变
Web前端的概念随着互联网的出现而产生，Web页面结构从最早的静态黄页形式，渐渐变成使用后端数据组装输出动态页面的形式。数据复杂后，出现了以后端语言为核心的MVC开发模式。为了方便管理更复杂的Web项目，有人提出了前后端分离开发管理的方案，让前端工程师能够专注于浏览器端的交互逻辑实现。前后端分离方式出现后，前端快速发展并进入了以纯前端MV＊框架为主的时代，现在前端则可以利用更加灵活且与组件化结合的Virtual DOM交互模式来实现，或者选择前后端同构、跨终端MNV＊的开发模式来应对不同的业务场景。
由此说明，Web前端技术的发展非常迅速而且已经发生了巨大的变化，但通过这一系列的变化我们可以看出，前端从无到有且发展到现在的不变宗旨是，一直持续在以效率和质量为最终导向的道路上探索前进，并且未来关于Web技术效率和质量这两方面的探索仍会有增无减。效率方面，从前后端分离到出现各种封装的前端框架，都在解决一个前端编程开发效率的问题。前端性能作为前端质量的一个重要部分一直倍受关注，而现在前端Virtual DOM和MNV*交互模式等的实现思路，就是为解决前端交互性能问题而出现的。当然这仅仅是在前端开发框架上做出的完善和改进，此外相关前端工程、自动化构建、组件化、前端优化等技术解决方案的出现，也为现代前端开发的效率和质量提升做出了重要的贡献。1.2 浏览器应用基础1.2.1 浏览器组成结构
在介绍浏览器组成结构之前，我们先来看一个以前经常被问到的问题：从我们打开浏览器输入一个网址到页面展示网页内容的这段时间内，浏览器和服务端都发生了什么事情？我们直接来看一个相对简洁但比较清晰的过程描述。
○ 在接收到用户输入的网址后，浏览器会开启一个线程来处理这个请求，对用户输入的URL地址进行分析判断，如果是HTTP协议就按照HTTP方式来处理。
○ 调用浏览器引擎中的对应方法，比如WebView中的loadUrl方法，分析并加载这个URL地址。
○ 通过DNS解析获取该网站地址对应的IP地址，查询完成后连同浏览器的Cookie、userAgent等信息向网站目的IP发出GET请求。
○ 进行HTTP协议会话，浏览器客户端向Web服务器发送报文。
○ 进入网站后台上的Web服务器处理请求，如Apache、Tomcat、Node.js等服务器。
○ 进入部署好的后端应用，如PHP、Java、JavaScript、Python等后端程序，找到对应的请求处理逻辑，这期间可能会读取服务器缓存或查询数据库等。
○ 服务器处理请求并返回响应报文，此时如果浏览器访问过该页面，缓存上有对应资源，会与服务器最后修改记录对比，一致则返回304，否则返回200和对应的内容。
○ 浏览器开始下载HTML文档（响应报头状态码为200时）或者从本地缓存读取文件内容（浏览器缓存有效或响应报头状态码为304时）。
○ 浏览器根据下载接收到的HTML文件解析结构建立DOM（Document Object Model，文档对象模型）文档树，并根据HTML中的标记请求下载指定的MIME类型文件（如CSS、JavaScript脚本等），同时设置缓存等内容。
○ 页面开始解析渲染DOM，CSS根据规则解析并结合DOM文档树进行网页内容布局和绘制渲染，JavaScript根据DOM API操作DOM，并读取浏览器缓存、执行事件绑定等，页面整个展示过程完成。
整个过程中使用到了较多的浏览器功能，如用户地址栏输入框、网络请求、浏览器文档解析、渲染引擎、JavaScript执行引擎、客户端存储等。下面，我们具体来看一下浏览器的主要结构。
如图1-5所示，通常我们认为浏览器主要由七部分组成：用户界面、网络、JavaScript引擎、渲染引擎、UI后端、JavaScript解释器和持久化数据存储。用户界面包括浏览器中可见的地址输入框、浏览器前进返回按钮、打开书签、打开历史记录等用户可操作的功能选项。浏览器引擎可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心。浏览器渲染引擎的功能是解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面，也有人称之为排版引擎，我们常说的浏览器内核主要指的就是渲染引擎。网络功能模块则是浏览器开启网络线程发送请求或下载资源文件的模块，例如DOM树解析过程中请求静态资源首先是通过浏览器中的网络模块发起的，UI后端则用于绘制基本的浏览器窗口内控件，比如组合选择框、按钮、输入框等。JavaScript解释器则是浏览器解释和执行JavaScript脚本的部分，例如V8引擎。浏览器数据持久化存储则涉及cookie、localStorage等一些客户端存储技术，可以通过浏览器引擎提供的API进行调用。图1-5 浏览器组成结构
作为前端开发者，我们需要重点理解渲染引擎的工作原理，灵活运用数据持久化存储技术，因为实际的开发工作中这部分的操作比较多，而其他几个部分都是由浏览器决定的，开发者能控制的部分相对较少。接下来我们就重点讲解这两个部分。
目前，用户使用的主流浏览器内核有4类：Trident内核，例如Internet Explorer、360浏览器、搜狗浏览器等；Gecko内核，Netscape 6及以上版本，还有Firefox、SeaMonkey等；Presto内核，主要是Opera 7及以上还在使用（Opera内核原来为Presto，现使用的是Blink内核）；Webkit内核，主要是Safari、Chrome浏览器在使用的内核，也是特性上表现较好的浏览器内核。另外，Blink内核其实是WebKit的一个分支，添加了一些优化新特性，例如跨进程的iframe，将DOM移入JavaScript中来提高JavaScript对DOM的访问速度等，目前较多的移动端应用内嵌的浏览器内核也渐渐开始采用Blink。1.2.2 浏览器渲染引擎简介渲染引擎的主要工作流程
渲染引擎在浏览器中主要用于解析HTML文档和CSS文档，然后将CSS规则应用到HTML标签元素上，并将HTML渲染到浏览器窗口中以显示具体的DOM内容。如图1-6所示，浏览器通过网络模块下载HTML文件后进行页面解析渲染，流程主要包括以下几个步骤：解析HTML构建DOM树、构建渲染树、渲染树布局、绘制渲染树。图1-6 渲染引擎工作流程
解析HTML构建DOM树时渲染引擎会先将HTML元素标签解析成由多个DOM元素对象节点组成的且具有节点父子关系的DOM树结构，然后根据DOM树结构的每个节点顺序提取计算使用的CSS规则并重新计算DOM树结构的样式数据，生成一个带样式描述的DOM渲染树对象。DOM渲染树生成结束后，进入渲染树的布局阶段，即根据每个渲染树节点在页面中的大小和位置，将节点固定到页面的对应位置上，这个阶段主要是元素的布局属性（例如position、float、margin等属性）生效，即在浏览器中绘制页面上元素节点的位置。接下来就是绘制阶段，将渲染树节点的背景、颜色、文本等样式信息应用到每个节点上，这个阶段主要是元素的内部显示样式（例如color、background、text-shadow等属性）生效，最终完成整个DOM在页面上的绘制显示。
这里我们要关注的是渲染树的布局阶段和绘制阶段。页面生成后，如果页面元素位置发生变化，就要从布局阶段开始重新渲染，也就是页面重排，所以页面重排一定会进行后续重绘；如果页面元素只是显示样式改变而布局不变，那么页面内容改变将从绘制阶段开始，也称为页面重绘。重排通常会导致页面元素几何大小位置发生变化且伴随着重新渲染的巨大代价，因此我们要尽可能避免页面的重排，并减少页面元素的重绘。
渲染引擎对DOM渲染树的解析和输出是逐行进行的，所以渲染树前面的内容可以先渲染展示，这样就保证了较好的用户体验。另外也尽量不要在HTML显示内容中插入script脚本等标签，script标签内容的解释执行常常会阻塞页面结构的渲染。
通常情况下，不同浏览器内核的解析渲染过程也略有不同，我们以Chrome、Safari浏览器的Webkit内核和Firefox浏览器的Gecko内核为例，来看看渲染引擎工作流程的这四个步骤具体是怎样完成的。
图1-7和图1-8分别为Webkit内核和Gecko内核渲染DOM的主要流程。可以看出，两种渲染引擎工作流程的主要区别在于解析HTML或CSS文档生成渲染树的过程：Webkit内核中的HTML和CSS解析可以认为是并行的；而Gecko则是先解析HTML，生成内容Sink（Content Sink可以认为是构建DOM结构树的工厂方法）后再开始解析CSS。这两种渲染引擎工作过程中使用的描述术语也不一样：Webkit内核解析后的渲染对象被称为渲染树（Render Tree），而Gecko内核解析后的渲染对象则称为Frame树（Frame Tree）。但是它们主要的流程是相似的，都经过HTML DOM解析、CSS样式解析、渲染树生成和渲染树绘制显示阶段。一般渲染引擎的解析过程中都包含了HTML解析和CSS解析阶段，这也是渲染引擎解析流程中最重要的两个部分，接下来就看看HTML文档解析和CSS规则解析具体是怎样进行的。图1-7 Webkit内核渲染DOM流程图1-8 Gecko内核渲染DOM流程HTML文档解析
HTML文档解析过程是将HTML文本字符串逐行解析生成具有父子关系的DOM节点树对象的过程，例如下面的HTML结构，通过解析HTML文档就生成了如图1-9所示的由多个不同DOM元素对象组成的DOM树。图1-9 DOM结构解析示意图
段落
渲染引擎在HTML解析阶段会对HTML文本的标签进行分析，同时创建DOM对象，最终生成图1-9所示的DOM对象树。需要注意的是，
我们通过这一段代码就可以获取不同DOM元素对应的原始类型了，和HTML标准一样，DOM元素的原始类型标准也是由W3C组织指定的，具体更多常用的类型可以参考下面的内容。
○ 根元素 (HTMLHtmlElement)
○ 文件数据元素
(HTMLHeadElement)试读结束[说明：试读内容隐藏了图片]