基于Bootstrap的H5響應(yīng)式網(wǎng)站優(yōu)化設(shè)計(jì)與實(shí)現(xiàn)

原方亮 劉占方 鄭州大學(xué)

引言：據(jù)數(shù)據(jù)統(tǒng)計(jì)近些年使用移動(dòng)互聯(lián)網(wǎng)的用戶數(shù)量一直在增長(zhǎng)，使用智能手機(jī)、平板電腦的用戶已經(jīng)大大超過(guò)PC用戶，響應(yīng)式布局從而走進(jìn)人們視野。但在國(guó)內(nèi)，企業(yè)如果去做上檔次點(diǎn)的響應(yīng)式網(wǎng)站，往往花費(fèi)技術(shù)成本會(huì)比較高，而如果企業(yè)使用響應(yīng)式網(wǎng)站建模，雖然這種方法費(fèi)用不高，但這種建模做的響應(yīng)式網(wǎng)站往往“撞衫率”很高，在這種情況下用Bootstrap框架去開(kāi)發(fā)響應(yīng)式網(wǎng)站就成了性價(jià)比很高的選擇。因?yàn)槠胀ňW(wǎng)頁(yè)開(kāi)發(fā)者只要具備基本的前端技術(shù)能力，就可以通過(guò)短時(shí)間的學(xué)習(xí)后上手使用Bootstrap進(jìn)行快速地開(kāi)發(fā)，而且Bootstrap不僅兼容大部分JQuery插件，還在JQuery的基礎(chǔ)上進(jìn)行了交互體驗(yàn)和網(wǎng)站風(fēng)格個(gè)性化的改善。

1 關(guān)于Bootstrap及響應(yīng)式核心技術(shù)

1.1 Bootstrap

Bootstrap是Twitter公司開(kāi)發(fā)的一個(gè)基于HTML、CSS和JavaScript的技術(shù)框架，此框架融合了最新的前端技術(shù)，它簡(jiǎn)單靈活使開(kāi)發(fā)便捷，有樣式化的參考文檔，而且開(kāi)放式的代碼庫(kù)讓開(kāi)發(fā)者可以按自己的想法進(jìn)行發(fā)揮，這也使得其代碼庫(kù)更加豐富。Bootstrap提供的響應(yīng)式開(kāi)發(fā)功能在國(guó)內(nèi)很受到歡迎，并且擁有龐大的用戶基礎(chǔ)和實(shí)踐基地。

相比其它框架，Bootstrap在開(kāi)發(fā)響應(yīng)式方面有很多的優(yōu)勢(shì)，如：Bootstrap框架被大多數(shù)瀏覽器和設(shè)備支持，不僅為PC端網(wǎng)頁(yè)提供了導(dǎo)航、模態(tài)框、圖片輪播等豐富的Web組件，還為移動(dòng)開(kāi)發(fā)提供了平穩(wěn)的開(kāi)發(fā)平臺(tái)。

1.2 響應(yīng)式的核心技術(shù)

首先，彈性布局。根據(jù)不同尺寸屏幕動(dòng)態(tài)地對(duì)布局做出調(diào)整，如果用Bootstrap做響應(yīng)式就是用網(wǎng)格系統(tǒng)進(jìn)行柵格布局，網(wǎng)格系統(tǒng)的原理是用百分比劃分區(qū)域，Bootstrap為超小設(shè)備（＜768）、小型設(shè)備（＞768）、中型設(shè)備（＞992）、大型設(shè)備（＞1200）提供了不同的引用前綴，使網(wǎng)頁(yè)可以根據(jù)屏幕的寬度去調(diào)整頁(yè)面的寬度以及各模塊的百分比占比，以此來(lái)適應(yīng)不同尺寸屏幕。

其次，媒體查詢。根據(jù)不同分辨率尺寸改變相應(yīng)樣式或已添加的前綴，從而實(shí)現(xiàn)在不同尺寸屏幕下改變網(wǎng)頁(yè)的視口大小，顯示、隱藏或移動(dòng)內(nèi)容，媒體查詢也是網(wǎng)格系統(tǒng)得以實(shí)現(xiàn)的關(guān)鍵。媒體查詢可以在HTML或CSS中進(jìn)行，主要用到@media screen and ( ){} 語(yǔ)句。

最后，彈性圖片。如果同一張圖片在不同尺寸的屏幕下引用不同尺寸的圖片，用戶在使用手機(jī)端時(shí)就不會(huì)浪費(fèi)其數(shù)據(jù)流量而且防止加載速度過(guò)慢，從而讓用戶在不同端都有好的體驗(yàn)。方法主要有使用picture標(biāo)簽、srcset搭配sizes、SVG圖片運(yùn)用和使用JQuery判斷。

2 響應(yīng)式布局的優(yōu)化和和常見(jiàn)問(wèn)題的解決

筆者在實(shí)際工作實(shí)踐中，總結(jié)出在響應(yīng)式開(kāi)發(fā)中能夠優(yōu)化的部分和一些問(wèn)題的解決方法，下面將羅列出典型的幾個(gè)，處理好這些問(wèn)題只為讓網(wǎng)站性能和用戶的體驗(yàn)更好。

2.1 響應(yīng)式布局的優(yōu)化

2.1.1 部分樣式運(yùn)用CSS預(yù)處理技術(shù)Sass來(lái)編寫(xiě)

CSS的傳統(tǒng)語(yǔ)法是各個(gè)元素都有獨(dú)立變化的樣式，Sass出現(xiàn)讓CSS能使用變量、簡(jiǎn)單的邏輯程序、函數(shù)等一些編程特性，方便代碼的維護(hù)。

開(kāi)發(fā)者可以通過(guò)Sass嵌套地將元素的樣式組合在一起，這種嵌套的寫(xiě)法讓“凌亂”的CSS傳統(tǒng)樣式變的有層次和條理，并且減少重復(fù)的樣式代碼。

Sass可以為網(wǎng)站整體的主題色、字體大小、相同尺寸的模塊來(lái)定義一個(gè)變量，在后期想改的時(shí)候只需要改變變量的值而不用去一一做修改，比如在不同的節(jié)日企業(yè)想換官網(wǎng)的主題色，只需要改一處主題色的變量值就可以實(shí)現(xiàn)。

2.1.2 對(duì)CSS、JavaScript、在線 Bootstrap 的處理

內(nèi)嵌或引入的JavaScript應(yīng)盡量放在頁(yè)面的底部，這是由于瀏覽器是從上往下對(duì)HTML文件進(jìn)行渲染的，頁(yè)面加載到JavaScript代碼或JavaScript文件引入時(shí)就會(huì)暫停并等待JavaScript執(zhí)行完畢才會(huì)繼續(xù)往后執(zhí)行，如果放在前面，用戶就需要在頁(yè)面加載上等待更多的時(shí)間，所以將JavaScript文件放在底部能對(duì)網(wǎng)站性能有一些優(yōu)化。

現(xiàn)在網(wǎng)上有很多代碼的壓縮和解壓工具，如果對(duì)CSS和JavaScript進(jìn)行代碼壓縮，可以減少頁(yè)面的大小從而優(yōu)化加載時(shí)間，在需要調(diào)試代碼時(shí)再用解壓工具進(jìn)行解壓即可。

如果打開(kāi)用Bootstrap做的頁(yè)面都需要加載半天的情況時(shí)，可能是因?yàn)锽ootstrap在線調(diào)用谷歌網(wǎng)站上的資源造成的，這種情況下只需要把所有在線調(diào)用的代碼置空就可以了。

2.1.3 運(yùn)用瀏覽器緩存來(lái)減少HTTP請(qǐng)求次數(shù)

首先是在圖片的引用上，可以用＜img src="data：img/banner.png"＞來(lái)引用圖片，普通的引用方式＜img src="img/banner.png"＞由于src后面是一個(gè)網(wǎng)頁(yè)地址所以會(huì)觸發(fā)一次http請(qǐng)求，而加“data：”后就成為了網(wǎng)頁(yè)的內(nèi)容，用戶在下一次打開(kāi)后就不用加載，這樣做雖然增加了一些網(wǎng)頁(yè)大小，但會(huì)減少http請(qǐng)求次數(shù)提升網(wǎng)站性能，還可以通過(guò)ajax異步請(qǐng)求來(lái)使前端去緩存一些不經(jīng)常變化的數(shù)據(jù)，來(lái)減少http請(qǐng)求次數(shù)。

因?yàn)橛脩粼谑謾C(jī)端相比PC端有一個(gè)流量的問(wèn)題，所以減少http請(qǐng)求次數(shù)也可以為用戶節(jié)約流量。

2.1.4 頁(yè)面實(shí)現(xiàn)逐次加載

移動(dòng)端畢竟在屏幕大小、信息量展示以及流量方面有限，所以在設(shè)計(jì)移動(dòng)端時(shí)可以用比如瀑布流的方式進(jìn)行逐次加載，這樣用戶所等待的加載時(shí)間少，而且在用戶不需看未加載的部分時(shí)此部分也沒(méi)有加載，減少了用戶的流量消耗，而在想看時(shí)做出相應(yīng)的滑動(dòng)手勢(shì)即可加載出相應(yīng)的內(nèi)容，用這種加載方式代替?zhèn)鹘y(tǒng)的一次性把內(nèi)容加載完畢的方式也是一種在用戶體驗(yàn)和網(wǎng)站性能上的優(yōu)化。

2.2 響應(yīng)式布局常見(jiàn)問(wèn)題的解決

2.2.1 關(guān)于Bootstrap的banner輪播問(wèn)題。

問(wèn)題一：Bootstrap自帶的圖片輪播如果需要自動(dòng)輪播，需要在＜div id="carousel-ad" class="carousel slide"＞標(biāo)簽里加上輪播的初始化 data-ride="carousel" 和設(shè)置輪播的間隔時(shí)間datainterval="3000"，這樣再打開(kāi)頁(yè)面后雖然會(huì)自動(dòng)輪播，但如果用戶點(diǎn)擊了banner圖或者鼠標(biāo)在banner圖上滑動(dòng)幾下，自動(dòng)輪播就會(huì)停止，這個(gè)框架上的問(wèn)題會(huì)影響用戶的體驗(yàn)。

問(wèn)題二： Bootstrap的banner圖高度，是根據(jù)屏幕的寬度變小而等比例變小，在這種情況下，banner圖等比例縮小至移動(dòng)端設(shè)備的寬度時(shí)，文字鏈接模塊的高度可能會(huì)超出banner的高度而展示不正常。

上面兩點(diǎn)問(wèn)題，可通過(guò)找一個(gè)能正常輪播的JQuery插件代替Bootstrap自帶的圖片輪播，然后基于這個(gè)插件用@media進(jìn)行媒體查詢，在不同設(shè)備的尺寸范圍內(nèi)，給banner圖定不同的并且合適的高度。

2.1.2 PC端的hover在移動(dòng)端的處理。

在PC端有hover但在移動(dòng)端就沒(méi)有了，有時(shí)候在PC端做的鏈接如果加了hover會(huì)發(fā)現(xiàn)切換到移動(dòng)端后，點(diǎn)第一次變成hover的樣式，點(diǎn)第二次才會(huì)跳轉(zhuǎn)到對(duì)應(yīng)鏈接。這時(shí)可通過(guò)給body上綁定一個(gè)touchstart事件，便能解決。

2.1.3 彈出的模態(tài)框被遮罩遮住。

出現(xiàn)這個(gè)情況最可能是因?yàn)槟B(tài)框代碼的位置不合適造成的，正確的位置是放在HTML文件的跟元素內(nèi)，也就是緊跟著body元素，這樣就可以減少其它部分的代碼或模塊對(duì)模態(tài)框造成影響。

3 展望

除了本文總結(jié)的基于Bootstrap的響應(yīng)式網(wǎng)站所存在的一部分問(wèn)題外，還有種種其它或大或小的問(wèn)題，但基于此框架做的響應(yīng)式網(wǎng)站仍然是瑕不掩瑜，這種開(kāi)發(fā)方式還是會(huì)被越來(lái)越多的企業(yè)青睞。在用Bootstrap框架做響應(yīng)式設(shè)計(jì)時(shí)，也應(yīng)該多考慮和設(shè)計(jì)好一些交互上的東西，畢竟這是用戶體驗(yàn)上最直接的部分，設(shè)計(jì)者在設(shè)計(jì)時(shí)應(yīng)該更多得考慮響應(yīng)式網(wǎng)頁(yè)在不同端模塊的分布以及適合所在端的頁(yè)面交互，響應(yīng)是本，交互是質(zhì)，設(shè)計(jì)是根，把用戶所可能接觸到的方方面面都設(shè)計(jì)好，才會(huì)讓自己所做的響應(yīng)式網(wǎng)站有更好的用戶體驗(yàn)和得到更多的關(guān)注度。