高效前端 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选择器特别好用,几乎适用于所有需要用鼠标悬浮时显示的场景。
本文来自卿尘投稿,不代表电子书资源网立场,如若转载,请联系原作者获取。