時(shí)下SPA單頁(yè)應(yīng)用如火如荼,對(duì)前端乃至后端開發(fā)都帶來(lái)不小的沖擊和變革。筆者整理了下筆記,決定寫一下以前基于iframe做單頁(yè)博客的一些經(jīng)驗(yàn)方法。
對(duì)于單頁(yè)應(yīng)用,筆者沒(méi)有找到最官方的定義。在筆者看來(lái),在用戶操作過(guò)程中,瀏覽器始終不會(huì)重載整個(gè)頁(yè)面的web應(yīng)用,便可以稱為單頁(yè)應(yīng)用。這里不包括https://im.qq.com/這種宣傳單頁(yè)
例如coding.net、網(wǎng)易云音樂(lè)播放、QQ空間、移動(dòng)端大量的react案例(比如手Q健康、公眾號(hào))等等
單頁(yè)站點(diǎn)優(yōu)劣
單頁(yè)站點(diǎn)的優(yōu)勢(shì)主要有三點(diǎn)
傳輸數(shù)據(jù)少
單頁(yè)站點(diǎn)的重點(diǎn)是局部刷新,因此每次更新,傳輸?shù)臄?shù)據(jù)少,減少后端壓力,甚至對(duì)于完全前后端分離的SPA應(yīng)用,只需要傳輸少量json數(shù)據(jù)即可。這一點(diǎn)在移動(dòng)端顯得尤為重要,許多應(yīng)用前端代碼并不會(huì)頻繁更新,完全可以由前端直接緩存起來(lái),每次使用只需與后端交互少量數(shù)據(jù),這樣既省流量也能讓用戶獲得接近native的體驗(yàn)
服務(wù)可不中斷
一些特殊網(wǎng)站,如音樂(lè)播放、IM聊天等,不希望因?yàn)轫?yè)面全部重載造成服務(wù)中斷。單頁(yè)應(yīng)用因?yàn)榫植克⑿?,可以將這些服務(wù)放置在刷新范圍之外,持續(xù)提供服務(wù)
前后端開發(fā)更規(guī)范
前端也可按照MVC的模式更好的模塊化開發(fā),而后端開發(fā)僅僅只需要開發(fā)數(shù)據(jù)操作接口,對(duì)前后端開發(fā)而言都是一種解放
但單頁(yè)站點(diǎn)也帶來(lái)了一些新的問(wèn)題,比如
首次加載數(shù)據(jù)大耗時(shí)長(zhǎng)
特別是目前基于angular或者react的純前后端分離的SPA,結(jié)合一些javascript方言,編譯出來(lái)js相當(dāng)?shù)拇螅P者曾在內(nèi)網(wǎng)親眼目睹10M級(jí)別的js文件,即便以內(nèi)網(wǎng)的網(wǎng)速首次打開也需要3秒左右。為每個(gè)模塊單獨(dú)編譯js是種辦法,但實(shí)際操作會(huì)可能發(fā)現(xiàn),隨著項(xiàng)目越做越大,拆分成獨(dú)立模塊編譯的成本會(huì)越來(lái)越大,最終不得不委曲求全整站使用一個(gè)js,除非從一開始就有良好的規(guī)范限制。