腳本之家服務器常用軟件

快捷導航

Bootstrap優(yōu)化站點資源、響應式圖片、傳送帶使用詳解3

更新時間：2016年10月14日 10:01:25 作者：葉超Luka

這篇文章主要介紹了Bootstrap優(yōu)化站點資源、完成響應式圖片、讓傳送帶支持手勢的相關知識,具有一定的參考價值，感興趣的小伙伴們可以參考一下

優(yōu)化Bootstrap站點資源、完成Bootstrap響應式圖片、讓傳送帶支持手勢，具體內(nèi)容如下

A.優(yōu)化站點資源

速度很重要。用戶很關心。我們的站點必須加載夠快，否則用戶就會走人。SEO 也很重要。我們的站點必須加載夠快，否者搜索排名就會下降。

明白了這樣，我們就來清點一下【Bootstrap】2.作品展示站點中的資源。特別的，來看一看我們能控制的、影響頁面速度的重要因素 —— 文件大小，包括圖片、CSS和 JavaScript 文件。只要簡單幾步，我們就可以給這些文件“瘦身”，縮短加載時間。

A.1 優(yōu)化圖片

這些圖片都通過 Photoshop 的 “保存為 Web 格式” 進行了一定程度的優(yōu)化。但是，所有圖片加載一塊，也有719 KB。

這些作品很重要。（比較是個人作品站點。）可是，這些個體也確實大了一些。通過更有效的壓縮，能減少文件大小。

要減少文件大小，同時又不會損害圖片質(zhì)量，可以使用一些工具，比如 Yahoo! 的 Smushit:http://www.smushit.com/（國內(nèi)貌似不能訪問）

對于 Mac 用戶，免費的 ImageOptim 應用（https://imageoptim.com/mac）也能達到類似的目的。筆者使用該應用，把整體大小減少了50.2 KB 。

A.2 優(yōu)化CSS

先看看為優(yōu)化的樣式表 main.css 的文件多大：

134 KB! 任何負責的開發(fā)者都不會讓這么一個小網(wǎng)站帶那么大的樣式表。

好消息時，我們可以輕易把這個大小減半。利用 Bootstrap 的模塊化 LESS 方案，可以立即縮小 CSS，步驟如下：

(1) 開發(fā) less/__main.less;

(2) 注釋掉不需要的 LESS 文件，比如這些：

//@import "bootstrap/glyphicons.less";
...
//@import "bootstrap/dropdowns.less";
//@import "bootstrap/button-groups.less";
//@import "bootstrap/input-groups.less";
...
//@import "bootstrap/breadcrumbs.less";
//@import "bootstrap/pagination.less";
//@import "bootstrap/pager.less";
//@import "bootstrap/labels.less";
//@import "bootstrap/badges.less";
//@import "bootstrap/jumbotron.less";
//@import "bootstrap/thumbnails.less";
//@import "bootstrap/alerts.less";
//@import "bootstrap/progress-bars.less";
//@import "bootstrap/media.less";
//@import "bootstrap/list-group.less";
//@import "bootstrap/panels.less";
//@import "bootstrap/responsive-embed.less";
//@import "bootstrap/wells.less";
//@import "bootstrap/close.less";
...
//@import "bootstrap/modals.less";
//@import "bootstrap/tooltip.less";
//@import "bootstrap/popovers.less";

(3) 當然得小心一點，否則一不留神就可能注釋掉必要的文件。因為時候要花點時間重編譯，全面測試一下。

(4) 注釋掉不必要的文件后，選擇編譯器中的最小化（或者壓縮輸出）選項，最后重編譯以便，保存問 css/main.css 。

(5) 再看看文件有多大。我這里的結果是 91KB。減少了43KB。

當然，你還可以優(yōu)化得再細一些。比如，可以打開每個保留的LESS文件，再把其中沒有必要的代碼一行一行注釋掉。

最后，我們來看看如何優(yōu)化 JavaScript。

A.3 優(yōu)化JavaScript

為優(yōu)化JavaScript，我們要把 plugins.js 文件中的 Bootstrap 插件，替換成只剩我們用到的幾個。然后再重新壓縮文件。

(1) 打開 js/plugins.js

(2) 刪除屬于 bootstrap.min.js 的代碼塊

(3) 打開 js/bootstrap 文件夾，這里保存著 Bootstrap 插件的獨立文件。組個打開系列文件，將他們的代碼復制到 plugins.js 文件里，這三個插件是我網(wǎng)站中用到的：

□ carousel.js

□ collapse.js

□ transition.js

(4) 保存"瘦身"版的 plugins.js 文件，刷新瀏覽器試試

□ 確保響應式導航條在窄視口中能夠折疊，并且單擊按鈕可以展開下拉列表；

□ 確保傳送帶一切如常。

如果都沒有問題，說明已經(jīng)寶航了所需要的 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 是最終文件，縮小并去掉空格串聯(lián)的版本。

最終文件只相當于原來的四分之一。

A.4 優(yōu)化結果

總體來看，我們的優(yōu)化工作取得了成效。把圖片、CSS 和 JavaScript 都算一塊，原來的大小是885 KB。

優(yōu)化之后，變成了 769 KB，節(jié)省了116 KB，超過了 10%，

事實上，我們還能夠繼續(xù)優(yōu)化，尤其是針對小屏設備，方法就是實現(xiàn)響應式圖片。

B.實現(xiàn)響應式圖片

如果我們秉承移動友好的開發(fā)宗旨，那么就需要選擇一種響應式圖片技術。

B.1 分析作品傳送帶

在【Bootstrap】2.作品展示站點的個人作品網(wǎng)站中，傳送帶中圖片是為全寬布局設計的，寬度時 1600px，大小為 135~189 KB。把這么大的圖片發(fā)送到手機和非視網(wǎng)膜屏的平板中就過分了。在移動優(yōu)先響應式設計的時代，這樣做又是不負責任的。

而且，如果再看一看小屏幕中的顯示效果，你可能會發(fā)現(xiàn)傳送帶中的圖片應該更高點、窄點才好，因為窄屏幕垂直方向向上空間相對富余一些。

在手機屏幕那么寬的視口中，我們的圖片，為大屏幕準備的圖片，是可以顯示，但如果能夠更多利用垂直空間，效果會更好。這一點通過下面的屏幕截圖可以看出來：

好的響應式圖片技術，應該能讓我們?yōu)樾∑聊惶峁┻m當?shù)膱D片，滿足小文件、快速加載，以及改進設計的要求。

B.2 選擇方案

本書作者推薦的是 Picturefill 技術。Picturefill 方案較好地平衡了性能和設計問題，而且方案也相當簡單。

PS:相關文章：https://www.smashingmagazine.com/2013/07/choosing-a-responsive-image-solution/（這篇文章比較早了，建議還是直接看官方文檔）

Picturefill 實現(xiàn)想飲食圖片只需簡單幾步：

(1) 準備好針對目標視口的理想圖片；

(2)下載并包含 Picturefill 的 JavaScript 文件；

(3) 用 Picturefill 的標記模式來引入圖片。

一如往常，實際開發(fā)過程還有兩個步驟：

□ 測試；

□ 按需調(diào)整。

下面我們就一步一步來做。

B.2.1 準備響應式圖片

此書的源碼中已經(jīng)準備好了特殊尺寸和經(jīng)過優(yōu)化的圖片，方便起見，我們把它們直接拷貝到我們的 img文件夾下：

打開這個圖片，會發(fā)現(xiàn)它們更窄一些，長寬比更小。這是為了像下面這樣在窄視口中更多利用垂直空間：

當然，圖片也小一些，900px × 600px，保證在視網(wǎng)膜屏中也能有足夠的像素，但比起初的1600px × 800px 就小多了.。這些小圖片平均都比原來的大圖片小50%以上。

圖片準備好以后，接下來該 JavaScript 上場了。

B.2.2 使用 JavaScript

Picturefill 的文件及文檔位于 GitHub，地址是：https://github.com/scottjehl/picturefill

大家可以花點時間看看文檔。我們一會就要用到文檔中推薦的元素。我們要先下載該文件，解壓縮后，找到 picturefill.min.js，然后把它復制到 plugins.js 文件中。

接下來，按照 Picturefill的約定準備標記。

B.2.3 修改標記結構

在 html 文檔中，修改每張圖片的標記，使用 Picturefill 的 picture 元素的模式。這里的標記默認采用小圖片，但視口在 640px 及以上的瀏覽器和IE8例外。

一下就是修改后第一張圖片的標記。

<picture>
 <source srcset="img/okwu.jpg" media="(min-width:640px)" />
 <img srcset="img/okwu-sm.jpg" alt="OKWU.edu Homepage" />
</picture>

然后依次修改剩余的圖片標記就可以了。

B.2.4 測試與調(diào)整

保存并測試，你會發(fā)現(xiàn)這一次傳送帶的圖片不會調(diào)整適應屏幕寬度了。這是因為 Picturefill的標記沒有使用 Bootstrap 傳送帶樣式中的選擇符。

我們的修改 _carousel.less 文件中相應的選擇符，好讓圖片撐滿可用空間，步驟如下：

(1) 打開 _carousel.less

(2) 搜索到注釋// Account for jankitude on images ，把 > img 和 >a >img 子選擇符，替換成簡單點的后代 img 選擇符，以便選中現(xiàn)在在Picturefill 標記中嵌套較深的圖片：

// Account for jankitude on images
//> img,
//> a > img,
img { //added to apply to Picturefill responsive image solution
 &:extend(.img-responsive);
 line-height: 1;
 min-width:100%; //added
 height:auto; //added
 ...

問題就這樣解決了。

B.3 最終的結果

在視口小于640ps時，傳送帶應該使用較小但相對較高的圖片。

以此為起點，大家可以參考 Picturefill 的文檔，根據(jù)需要再調(diào)整和適配自己需要的版本。

C.讓傳送帶支持手勢

在觸摸屏設備中，支持手勢輕掃來切換傳送帶圖片是一個非常實用的功能。

C1.有什么選擇

如果只是要讓傳送帶之處輕掃手勢，只要一個 JavaScript 插件和幾行代碼就可以了。Justin Lazanowski 專門為實現(xiàn) Bootstrap 3 傳送帶的手勢交互寫過一篇文章，提到三種選擇。文章地址為：http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/

這里將使用 jQuery插件 TouchSwipe，其GitHub 地址為：https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

使用這個插件，可以通過下列步驟讓傳送帶支持輕掃手勢：

(1) 把 TouchSwipe 插件包含到我們的插件文件中；

(2) 在 main.js 文件中寫幾行調(diào)用代碼。

C.2 取得并包含 TouchSwipe 插件

下載后解壓縮，找到jquery.touchSwipe.min.js 文件，把其中的代碼復制到 plugins.js 中。這樣，插件就位了。接下來需要調(diào)用它。

C.3 調(diào)用 TouchSwipe

需要寫一行代碼，命令 TouchSwipe 監(jiān)聽傳送帶上的輕掃事件，然后將其轉(zhuǎn)換成 Bootstrap 的方法調(diào)用：.carousel('prev') 和 .carousel('next')。關于這些方法，可以參考 Bootstrap 的文檔：http://getbootstrap.com/javascript/。

接下來的事很簡單，只需下列幾步：

(1) 打開項目中的 main.js 文件。

(2) 在其中添加如下代碼：

//Enable swiping...
 $(".carousel-inner").swipe({
 swipe: function (event, direction, distance, duration, fingerCount, fingerData) {
 if (direction == "right") {//向右劃
 //Cycles to the next item.
 $(this).parent().carousel("prev");
 } else if (direction == "left") {//向左劃
 //Cycles to the previous item.
 $(this).parent().carousel("next");
 }
 }
 });

(3) 保存后刷新，就可以通過左、右輕掃來切換圖片了。效果圖如下：