高性能响应式Web开发实战 - (EPUB全文下载)

文件大小：0.18 mb。
文件格式：epub 格式。
书籍内容：

高性能响应式Web开发实战
第1章 概述及任务介绍
第2章 响应式中要面对的问题
第3章 布局
第4章 布局——响应式篇
第5章 响应式图片
第6章 脚本与性能：入门篇
第7章 脚本与性能-提高篇
第8章 工程问题
后记
看完了
第1章 概述及任务介绍
本章向读者大致描述整本书的轮廓。希望通过阅读本章内容，读者能够了解这本书涉及的技术范围、写作风格、写作思路以及贯穿全文的线索。我相信这对读者阅读接下来的内容会很有帮助，不至于让读者觉得某些章节的安排比较突兀。
当然，读者也可以跳过本章内容，直接进入下一章，开始实战技术的学习。
1.1 为什么需要响应式设计
首先，我们先讲一下“为什么”需要响应式。
1.1.1 产品形态需要
我不想再谈论移动设备的增长趋势，也不需要强调用户每天花费多少时间在移动设备上，更不必用数字和图表告诉各位移动互联网形势如何好。毕竟每天各种互联网报告和科技媒体都在反复提醒着我们这些事情。
这里我们仅站在产品和技术的角度上思考，假设没有响应式设计，假设不区分移动与桌面用户，任由他们访问相同的桌面端页面，会有什么问题？
以大众点评网为例，如果你真的在手机上访问过站点的桌面版，那体验将会是灾难般的，手机上网页文字很难辨别，如图1-1和图1-2所示。
图1-1
图1-2
当我想查看右下角的热门餐厅有哪些时，不得不小心翼翼地用手势放大、移动页面，调整到需要浏览的区域。请小心操作，因为稍不留神就可能误点击了页面的某一处链接导致浏览器跳转到其他页面去，又不得不返回，再重复之前的步骤（这是常常发生在我身上的事情）。
介于使用场景（如户外、室内、紧急程度等）和使用媒介（如手机、平板、电视甚至智能手表等）的不同，Web产品在受到诸多限制（如屏幕大小、交互方式）的不同终端上产品形态应当是存在差异的。
让我们再考虑一些更恶劣的情况，不，应该说更实际一些的情况。Web产品在移动设备上最大的天敌不是兼容性问题而是不稳定的网络信号。如果页面的体积过于庞大，请求过多，用户下载页面被中断而无法正常被访问的概率也就更大。大众点评（大部分网站也是如此）的移动版和桌面版在页面加载体积方面是有非常大区别的，如图1-3和图1-4所示。虽然这样的差异不一定是出于性能的考虑，但我仍然强烈建议尽可能压缩页面体积（可以通过利用浏览器缓存等方式）以减小风险，这样也能尽快向用户展示页面内容。
图1-3
图1-4
1.1.2 性能与商业考虑
最后让我们再来看一组用于证明性能重要性的统计数据[1]：
一般来说，47%的用户希望页面的加载时间少于2 s；
一般来说，如果一个网站的加载时间超过3 s，40%的用户会放弃访问这个网站；
亚马逊说，他们页面的加载时间每增加100 ms，便会损失1%的销售额；
谷歌说，他们页面的加载时间每增加500 ms，便会减少25%的搜索量。
对一个商业网站来说，时间就是金钱，用户没有理由把时间花在无法访问的网站上。
移动端浏览器的渲染效率、脚本执行效率与桌面端浏览器有一定的差距。页面上没必要向下兼容的冗余代码，以及更多无法预知的因素，都是在“想方设法”推迟着页面的展现。移动端面临的形势是严峻的，针对移动设备上的Web产品，应该在优化方面花更大的力气。
抛开产品本身，抛开商业因素，Web开发者的工作职责之一应该是用技术实现一个“好”的产品。一个网站没有CSS和JavaScript仍然可供浏览，移动设备浏览器当然也可以直接访问桌面端网页，但是这些情况下产品的可用性（usability）、可读性（readability）、可访问性（accessibility）如何保障呢？没有用户愿意历经艰难险阻才能使用产品。谈论响应式也好，移动化也罢，目标是让产品在移动端与桌面端一样好用，不仅仅是让布局变窄，让字体变小，让它看上去变得小了一号而已。这是机遇，也是挑战。
1.2 本书的线索
技术需要依靠产品来落地和彰显它的威力，否则再强悍的技术也只是象牙塔上小部分人的玩具而已。这就好比3A游戏大作对于游戏引擎的重要性（《孤岛危机》之于Cryengine，《战争机器》之于Unreal）。再有，“纸上得来终觉浅，绝知此事要躬行”，对古人如此，对程序员更是如此。学习技能和提升技能的最佳途径只有实践，开始使用学到的技术，并且遇到书本上从来就没有提及的困难，这才是进步的开始。
如果整本书每一章阐述的知识点相互独立，也就不能称之为书，至少不能称之为技术书，只能算作是某人博客的文章选集。所以书是有线索的，线索将每一章的内容联系起来，形成一个知识体系。例如，响应式图片与性能调优看似不相关，但过度地追求大而全的图片的解决方案，注定要用降低性能为代价。
我非常同意alistapart.com上的一篇文章《Building to Learn》[2] 中的一些观点，也深有感触：用技术做一些你感兴趣的事情，这是学习的最好方式。
综合以上原因，我们的书也需要一条线索，需要活生生的产品来将我们的知识付诸实践。这条线索就是完成一个可以应用在Jekyll（静态博客网站生成工具）上的响应式文章详情页。在每一章的结尾，我都将把这一章学到的技术运用到这个博客页面的制作过程中，来取代非响应式下的解决方案。读者读到书的结尾，这个页面也就开发完成了。读到这里的读者可以直接访问我的个人技术博客 http://qingbob.com来先睹为快，也可以访问本书在GitHub上的源码地址 https://github.com/hh54188/responsive-web-design-tutorial获取本书涉及的所有代码。
因为篇幅有限，所以整本书的主题是“开发”而不是“设计”。也就是说，我们只负责不遗余力地实现设计稿中的需求，而不问为何这样设计。要知道关于响应式设计同样也是一个庞大的课题。我相信已经有更好的文章和书描述了响应式产品、响应式交互式设计和移动优先，在本书中我只会偶尔提及。
1.3 写作思路
大多数开发者在初学一门技术时常有的疑惑，用我常说的一个笑话来表达就是：当你把一个名词疑惑拿 ............

以上为书籍内容预览，如需阅读全文内容请下载EPUB源文件，祝您阅读愉快。