TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)(5)
其實(shí),使用第二種方法有明顯的好處。第一是,html文件體積比json文件小,加載量減少;第二是直接使用html文件,減少了JS動(dòng)態(tài)生成結(jié)構(gòu)的開銷。
2.3 延時(shí)加載
對(duì)于一組有加載時(shí)間間隔的資源,我們其實(shí)可以對(duì)其做加載延時(shí),按照其前后出現(xiàn)的順序,在時(shí)間間隔后即時(shí)加載下一個(gè)資源。例如輪播廣告就很適合這么做。
圖3-9 輪播廣告
2.3.1 輪播廣告
以往輪播廣告的加載模式是一次性全部加載,雖然采用延遲加載,但用戶可能不會(huì)瀏覽到所有的輪播廣告。當(dāng)用戶在首頁(yè)只停留5秒時(shí)(例如輪播廣告設(shè)置的是5秒切換一次),第二張廣告圖片以后的圖片加載就沒有必要了。
圖3-10 輪播廣告加載的請(qǐng)求瀑布圖
其實(shí)我們可以這樣,第一次加載第一張廣告圖片,當(dāng)5秒后,判斷第二張圖片是否加載過,如果沒有,加載第二張圖片,以此類推。判斷的方式很簡(jiǎn)單,我們只要在初期生成輪播廣告結(jié)構(gòu)的時(shí)候,不設(shè)置img標(biāo)簽的src屬性,然后加載時(shí)判斷這張圖片是否有src屬性,如果沒有,加載圖片并設(shè)置這個(gè)屬性。
圖3-11 判斷方式
這樣,如果用戶在首頁(yè)停留時(shí)長(zhǎng)只有14秒,那么就節(jié)省了第4、5張廣告圖片的下載量,大約有100K左右。
圖3-12 優(yōu)化后的請(qǐng)求瀑布圖
第3章 其他方式
3.1 文件壓縮
3.1.1 代碼
老生常談的方法。我們可以將代碼里多余的空格,回車,無(wú)用標(biāo)簽刪除,替換名字較長(zhǎng)的變量名等等方式減少腳本文件大小。
圖4-1 腳本壓縮對(duì)比
3.1.2 多媒體
對(duì)于圖片,不同格式,不同壓縮率都會(huì)造成圖片大小的千差萬(wàn)別。選擇一個(gè)合適并且圖片質(zhì)量可以接受的壓縮方式,可以節(jié)省很大一筆加載量。
圖4-2 圖片壓縮對(duì)比
對(duì)于視頻、音頻、Flash來(lái)說(shuō),也都一樣,碼率、格式等等方面都會(huì)對(duì)大小造成影響。
圖4-3 視頻壓縮對(duì)比
3.2 CSS 3
CSS 3是一個(gè)不算太新,但由于我朝瀏覽器限制而得不到大范圍應(yīng)用的技術(shù)。其實(shí)我們可以在一些效果表現(xiàn)不是很重要的頁(yè)面使用CSS 3來(lái)針對(duì)瀏覽器做一些差異化效果,已達(dá)到減少加載量的目的。
3.2.1 替換圖片
本文地址:http://m.likemindfilms.com/tutorial/id1321.html
您可能還喜歡
- 關(guān)于第三方注冊(cè)和本地注冊(cè)的選擇
- 8大網(wǎng)頁(yè)前端界面必備jQuery插件
- 掌上指路標(biāo) —– APP架構(gòu)與導(dǎo)航設(shè)計(jì)
- 時(shí)尚電商網(wǎng)站交互分析
- 軟件推薦為移動(dòng)設(shè)計(jì)而生-Justinmind
- TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)
- 網(wǎng)頁(yè)設(shè)計(jì)中引人入勝的引導(dǎo)頁(yè)設(shè)計(jì)
- 體驗(yàn)新版Apple AppStore ——App設(shè)計(jì)從
- 確認(rèn)按鈕在左邊,取消按鈕在右邊?
- 交互設(shè)計(jì)從登錄開始
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏