高效前端：Web高效编程与优化实践

这不是一本单纯讲解前端编程技巧的书，而是一本注重思想提升和内功修炼的书。

全书以问题为导向，精选了前端开发中的34个疑难问题，从分析问题的原因入手，逐步给出解决方案，并分析各种方案的优劣，最后针对每个问题总结出高效编程的*佳实践和各种性能优化的方法。

全书共7章，内容从逻辑上大致可以分为两大类：

第一类，偏向实践，围绕HTML、CSS、JavaScript等传统前端技术，以及PWA等新兴前端技术，讲解如何进行HTML优化、CSS优化、JavaScript优化、页面优化等，以此帮助前端工程师们提升高效编程和应用优化的能力。

第二类，注重基础，讲解了前端工程师必须掌握的数据处理、网络协议、文件操作、测试等基础性的开发技，目的是帮助前端工程师们修炼内功，打下扎实的基础。

希望通过本书，不仅能帮助前端工程师们夯实基础，而且还能写出简洁、优美的代码，为应用带来良好的用户体验。

李银城（网名：会编程的银猪）

资深前端工程师，现就职于人人网。

知乎著名的专栏作者，前端类话题知名答主，在知乎前端圈有一定的影响力。乐于分享。喜欢写博客，他的知乎专栏“Effective前端”，累计已经超过20万字，文章被大量转发和转载。

适读人群 ：本书需要有一定的前端基础，或者是其它语言的编程经验。如果想要把本书作为前端入门书籍，恐怕不太合适。读者可以将它当作进阶的书籍。本书不适合于以下读者：1.不知道什么

（1）知乎著名前端专栏作者/前端类话题优秀答主/人人网资深前端工程师经验总结

（2）《ES6 标准入门》作者/著名技术博客作者阮一峰、W3cplus.com 站长大漠大力推荐

（3）从技能修炼和思想提升2个维度总结出34个高效编程和应用优化的完美实践

Preface?前　　言为何写作本书？本书通过介绍前端的优化实践以达到高效编程之功效，这里并不是教你怎么用CSS的某个属性，如“display：grid”，或者怎么用JS的ES6，而是重点教你一些前端的思想，如怎么提高用户体验，怎么写出简洁优美的代码等。注重思想而不注重形式，注重功底而不注重框架是本书的特色。本书有一大部分篇幅在介绍怎么提升编程的功底，怎么修炼内功，从而达到高效编程的目的。
全书以问题为导向，例如有些页面为什么打开会比较卡顿，从怎么解决这种问题，有哪些方法，这些方法的优缺点是什么，一步步由浅入深地分析和解决问题。学会解决问题，比学会知识更为重要。
本书主要内容本书分为七章，第1～4章和第7章的实践性比较强，第5章和第6章注重基础。
第1章介绍如何使用浏览器提供的便利进行开发，能使用HTML/CSS解决的问题就不要使用JS，因为用HTML/CSS解决一般会更加简单，用户体验也会更好。
第2章介绍怎么样写出简洁高效的JS代码，怎么组织代码逻辑，让代码更加优美，具有更好的扩展性。
第3章介绍页面整体的优化，包括怎么加快页面的打开速度，怎么避免页面的卡顿，怎么从一些细节之处提升用户的体验，怎么更好地使用调试工具。
第4章结合实际经验，介绍HTML5的一些实用技术，如使用history改善AJAX体验、图标字体和SVG、裁剪压缩图片、如何做一个PWA应用等。
第5章回归技术基础，以WebSocket、wasm、Web Workers等HTML5的新技术为出发点回归到计算机基础，如网络协议、程序编译、多线程等。特别介绍了它们和前端的联系，只有掌握这些基础，才能更好地解决问题，做一个优秀的前端开发人员。
第6章讨论了诸如跨域、上传文件、CSS布局等前端技术支柱，特别是有些很常用但却是前端知识盲点的部分。
第7章介绍前端的单元测试与自动化测试，以及怎么使用可视化工具制作网页动画，还介绍了其他一些前端开发常用的工具，作为本书的一个补充内容。
在写作的过程中，我都是结合实际的经验进行阐述，并不像很多大学课本那样只讲理论。所以相对来说，本书看起来应该会比较生动，并且很多章节都是图文并茂的。
本书读者对象本书适用于以下读者对象：
具有一定的前端基础，想要找一本高阶的、能提升水平的书；刚毕业，没有什么实践经验，需要一本有实践指导作用的书；已经工作了，想要学习一下其他人的前端开发经验；不是做前端开发，但是有编程基础，想要深入理解前端是怎么运作的，或者是想加深理解HTTP之类的计算机基础知识。
如何阅读本书如果你一点编程经验都没有，可能不太适合阅读本书，你要是不知道什么是变量，什么是HTML，应该先读一些编程入门书籍。
读者可以从头看到结尾，我相信每一篇看完都会有收获的。或者有针对性地看，例如，你觉得自己在计算机基础里的网络协议、数据结构算法等方面比较薄弱，可以直接看第5章；如果你对HTML5比较感兴趣可以直接看第4章。在阅读的过程中，建议读者都实际操作一遍，而不仅仅是当作睡前读物，因为只有自己动手实践才能识别书中的真伪并且加深理解。所以本书不提供相关源码等资源，读者可自行根据书中描述动手练习。
致谢在本书的写作和出版过程中得到了很多人的帮助，感谢我的家人对我写作的支持和鼓励，感谢人人网同事在写作过程中提出的建议和对错误的修正，感谢机械工业出版社华章分社对本书出版付出的努力，特别是杨福川编辑对本书的策划以及李雷鸣老师的认真审阅、还要感谢阮一峰、大漠老师在百忙之中审阅本书、认可本书，并为本书写推荐语。
由于水平有限，书里难免会有一些不足和错误的地方，虽经过几番修改，可能还会有些许问题，欢迎读者朋友对本书的内容积极讨论，提出意见。我的邮箱是[email protected]。
李银城　　2017年12月17日

目　　录?Contents
前　言
第1章　HTML/CSS优化 1
Effective前端1：能用HTML/CSS
解决的问题就不要用JS 2
Effective前端2：优化HTML标签 16
Effective前端3：用CSS画一个三角形 22
Effective前端4：尽可能地使用伪元素 28
第2章　JS优化 34
Effective前端5：减少前端代码耦合 34
Effective前端6：JS书写优化 47
第3章　页面优化 59
Effective前端7：避免页面卡顿 59
Effective前端8：加快页面打开速度 67
Effective前端9：增强用户体验 85
Effective前端10：用好Chrome Devtools 91
第4章　HTML5优化实践 109
Effective前端11：使用H5的history改善AJAX列表请求体验 109
Effective前端12：使用图标替代雪碧图 118
Effective前端13：理解和使用CSS3动画 128
Effective前端14：实现前端裁剪压缩图片 136
Effective前端15：实现跨浏览器的HTML5表单验证 145
Effective前端16：使用Service Worker做一个PWA离线网页应用 151
第5章　前端与计算机基础 164
Effective前端17：理解WebSocket和TCP/IP 164
Effective前端18：理解HTTPS连接的前几毫秒发生了什么 185
Effective前端19：弄懂为什么0.1+ 0.2不等于0.3 203
Effective前端20：明白WebAssembly与程序编译 209
Effective前端21：理解JS与多线程 221
Effective前端22：学会JS与面向对象 231
Effective前端23：了解SQL 248
Effective前端24：学习常用的前端算法与数据结构 266
第6章　掌握前端基础 291
Effective前端25：掌握同源策略和跨域 291
Effective前端26：掌握前端本地文件操作与上传 299
Effective前端27：学会常用的CSS居中方式 310
Effective前端28：学会常用的CSS布局技术 320
Effective前端29：理解字号与行高 327
Effective前端30：使用响应式开发 336
Effective前端31：明白移动端click及自定义事件 344
Effective前端32：学习JS高级技巧 355
第7章　运用恰当的工具 372
Effective前端33：前端的单元测试与自动化测试 372
Effective前端34：使用AE + bodymovin制作网页动画 390

Web