SPA（單頁面應(yīng)用）?
在傳統(tǒng)的網(wǎng)站中，不同的頁面之間的切換都是直接從服務(wù)器加載一整個新的頁面，這樣大大加重了服務(wù)器的負擔(dān)，響應(yīng)速度有波動，用戶等待的時間長且體驗感差。而在SPA這個模型中，是通過動態(tài)地重寫頁面的部分與用戶交互，而避免了過多的數(shù)據(jù)交換，響應(yīng)速度自然相對更高
在服務(wù)端放了一個html 頁面，里面有<script>//發(fā)請求，拿數(shù)據(jù)，模版引擎渲染等，$.ajax ?,</script>
客戶端發(fā)起請求，服務(wù)端把頁面（響應(yīng)的是字符串）發(fā)送過去，客戶端從上到下依次解析，如果在解析的過程中，發(fā)現(xiàn)ajax
請求，再次像服務(wù)器發(fā)送新的請求，客戶端拿到ajax 響應(yīng)結(jié)果，模板引擎渲染。
過程至少和服務(wù)端發(fā)起兩次請求
舉個栗子，請看知乎首頁
在知乎Web頁面中，一些部分是幾乎不會發(fā)生變化的，比如導(dǎo)航欄，當(dāng)我們點了某一個問題進入之后，緊接著看下圖
所以，可以看出它的導(dǎo)航欄沒有什么變化，而在傳統(tǒng)的Web網(wǎng)站中，進入了新的頁面，會從服務(wù)器請求完整的一個整個頁面，而在SPA中，當(dāng)切換到新的頁面，只需要重寫頁面發(fā)生了變化的部分。一旦頁面加載完成， SPA 不會因為用戶的操作而進行頁面的重新加載或跳轉(zhuǎn)。
SPA的優(yōu)點：
1) 有良好的交互體驗
能提升頁面切換體驗，用戶在訪問應(yīng)用頁面是不會頻繁的去切換瀏覽頁面，從而避免了頁面的重新加載；
2) 前后端分離開發(fā)
單頁Web應(yīng)用可以和 RESTful 規(guī)約一起使用，通過 REST API 提供接口數(shù)據(jù)，并使用 Ajax 異步獲取，這樣有助于分離客戶端和服務(wù)器端工作。更進一步，可以在客戶端也可以分解為靜態(tài)頁面和頁面交互兩個部分；
3) 減輕服務(wù)器壓力
服務(wù)器只用出數(shù)據(jù)就可以，不用管展示邏輯和頁面合成，吞吐能力會提高幾倍；
4) 共用一套后端程序代碼
不用修改后端程序代碼就可以同時用于 Web 界面、手機、平板等多種客戶端，后端只需要提供API
SPA的缺點：
1) SEO難度較高
由于所有的內(nèi)容都在一個頁面中動態(tài)替換顯示，所以在SEO上其有著天然的弱勢，所以如果你的站點對SEO很看重，且要用單頁應(yīng)用，那么就做些靜態(tài)頁面給搜索引擎用吧；
2) 前進、后退管理
由于單頁Web應(yīng)用在一個頁面中顯示所有的內(nèi)容，所以不能使用瀏覽器的前進后退功能，所有的頁面切換需要自己建立堆棧管理，當(dāng)然此問題也有解決方案，比如利用URI中的散列+iframe實現(xiàn)；
3) 初次加載耗時多
為實現(xiàn)單頁Web應(yīng)用功能及顯示效果，需要在加載頁面的時候?qū)avaScript、CSS統(tǒng)一加載，部分頁面可以在需要的時候加載。所以必須對JavaScript及CSS代碼進行合并壓縮處理
SEO（
搜索引擎排名優(yōu)化
）
搜索引擎優(yōu)化是一種利用搜索引擎的搜索規(guī)則來提高目前網(wǎng)站在有關(guān)搜索引擎內(nèi)的自然排名的方式。SEO是指為了從搜索引擎中獲得更多的免費流量，從網(wǎng)站結(jié)構(gòu)、內(nèi)容建設(shè)方案、用戶互動傳播、頁面等角度進行合理規(guī)劃，以提高該網(wǎng)站在搜索引擎中某些關(guān)鍵詞的搜索結(jié)果排名。
seo原理：
頁面抓?。?蜘蛛向服務(wù)器請求頁面，獲取頁面內(nèi)容
分析入庫：對獲取到的內(nèi)容進行分析，對優(yōu)質(zhì)頁面進行收錄
檢索排序：當(dāng)用戶檢索關(guān)鍵詞時，從收錄的頁面中按照一定的規(guī)則進行排序，并返回給用戶結(jié)果
seo優(yōu)化：
通過網(wǎng)站的結(jié)構(gòu)布局設(shè)計和網(wǎng)頁代碼優(yōu)化，使前端頁面既能讓瀏覽器用戶能夠看懂，也能讓“蜘蛛”看懂
(1) 網(wǎng)站結(jié)構(gòu)布局優(yōu)化：盡量簡單、開門見山，提倡扁平化結(jié)構(gòu)。
一般而言，建立的網(wǎng)站結(jié)構(gòu)層次越少，越容易被“蜘蛛”抓取，也就容易被收錄。一般中小型網(wǎng)站目錄結(jié)構(gòu)超過三級，“蜘蛛”便不愿意往下爬，“萬一天黑迷路了怎么辦”。并且根據(jù)相關(guān)調(diào)查：訪客如果經(jīng)過跳轉(zhuǎn)3次還沒找到需要的信息，很可能離開。因此，三層目錄結(jié)構(gòu)也是體驗的需要。為此我們需要做到：
1. 控制首頁鏈接數(shù)量
網(wǎng)站首頁是權(quán)重最高的地方，如果首頁鏈接太少，沒有“橋”，“蜘蛛”不能繼續(xù)往下爬到內(nèi)頁，直接影響網(wǎng)站收錄數(shù)量。但是首頁鏈接也不能太多，一旦太多，沒有實質(zhì)性的鏈接，很容易影響用戶體驗，也會降低網(wǎng)站首頁的權(quán)重，收錄效果也不好。
因此對于中小型企業(yè)網(wǎng)站，建議首頁鏈接在100個以內(nèi)，鏈接的性質(zhì)可以包含頁面導(dǎo)航、底部導(dǎo)航、錨文字鏈接等等，注意鏈接要建立在用戶的良好體驗和引導(dǎo)用戶獲取信息的基礎(chǔ)之上。
2.扁平化的目錄層次，盡量讓“蜘蛛”只要跳轉(zhuǎn)3次，就能到達網(wǎng)站內(nèi)的任何一個內(nèi)頁。扁平化的目錄結(jié)構(gòu)，比如：“植物”–> “水果” –> “蘋果”、“桔子”、“香蕉”，通過3級就能找到香蕉了。
3.導(dǎo)航優(yōu)化
導(dǎo)航應(yīng)該盡量采用文字方式，也可以搭配圖片導(dǎo)航，但是圖片代碼一定要進行優(yōu)化，<img>標簽必須添加“alt”和“title”屬性，告訴搜索引擎導(dǎo)航的定位，做到即使圖片未能正常顯示時，用戶也能看到提示文字。
其次，在每一個網(wǎng)頁上應(yīng)該加上面包屑導(dǎo)航，好處：從用戶體驗方面來說，可以讓用戶了解當(dāng)前所處的位置以及當(dāng)前頁面在整個網(wǎng)站中的位置，幫助用戶很快了解網(wǎng)站組織形式，從而形成更好的位置感，同時提供了返回各個頁面的接口，方便用戶操作；對“蜘蛛”而言，能夠清楚的了解網(wǎng)站結(jié)構(gòu)，同時還增加了大量的內(nèi)部鏈接，方便抓取，降低跳出率。
4. 網(wǎng)站的結(jié)構(gòu)布局–不可忽略的細節(jié)
1）頁面頭部：logo及主導(dǎo)航，以及用戶的信息。
2）頁面主體：左邊正文，包括面包屑導(dǎo)航及正文；右邊放熱門文章及相關(guān)文章，好處：留住訪客，讓訪客多停留，對“蜘蛛”而言，這些文章屬于相關(guān)鏈接，增強了頁面相關(guān)性，也能增強頁面的權(quán)重。
3）頁面底部：版權(quán)信息和友情鏈接。
特別注意：分頁導(dǎo)航寫法，推薦寫法：“首頁 1 2 3 4 5 6 7 8 9 下拉框”，這樣“蜘蛛”能夠根據(jù)相應(yīng)頁碼直接跳轉(zhuǎn)，下拉框直接選擇頁面跳轉(zhuǎn)。而下面的寫法是不推薦的，“首頁 下一頁 尾頁”，特別是當(dāng)分頁數(shù)量特別多時，“蜘蛛”需要經(jīng)過很多次往下爬，才能抓取，會很累、會容易放棄。
5.控制頁面的大小，減少http請求，提高網(wǎng)站的加載速度。
一個頁面最好不要超過100k，太大，頁面加載速度慢。當(dāng)速度很慢時，用戶體驗不好，留不住訪客，并且一旦超時，“蜘蛛”也會離開。
(2) 網(wǎng)頁代碼優(yōu)化
1.<title>標題：只強調(diào)重點即可，盡量把重要的關(guān)鍵詞放在前面，關(guān)鍵詞不要重復(fù)出現(xiàn)，盡量做到每個頁面的<title>標題中不要設(shè)置相同的內(nèi)容。
2.<meta keywords>標簽：關(guān)鍵詞，列舉出幾個頁面的重要關(guān)鍵字即可，切記過分堆砌。
3.<meta description>標簽：網(wǎng)頁描述，需要高度概括網(wǎng)頁內(nèi)容，切記不能太長，過分堆砌關(guān)鍵詞，每個頁面也要有所不同。
4.<body>中的標簽：盡量讓代碼語義化，在適當(dāng)?shù)奈恢檬褂眠m當(dāng)?shù)臉撕?，用正確的標簽做正確的事。讓閱讀源碼者和“蜘蛛”都一目了然。比如：h1-h6是用于標題類的，<nav>標簽是用來設(shè)置頁面主導(dǎo)航的等。
5.<a>標簽：頁內(nèi)鏈接，要加“title” 屬性加以說明，讓訪客和 “蜘蛛” 知道。而外部鏈接，鏈接到其他網(wǎng)站的，則需要加上el="nofollow"屬性, 告訴 “蜘蛛” 不要爬，因為一旦“蜘蛛”爬了外部鏈接之后，就不會再回來了。
6.正文標題要用<h1>標簽：“蜘蛛” 認為它最重要，若不喜歡<h1>的默認樣式可以通過CSS設(shè)置。盡量做到正文標題用<h1>標簽，副標題用<h2>標簽, 而其它地方不應(yīng)該隨便亂用 h 標題標簽。
7.<br>標簽：只用于文本內(nèi)容的換行
? ? ? ?8.表格應(yīng)該使用<caption>表格標題標簽
? ?9.<img>應(yīng)使用 “alt” 屬性加以說明
? 10.<strong>、<em>標簽 : 需要強調(diào)時使用。<strong>標簽在搜索引擎中能夠得到高度的重視，它能突出關(guān)鍵詞，表現(xiàn)重要的內(nèi)容，<em>標簽強調(diào)效果僅次于<strong>標簽。
<b>、<i>標簽: 只是用于顯示效果時使用，在SEO中不會起任何效果。
? 11、文本縮進不要使用特殊符號 應(yīng)當(dāng)使用CSS進行設(shè)置。版權(quán)符號不要使用特殊符號 © 可以直接使用輸入法，拼“banquan”，選擇序號5就能打出版權(quán)符號?。
? 12、巧妙利用CSS布局，將重要內(nèi)容的HTML代碼放在最前面，最前面的內(nèi)容被認為是最重要的，優(yōu)先讓“蜘蛛”讀取，進行內(nèi)容關(guān)鍵詞抓取。
? 13.重要內(nèi)容不要用JS輸出，因為“蜘蛛”不認識
? 14.盡量少使用iframe框架,因為“蜘蛛”一般不會讀取其中的內(nèi)容
? 15.謹慎使用display：none ：對于不想顯示的文字內(nèi)容，應(yīng)當(dāng)設(shè)置z-index或設(shè)置到瀏覽器顯示器之外。因為搜索引擎會過濾掉display:none其中的內(nèi)容。
? 16. 不斷精簡代碼
? 17.js代碼如果是操作DOM操作，應(yīng)盡量放在body結(jié)束標簽之前，html代碼之后
SPA與SEO的沖突
由于SPA是通過AJAX加載頁面數(shù)據(jù)的，很難保證站內(nèi)數(shù)據(jù)被SEO獲取到，有些搜索引擎對JS和AJAX獲取數(shù)據(jù)并不支持
