SPA： Single Page Application（單頁應(yīng)用程序）

概念：就是只有一個Web頁面的應(yīng)用，是加載單個HTML頁面，并在用戶與應(yīng)用程序交互時動態(tài)更新該頁面的Web應(yīng)用程序。

與傳統(tǒng)多頁面程序的區(qū)別：

????傳統(tǒng)多頁面程序：每次請求服務(wù)器返回的都是一個完整的頁面

????單頁應(yīng)用程序：只有第一次會加載頁面, 以后的每次請求, 僅僅是獲取必要的數(shù)據(jù).然后, 由頁面中js解析獲取的數(shù)據(jù), 展示在頁面中

優(yōu)勢：

????1 減少了請求體積，加快頁面響應(yīng)速度，降低了對服務(wù)器的壓力

????2 更好的用戶體驗，讓用戶在web app感受native app的流暢

缺點：

? ? 因為技術(shù)使用了ajax，導(dǎo)致頁面不利于SEO，但是可以通過其他技術(shù)去規(guī)避

? （SEO原則：搜索引擎的蜘蛛只識別href的一般超鏈接，而不識別JavaScript代碼，遇到一般超鏈接就會爬進去，遇到JavaScript不會爬進去。即，搜索引擎抓不到AJAX動態(tài)加載的內(nèi)容。）

? ? ? ? 1）服務(wù)端渲染? 2）頁面靜態(tài)化（專門為爬蟲準(zhǔn)備的）

主要技術(shù)點：

????1 ajax

????2 錨點的使用（window.location.hash #）

????3 hashchange 事件

實現(xiàn)思路：

????監(jiān)聽錨點值變化的事件，根據(jù)不同的錨點值，請求相應(yīng)的數(shù)據(jù)

????????1 錨點（#）原本用作頁面內(nèi)部進行跳轉(zhuǎn)，定位并展示相應(yīng)的內(nèi)容

????????2 SPA中，錨點被用作請求不同資源的標(biāo)識，請求數(shù)據(jù)并展示內(nèi)容