第6章 优化Bootstrap

所以我们已经到了书的最后一章。我们真的走了很长的路，现在有能力使用Bootstrap建立一个专业的、响应性的网站。但最后一个难题是如何优化我们的创意，让他们不仅看起来不错，而且表现得很好。

在本章中，您将学习一些技术，以优化一个由Bootstrap构建的网站(或者，实际上，任何其他前端框架)。我们将压缩CSS和JavaScript并精简Bootstrap。我们将尝试了解Bootstrap的局限性，并讨论使用它的常见缺陷。

优化技术

网站不但要美观而且性能要优良。网络用户已经变得不耐烦了，一个缓慢加载的网站将被摒弃，不管它的设计有多漂亮。

为了构建正确的模板，我们需要优化CSS文件、JavaScript文件和图像。所有这些文件都是通过单独的请求调用来服务于浏览器的，所以它们越轻，网站的整体性能就越好。

优化CSS

在处理Bootstrap框架时，我们通常会创建多个CSS文件。默认情况下，每个Bootstrap项目都附带Bootstrap.css文件来包含网站的模板。最重要的是，我们通常会有自定义的CSS文件来使我们的网站看起来更有吸引力。这里有一些我们可以优化的方法来减少我们网站模板中CSS文件的大小。

使用压缩版的Bootstrap CSS文件

正如前面的章节所述，Bootstrap允许开发人员在开发模板时只选择那些实际需要的组件。这降低了主引导CSS文件(bootstrap.css)的总体大小。一旦网站做好了生产准备，我们就可以通过使用它的简化版本(bootstrap.min.css)进一步减小这个CSS文件的大小。

使用Less移除未使用的Bootstrap组件

如果您更喜欢使用Less编写CSS，那么您可以通过它的主文件(bootstrap. Less)来定制Bootstrap。如果打开这个文件，就会看到大量的导入语句聚合各种Bootstrap组件。您可以注释掉那些与你的模板无关的导入语句。

例如，为了避免使用Bootstrap的标签、徽章和进度条，你可以从Bootstrap.less中注释掉以下几行:

@import "labels.less";
@import "badges.less";
@import "progress-bars.less";

假设您不想使用任何Bootstrap的JavaScript插件。从bootstrap.less中注释掉以下几行，删除与之关联的所有CSS规则将它们完全排除:

// Components w/ JavaScript
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";

您还可以删除内置在Bootstrap包中的默认字体图标(glyphicon)。首先，您需要从字体文件夹（/fonts）中删除所有的glyphicon-*文件。然后在bootstrap.less注释下面的import语句:
@import "glyphicons.less";
在您完成了不使用这些组件的注释之后，编译bootstrap.less形成bootstrap.css，如前一章所讨论的那样。这样可以减小CSS文件的大小。

把所有CSS文件压缩成一个文件

在开发了您的网站的模板之后，您可能会留下一个版本的Bootstrap的CSS文件和多个自定义的CSS文件。您可以将所有这些文件合并到一个CSS文件中，这将有助于减少HTTP请求的数量，以及所有CSS文件的合并大小。这样可以减小CSS文件的大小。

有一些工具可以帮助您进行压缩过程。我最喜欢的一个是来自Twitter的Recess，这是一个用于CSS的开源质量工具。您可以在这个网站上了解如何安装和使用Recess。(http://www.sitepoint.com/optimizing-css-stylesheets-recess/)

让我们首先将所有CSS文件合并到一个名为application.CSS的主文件中。这可以使用CSS的@import语句来完成:

@import url("bootstrap.min.css");
@import url("myCSSFile1.css");
@import url("myCSSFile2.css");
@import url("myCSSFile3.css");
@import url("myCSSFile4.css");

您需要确保在import语句中为application.css提供相对路径。

接下来，在终端运行下列命令:

recess path/to/application.css --compress >
➥path/to/application.min.css

这将在同一个文件夹中创建一个名为application.min.css的新CSS文件。这个新的CSS文件的大小将比原来的单独文件小得多。

压缩JavaScript

优化JavaScript文件和优化CSS文件同样重要。Bootstrap提供了灵活的选项，可以删除我们在项目中不使用的任何不想要的JavaScript插件。这可以极大地减少主JavaScript文件bootstrap.js的大小。

使用压缩的Bootstrap JavaScript

如果您希望能够使用所有的Bootstrap的JavaScript插件，在将项目用于生产环境时,您应该引用压缩过的文件bootstrap.min.js文件而不是bootstrap.js。

移除未使用的Bootstrap JavaScript插件

就像我们为CSS组件所做的一样，您可以切换到Bootstrap的自定义页面，并在下载之前不选择任何不需要使用的JavaScript插件。这可能是最简单的从Bootstrap删除不需要的JavaScript插件的方法。

Bootstrap的每个JavaScript插件也都有一个单独的.js文件。例如，模式对话框(modals)有modals.js，幻灯片插件（carousel）有carousel.js。只有当您下载了Bootstrap的源代码包时，你才可以访问这些单独的文件。

转到源码包
通过在Bootstrap下载页面中选择下载源选项，可以获得Bootstrap的源包。

下载后，你可以到js文件夹找到所有的与每个Bootstrap的JavaScript插件相关的js文件。然后，您可以将这些文件包含在您想要使用的项目中。

把所有的JavaScript文件放在一起

就像CSS一样，把所有的JavaScript文件压缩成一个文件也是一个好主意。js文件。我最喜欢的一个JavaScript压缩工具是CompressJS，它是在GitHub页面上找到的，可以下载这个包。使用压缩js，你必须提供所有.js文件的路径，用空格间隔。

这里是示例：

$ ./compressjs.sh jquery.min.js bootstrap.min.js
➥myCustomJavaScript.js

该命令将编译所有的JavaScript文件并在单个文件中生成输出.js文件。它向压缩文件提供一个随机名称，并告诉您文件名。如果你有很多JavaScript文件，你可以把它们都放在一个文件夹里，然后把它们汇编在一起:

$ ./compressjs.sh scripts/*.js

终端输出应该类似于图6.1。

图6.1

压缩图片

网页加载缓慢通常是图像导致的。想象一下，我们需要在500px的分辨率下显示分辨率为500px的图片，但我们的分辨率是2000px，分辨率为2000px。我们可以使用Bootstrap的助手类img-responsive，将更大的图像放入宽高都是500px的<div>中;然而，当助手类帮助正确显示图像时，它实际上并没有减少图像的文件大小。不幸的是，Bootstrap缺乏解决这个问题的工具。

有一些服务器端工具可以识别特定图像的请求类型，然后在服务之前调整图像的大小。我使用的一些工具是Adaptive Images5和TimThumb 6，但我不会在本书中介绍它们，因为它们是服务器端工具。安装和使用说明可以在他们的官方网站上使用。

避免常见的陷阱

到目前为止，您将理解Bootstrap是构建响应性网站的最佳框架之一。有了Bootstrap，就没有必要开发一个单独的移动版本的网站。可以在任何类型的设备上查看单个响应版本。

然而，有一些常见的陷阱，在开发响应性网站时，引导开发人员经常会陷入其中。这些问题可以让你的网站在较小的设备中缓慢而不响应，所以要注意它们:

为特定设备使用不同的HTML标记:
新手开发人员经常利用Bootstrap的响应性实用功能，如hidden-sm和visible-sm，以在网站上显示各种组件的显示。他们在一个文档中编写不同版本的HTML标记，然后使用这些HTML标记助手类，按浏览器窗口大小来切换组件显示。通过这样做，他们忘记了HTML页面的总体大小正在增加，这将减慢呈现过程。因此，建议使用Bootstrap的网格系统在所有大小的浏览器中动态调整相同的HTML标记。【注：个人认为这是页面设计时的问题，应该和产品设计人员协商解决】

以IE8及以下版本为目标开发Bootstrap应用：
我看到了一些大型组织，它们的目标仍然是与Internet Explorer 8版本兼容。尽管Bootstrap提供了对IE8的支持，但是有一些CSS3属性将无法在它中工作，比如边框半径和框阴影。因此，如果你的目标受众是IE8和更低的，最好避免使用Bootstrap。事实上，您绝对不应该在使用IE7和以下的对象的应用程序中使用Bootstrap 3。【注：本书是2013年出版的】

利用Bootstrap实现移动端混合应用
您应该避免使用Bootstrap创建基于Web技术开发的混合应用程序，然后移植到移动平台中。对于此类应用程序，Bootstrap可能太重度了。您可以使用棘轮框架（Ratchet），特别是用于创建移动应用程序。棘轮(Ratchet)来自和Bootstrap相同的团队，你可以在这个网站上了解更多：8 http://www.sitepoint.com/prototype-mobile-apps-easily-ratchet/

Bootstrap团队通过修复已知问题和添加新特性来发布新版本。您还可以检查Bootstrap的官方问题页面，以跟踪当前已知问题与Bootstrap 3。链接是https://github.com/twbs/bootstrap/issues

走向何方

常言道:“熟能生巧。”你练习Bootstrap的次数越多，你对设计的控制就越好。
实践的一种方法是尝试使用引导重新设计流行的响应网站的设计。以下是你可以从以下网站获得灵感的网站列表:
■ Hudson's Bay Company http://www3.hbc.com/
■ Dribbble http://dribbble.com/
■ Google+ http://plus.google.com
■ Pinterest http://www.pinterest.com
■ Zurb http://www.zurb.com
■ Sony http://www.sony.com
■ Microsoft http://www.microsoft.com
■ Bootstrap http://getbootstrap.com

我们已经在本书中看到了一些内置的引导插件，但也值得研究一些第三方引导插件，因为它们可以为站点添加强大的功能。这里是最受欢迎的几款：
■ FuelUX，网址：https://github.com/ExactTarget/fuelux/tree/3.0.0-wip
增加了各种流行的功能如DatePicker，复选框，组合框，装载机，药盒，和树。
■ Jasny Bootstrap，网址：http://jasny.github.io/bootstrap/
它提供了一下Bootstrap 3没有包含的功能，例如:off canvas(屏幕上的滑动菜单，类似于移动设备的应用程序),row link(转换表的行为可点击的链接)、input mask(强制用户以特定格式输入数据)、file input(一个时髦的文件输入项)。
■ Bootstrap Lightbox，网址：http://www.jasonbutz.info/bootstrap-lightbox/
一个Bootstrap图像灯箱。
■ Bootstrap Image Gallery，网址：http://blueimp.github.io/Bootstrap-Image-Gallery/)
一个功能齐全，易于使用的Bootstrap图像库
■ Bootstrap Notifications，网址：http://goodybag.github.io/bootstrap-notify/
它提供了在屏幕上任意位置显示通知的功能。
■ Bootstrap Markdown，网址：http://toopay.github.io/bootstrap-markdown/
它用Bootstrap提供了标签编辑工具
■ Bootstrap Colorpicker，网址：http://www.eyecon.ro/bootstrap-colorpicker/
一个颜色拾取盒
■ Bootstrap Star Rating，网址：http://plugins.krajee.com/star-rating
一个星级评级系统

您应该在即将到来的项目中尝试Bootstrap，以了解它所承诺的快速开发环境。你也可以按照在这些网站的Bootstrap教程探索更多。
继续Bootstrap！