Bootstrap优化站点资源、响应式图片、传送带使用详解3
|
优化Bootstrap站点资源、完成Bootstrap响应式图片、让传送带支持手势，具体内容如下 A.优化站点资源速度很重要。用户很关心。我们的站点必须加载够快，否则用户就会走人。SEO 也很重要。我们的站点必须加载够快，否者搜索排名就会下降。 明白了这样，我们就来清点一下 中的资源。特别的，来看一看我们能控制的、影响页面速度的重要因素 —— 文件大小，包括图片、CSS和 JavaScript 文件。只要简单几步，我们就可以给这些文件“瘦身”，缩短加载时间。 A.1 优化图片 这些图片都通过 Photoshop 的 “保存为 Web 格式” 进行了一定程度的优化。但是，所有图片加载一块，也有719 KB。
这些作品很重要。（比较是个人作品站点。）可是，这些个体也确实大了一些。通过更有效的压缩，能减少文件大小。 要减少文件大小，同时又不会损害图片质量，可以使用一些工具，比如 Yahoo! 的 Smushit:ht
对于 Mac 用户，免费的 ImageOptim 应用（
A.2 优化CSS 先看看为优化的样式表 main.css 的文件多大： 134 KB! 任何负责的开发者都不会让这么一个小网站带那么大的样式表。 好消息时，我们可以轻易把这个大小减半。利用 Bootstrap 的模块化 LESS 方案，可以立即缩小 CSS，步骤如下： (1) 开发 less/__main.less; (2) 注释掉不需要的 LESS 文件，比如这些： (3) 当然得小心一点，否则一不留神就可能注释掉必要的文件。因为时候要花点时间重编译，全面测试一下。 (4) 注释掉不必要的文件后，选择编译器中的最小化（或者压缩输出）选项，最后重编译以便，保存问 css/main.css 。 (5) 再看看文件有多大。我这里的结果是 91KB。减少了43KB。
当然，你还可以优化得再细一些。比如，可以打开每个保留的LESS文件，再把其中没有必要的代码一行一行注释掉。 最后，我们来看看如何优化 JavaScript。 A.3 优化JavaScript 为优化JavaScript，我们要把 plugins.js 文件中的 Bootstrap 插件，替换成只剩我们用到的几个。然后再重新压缩文件。 (1) 打开 js/plugins.js (2) 删除属于 bootstrap.min.js 的代码块 (3) 打开 js/bootstrap 文件夹，这里保存着 Bootstrap 插件的独立文件。组个打开系列文件，将他们的代码复制到 plugins.js 文件里，这三个插件是我网站中用到的： □ carousel.js □ collapse.js □ transition.js (4) 保存"瘦身"版的 plugins.js 文件，刷新浏览器试试 □ 确保响应式导航条在窄视口中能够折叠，并且单击按钮可以展开下拉列表； □ 确保传送带一切如常。 如果都没有问题，说明已经宝航了所需要的 JavaScript 。 (5) 下一步可以缩小(minify)或"丑化"(uglify) plugins.js 文件了。建议使用下列在线工具。 □ Uglify JS:https://marijnhaverbeke.nl/uglifyjs □ YUI Compressor:http://refresh-sf.com/yui/ □ 谷歌的 Closure Compiler: http://closure-compiler.appspot.com 打开这些在线工具，把 plugins.js 的代码复制过去，运行，再把得到的代码复制回 plugins.js。 这里选择的是 Uglify JS。 (6) 保存后压缩后的文件。 (7) 比较大小。 为了对比方便，这里为所有文件保存了备份：
□ plugins-all 包含完整的 bootstrap.min.js 代码; □ plugins-uncompressed.js 包含我们需要的三个插件，未压缩; □ plugins.js 是最终文件，缩小并去掉空格串联的版本。 最终文件只相当于原来的四分之一。 A.4 优化结果 总体来看，我们的优化工作取得了成效。把图片、CSS 和 JavaScript 都算一块，原来的大小是885 KB。 优化之后，变成了 769 KB，节省了116 KB，超过了 10%， 事实上，我们还能够继续优化，尤其是针对小屏设备，方法就是实现响应式图片。 B.实现响应式图片如果我们秉承移动友好的开发宗旨，那么就需要选择一种响应式图片技术。 B.1 分析作品传送带 在
而且，如果再看一看小屏幕中的显示效果，你可能会发现传送带中的图片应该更高点、窄点才好，因为窄屏幕垂直方向向上空间相对富余一些。 在手机屏幕那么宽的视口中，我们的图片，为大屏幕准备的图片，是可以显示，但如果能够更多利用垂直空间，效果会更好。这一点通过下面的屏幕截图可以看出来： 好的响应式图片技术，应该能让我们为小屏幕提供适当的图片，满足小文件、快速加载，以及改进设计的要求。 B.2 选择方案 本书作者推荐的是 Picturefill 技术。Picturefill 方案较好地平衡了性能和设计问题，而且方案也相当简单。 PS:相关文章：（这篇文章比较早了，建议还是直接看） Picturefill 实现想饮食图片只需简单几步： (1) 准备好针对目标视口的理想图片； (2)下载并包含 Picturefill 的 JavaScript 文件； (3) 用 Picturefill 的标记模式来引入图片。 一如往常，实际开发过程还有两个步骤： □ 测试； □ 按需调整。 下面我们就一步一步来做。 B.2.1 准备响应式图片 此书的源码中已经准备好了特殊尺寸和经过优化的图片，方便起见，我们把它们直接拷贝到我们的 img文件夹下：
打开这个图片，会发现它们更窄一些，长宽比更小。这是为了像下面这样在窄视口中更多利用垂直空间：
当然，图片也小一些，900px × 600px，保证在视网膜屏中也能有足够的像素，但比起初的1600px × 800px 就小多了.。这些小图片平均都比原来的大图片小50%以上。
图片准备好以后，接下来该 JavaScript 上场了。 B.2.2 使用 JavaScript Picturefill 的文件及文档位于 GitHub，地址是：
大家可以花点时间看看文档。我们一会就要用到文档中推荐的元素。我们要先下载该文件，解压缩后，找到 picturefill.min.js，然后把它复制到 plugins.js 文件中。 接下来，按照 Picturefill的约定准备标记。 B.2.3 修改标记结构 在 html 文档中，修改每张图片的标记，使用 Picturefill 的 picture 元素的模式。这里的标记默认采用小图片，但视口在 640px 及以上的浏览器和IE8例外。 一下就是修改后第一张图片的标记。 然后依次修改剩余的图片标记就可以了。 B.2.4 测试与调整 保存并测试，你会发现这一次传送带的图片不会调整适应屏幕宽度了。这是因为 Picturefill的标记没有使用 Bootstrap 传送带样式中的选择符。 我们的修改 _carousel.less 文件中相应的选择符，好让图片撑满可用空间，步骤如下： (1) 打开 _carousel.less (2) 搜索到注释// Account for jankitude on images ，把 > img 和 >a >img 子选择符，替换成简单点的后代 img 选择符，以便选中现在在Picturefill 标记中嵌套较深的图片： 问题就这样解决了。 B.3 最终的结果 在视口小于640ps时，传送带应该使用较小但相对较高的图片。 以此为起点，大家可以参考 Picturefill 的文档，根据需要再调整和适配自己需要的版本。 C.让传送带支持手势在触摸屏设备中，支持手势轻扫来切换传送带图片是一个非常实用的功能。 C1.有什么选择 如果只是要让传送带之处轻扫手势，只要一个 JavaScript 插件和几行代码就可以了。Justin Lazanowski 专门为实现 Bootstrap 3 传送带的手势交互写过一篇文章，提到三种选择。文章地址为：
这里将使用 jQuery插件 TouchSwipe，其GitHub 地址为：
使用这个插件，可以通过下列步骤让传送带支持轻扫手势： (1) 把 TouchSwipe 插件包含到我们的插件文件中； (2) 在 main.js 文件中写几行调用代码。 C.2 取得并包含 TouchSwipe 插件 下载后解压缩，找到jquery.touchSwipe.min.js 文件，把其中的代码复制到 plugins.js 中。这样，插件就位了。接下来需要调用它。 C.3 调用 TouchSwipe 需要写一行代码，命令 TouchSwipe 监听传送带上的轻扫事件，然后将其转换成 Bootstrap 的方法调用：.carousel('prev') 和 .carousel('next')。关于这些方法，可以参考 Bootstrap 的文档：
接下来的事很简单，只需下列几步： (1) 打开项目中的 main.js 文件。 (2) 在其中添加如下代码： (3) 保存后刷新，就可以通过左、右轻扫来切换图片了。效果图如下： 显示效果地址：
《Bootstrap 实战》的PDF文档和源码链接： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
