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

图书网 2020年8月23日19:03:512946

高效前端 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选择器特别好用,几乎适用于所有需要用鼠标悬浮时显示的场景。

图书网:高效前端 Web高效编程与优化实践pdf

继续阅读

→→→→→→→→→→→→→→→→→→→→查找获取

C++捷径教程 第3版pdf 程序设计

C++捷径教程 第3版pdf

C++捷径教程 第3版 作者:(美) Herbert Schildt C++捷径教程 第3版 出版社:清华大学出版社 C++捷径教程 第3版 内容简介 本书是程序设计大师Herbert Schildt...
深入理解JavaScript特性pdf 程序设计

深入理解JavaScript特性pdf

本书从实际开发角度介绍ES6及后续更新版本特性,以循序渐进、通俗易懂的方式讲解各种复杂的技术,比如异步控制流、声明对象及函数的使用等,并从实践角度提供了许多建议,既能帮助广大前端开...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:2   其中:访客  2   博主  0
    • 3423432
      3423432 9

      这本书据说非常不错,下载看看哦。

      • datateacher
        datateacher 0

        这个资源还是不错的,我想要这个资源