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