時(shí)下SPA單頁(yè)應(yīng)用如火如荼，對(duì)前端乃至后端開(kāi)發(fā)都帶來(lái)不小的沖擊和變革。筆者整理了下筆記，決定寫(xiě)一下以前基于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ù)
前后端開(kāi)發(fā)更規(guī)范
前端也可按照MVC的模式更好的模塊化開(kāi)發(fā)，而后端開(kāi)發(fā)僅僅只需要開(kāi)發(fā)數(shù)據(jù)操作接口，對(duì)前后端開(kāi)發(fā)而言都是一種解放
但單頁(yè)站點(diǎn)也帶來(lái)了一些新的問(wèn)題，比如
首次加載數(shù)據(jù)大耗時(shí)長(zhǎng)
特別是目前基于angular或者react的純前后端分離的SPA，結(jié)合一些javascript方言，編譯出來(lái)js相當(dāng)?shù)拇?，筆者曾在內(nèi)網(wǎng)親眼目睹10M級(jí)別的js文件，即便以內(nèi)網(wǎng)的網(wǎng)速首次打開(kāi)也需要3秒左右。為每個(gè)模塊單獨(dú)編譯js是種辦法，但實(shí)際操作會(huì)可能發(fā)現(xiàn)，隨著項(xiàng)目越做越大，拆分成獨(dú)立模塊編譯的成本會(huì)越來(lái)越大，最終不得不委曲求全整站使用一個(gè)js，除非從一開(kāi)始就有良好的規(guī)范限制。
