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

高效前端 Web高效编程与优化实践 作者：李银城

高效前端 Web高效编程与优化实践 出版社：机械工业出版社

高效前端 Web高效编程与优化实践 内容简介

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

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

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

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

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

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

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

前言

第1章 HTML/CSS优化

Effective前端1：能用HTML/CSS解决的问题就不要用JS

Effective前端2：优化HTML标签

Effective前端3：用CSS画一个三角形

Effective前端4：尽可能地使用伪元素

第2章 JS优化

Effective前端5：减少前端代码耦合

Effective前端6：JS书写优化

第3章 页面优化

Effective前端7：避免页面卡顿

Effective前端8：加快页面打开速度

Effective前端9：增强用户体验

Effective前端10：用好Chrome Devtools

第4章 HTML5优化实践

Effective前端11：使用H5的history改善AJAX列表请求体验

Effective前端12：使用图标替代雪碧图

Effective前端13：理解和使用CSS3动画

Effective前端14：实现前端裁剪压缩图片

Effective前端15：实现跨浏览器的HTML5表单验证

Effective前端16：使用Service Worker做一个PWA离线网页应用

第5章 前端与计算机基础

Effective前端17：理解WebSocket和TCP/IP

Effective前端18：理解HTTPS连接的前几毫秒发生了什么

Effective前端19：弄懂为什么0.1+0.2不等于0.3

Effective前端20：明白WebAssembly与程序编译

Effective前端21：理解JS与多线程

Effective前端22：学会JS与面向对象

Effective前端23：了解SQL

Effective前端24：学习常用的前端算法与数据结构

第6章 掌握前端基础

Effective前端25：掌握同源策略和跨域

Effective前端26：掌握前端本地文件操作与上传

Effective前端27：学会常用的CSS居中方式

Effective前端28：学会常用的CSS布局技术

Effective前端29：理解字号与行高

Effective前端30：使用响应式开发

Effective前端31：明白移动端click及自定义事件

Effective前端32：学习JS高级技巧

第7章 运用恰当的工具

Effective前端33：前端的单元测试与自动化测试

Effective前端34：使用AE+bodymovin制作网页动画

高效前端 Web高效编程与优化实践 精彩文摘

切图是作为前端的一项基本技能，切图切得好，能够简化后续写JS的逻辑，有些交互甚至不用写JS就能完成。一方面HTML/CSS越来越强大了，另一方面HTML/CSS是浏览器提供的特性，只要写几个标签、写几行样式，一个好看的排版就出来了。善于使用浏览器提供的便利进行开发，能够简化代码，提高编程效率。

一般人都认为切图就是静态的，是死的，其实不然，一个好的切图除了好看之外，应该还要具备良好的交互性，是活的。而这不需要借助JS也能实现，而且比写JS更加方便。

不过也有人认为切图是比较低端的活儿——传说中程序员的鄙视链，写C的鄙视写C++的，写C++的鄙视写Java的，写Java的鄙视那些认为HTML/CSS是一门编程语言的人，如图1-1漫画所示。

图1-1 程序员的鄙视链（图片来自网络）

所以切图真得是很低端的工作吗？其实不然。

有人向大师提问，如何成为一名优秀的小提琴家，大师回答，先成为一名优秀的人，再成为一名优秀的音乐家，最后再成为一名优秀的小提琴家。而怎么成为一名优秀的前端？我认为要先成为一名优秀的人，然后再成为一名切图优秀的前端，最后再成为一名优秀的前端。这个类比虽然有点牵强，但是切图确实是一门技术活。

切图有三境界：第一境界——长得好看，长得好看方能让人有兴趣去了解你的思想；第二境界——灵活，可根据数据长短扩展，维护方便；第三境界——友好的交互和用户体验，例如能否自动监听回车提交。

为什么说能使用HTML/CSS解决的问题就不要使用JS呢？两个字，因为简单。简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验，下面介绍几个实例。

导航高亮是一种很常见的需求，包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用JS控制，但其实用一点CSS技巧就可以达到这个目的，而不需要使用JS。如图1-2和1-3所示。

图1-2 HOME菜单高亮

图1-3 EVALUATION菜单高亮

在正常态时，每个导航的默认样式为代码清单1-1所示：

代码清单1-1 未选中态菜单是暗的

nav li{

opacity: 0.5;

}

而在选中态即当前页面时，导航不透明度为1。为了实现这个目的，首先通过body给不同的页面添加不同的类，用于标识不同的页面，如代码清单1-2所示：

代码清单1-2 不同页面body的class不一样

所有的li也用class标识，为了有一个一一对应的关系，如代码清单1-3所示：

代码清单1-3 导航li的class

然后就可以设置当前页面的样式，覆盖掉默认的样式，如代码清单1-4所示：

代码清单1-4 通过body和li的类建立起一一对应的关系

body.home nav li.home,

body.buy nav li.buy{

opacity: 1;

}

这样，如果当前页面是home，则body.home nav li.home这条规则将生效，home的导航高亮。

这个技巧在《精通CSS》这本书里面有提及。如果你用JS控制，那么在脚本加载好之前，当前页面是不会高亮的，而当脚本加载好之后会突然高亮。所以这种情况下用JS吃力不讨好。

同时，hover时的高亮可以用CSS的：hover选择器实现，如代码清单1-5所示：

代码清单1-5 hover高亮

nav li:hover{

opaciy: 1;

}

加上：hover选择器后的优先级将会高于原本的优先级，鼠标hover的时候将会覆盖默认样式，即高亮生效。

你也可以用JS的mouse事件实现此功能，但JS会在mouseover的时候添加一个类，mouseleave的时候移除掉这个类，这样就变复杂了，而用CSS甚至可以兼容不支持JS的浏览器，所以，推荐使用CSS。一个纯展示的静态页面，为啥要写JS呢，是吧。

注意这个hover选择器特别好用，几乎适用于所有需要用鼠标悬浮时显示的场景。