認(rèn)識單頁面應(yīng)用

coding

teambition

cloud9

注意這幾個網(wǎng)站的相同點，那就是在瀏覽器中，做了原先“應(yīng)當(dāng)”在客戶端做的事情。它們的界面切換非常流暢，響應(yīng)很迅速，跟傳統(tǒng)的網(wǎng)頁明顯不一樣，它們是什么呢？這就是單頁Web應(yīng)用。

單頁Web應(yīng)用（single page web application，SPA），就是只有一張Web頁面的應(yīng)用。（使用js控制渲染來替換html跳轉(zhuǎn)）

單頁應(yīng)用程序 (SPA) 是加載單個HTML 頁面并在用戶與應(yīng)用程序交互時動態(tài)更新該頁面的Web應(yīng)用程序。

瀏覽器一開始會加載必需的HTML、CSS和JavaScript，所有的操作都在這張頁面上完成，都由JavaScript來控制。

因此，對單頁面應(yīng)用來說，模塊化的開發(fā)和設(shè)計顯得相當(dāng)重要。

原理：JS會感知到url的變化，通過這一點，可以用js動態(tài)的將當(dāng)前頁面的內(nèi)容清除掉，然后將下一個頁面的內(nèi)容掛載到當(dāng)前頁面上，這個時候的路由不是后端來做了，而是前端來做，判斷頁面到底是顯示哪個組件，清除不需要的，顯示需要的組件。這種過程就是單頁應(yīng)用，每次跳轉(zhuǎn)的時候不需要再請求html文件了。

單頁面應(yīng)用的優(yōu)缺點：

優(yōu)點：

1、用戶操作體驗好，用戶不用刷新頁面，整個交互過程都是通過Ajax來操作。

2、適合前后端分離開發(fā)，服務(wù)端提供http接口，前端請求http接口獲取數(shù)據(jù)，使用JS進(jìn)行客戶端渲染。

缺點：

1、首頁加載慢

單頁面應(yīng)用會將js、 css打包成一個文件，在加載頁面顯示的時候加載打包文件，如果打包文件較大或者網(wǎng)速慢則用戶體驗不好

2、SEO不友好

SEO（Search Engine Optimization）為搜索引擎優(yōu)化。它是一種利用搜索引擎的搜索規(guī)則來提高網(wǎng)站在搜索引擎排名的方法。目前各家搜索引擎對JS支持不好，所以使用單頁面應(yīng)用將大大減少搜索引擎對網(wǎng)站的收錄。

1、Hash模式：（也就是通過錨點？）

這里的 hash 就是指 url 后的 # 號以及后面的字符。比如說 "

www.baidu.com/#hashhash

" ，其中 "#hashhash" 就是我們期望的 hash 值。

hash 值的變化不會導(dǎo)致瀏覽器像服務(wù)器發(fā)送請求，而且hash 的改變會觸發(fā) hashChange 事件，瀏覽器的前進(jìn)后退也能對其進(jìn)行控制，所以在 H5 的 history 模式出現(xiàn)之前，基本都是使用 hash 模式來實現(xiàn)前端路由。

2、History模式

在 HTML5 之前，瀏覽器就已經(jīng)有了 history 對象。但在早期的 history 中只能用于多頁面的跳轉(zhuǎn)。

在 HTML5 的規(guī)范中，history 新增了以下幾個 API：

hash模式和history模式對比

1、hash 模式相比于 history 模式的優(yōu)點：

兼容性更好，可以兼容到IE8

無需服務(wù)端配合處理非單頁的url地址

2、hash 模式相比于 history 模式的缺點：

看起來更丑。

會導(dǎo)致錨點功能失效。

相同 hash 值不會觸發(fā)動作將記錄加入到歷史棧中，而 pushState 則可以。

引用：

https://www.cnblogs.com/ppforever/p/5126640.html

https://www.jianshu.com/p/0c32c85c668b

https://juejin.im/post/5dac1d0d6fb9a04e0762e3f1

SEO搜索引擎是什么意思?

從使用者的角度看，搜索引擎提供一個包含搜索框的頁面，在搜索框輸入詞語，通過瀏覽器提交給搜索引擎后，搜索引擎就會返回跟用戶輸入的內(nèi)容相關(guān)的信息列表。

互聯(lián)網(wǎng)發(fā)展早期，以雅虎為代表的網(wǎng)站分類目錄查詢非常流行。網(wǎng)站分類目錄由人工整理維護(hù)，精選互聯(lián)網(wǎng)上的優(yōu)秀網(wǎng)站，并簡要描述，分類放置到不同目錄下。用戶查詢時，通過一層層的點擊來查找自己想找的網(wǎng)站。也有人把這種基于目錄的檢索服務(wù)網(wǎng)站稱為搜索引擎，但從嚴(yán)格意義上講，它并不是搜索引擎。

【分類】1、全文索引

全文搜索引擎是名副其實的搜索引擎，國外代表有Google，國內(nèi)則有著名的百度搜索。它們從互聯(lián)網(wǎng)提取各個網(wǎng)站的信息（以網(wǎng)頁文字為主），建立起數(shù)據(jù)庫，并能檢索與用戶查詢條件相匹配的記錄，按一定的排列順序返回結(jié)果。

根據(jù)搜索結(jié)果來源的不同，全文搜索引擎可分為兩類，一類擁有自己的檢索程序（Indexer），俗稱“蜘蛛”（Spider）程序或“機(jī)器人”（Robot）程序，能自建網(wǎng)頁數(shù)據(jù)庫，搜索結(jié)果直接從自身的數(shù)據(jù)庫中調(diào)用，上面提到的Google和百度就屬于此類；另一類則是租用其他搜索引擎的數(shù)據(jù)庫，并按自定的格式排列搜索結(jié)果，如Lycos搜索引擎。

2、目錄索引

目錄索引雖然有搜索功能，但嚴(yán)格意義上不能稱為真正的搜索引擎，只是按目錄分類的網(wǎng)站鏈接列表而已。用戶完全可以按照分類目錄找到所需要的信息，不依靠關(guān)鍵詞（Keywords）進(jìn)行查詢。目錄索引中最具代表性的莫過于大名鼎鼎的Yahoo、新浪分類目錄搜索。

3、元搜索引擎

元搜索引擎（METASearchEngine）接受用戶查詢請求后，同時在多個搜索引擎上搜索，并將結(jié)果返回給用戶。著名的元搜索引擎有InfoSpace、Dogpile、Vivisimo等，中文元搜索引擎中具代表性的是搜星搜索引擎。在搜索結(jié)果排列方面，有的直接按來源排列搜索結(jié)果，如Dogpile；有的則按自定的規(guī)則將結(jié)果重新排列組合，如Vivisimo。

其他非主流搜索引擎形式：

1、集合式搜索引擎：該搜索引擎類似元搜索引擎，區(qū)別在于它并非同時調(diào)用多個搜索引擎進(jìn)行搜索，而是由用戶從提供的若干搜索引擎中選擇，如HotBot在2002年底推出的搜索引擎。

2、門戶搜索引擎：AOLSearch、MSNSearch等雖然提供搜索服務(wù)，但自身既沒有分類目錄也沒有網(wǎng)頁數(shù)據(jù)庫，其搜索結(jié)果完全來自其他搜索引擎。

3、免費鏈接列表（FreeForAllLinks簡稱FFA）：一般只簡單地滾動鏈接條目，少部分有簡單的分類目錄，不過規(guī)模要比Yahoo！等目錄索引小很多。

【工作原理】

1、抓取網(wǎng)頁

每個獨立的搜索引擎都有自己的網(wǎng)頁抓取程序（spider）。Spider順著網(wǎng)頁中的超鏈接，連續(xù)地抓取網(wǎng)頁。被抓取的網(wǎng)頁被稱之為網(wǎng)頁快照。由于互聯(lián)網(wǎng)中超鏈接的應(yīng)用很普遍，理論上，從一定范圍的網(wǎng)頁出發(fā)，就能搜集到絕大多數(shù)的網(wǎng)頁。

2、處理網(wǎng)頁

搜索引擎抓到網(wǎng)頁后，還要做大量的預(yù)處理工作，才能提供檢索服務(wù)。其中，最重要的就是提取關(guān)鍵詞，建立索引文件。其他還包括去除重復(fù)網(wǎng)頁、分析超鏈接、計算網(wǎng)頁的重要度。

如何快速有效的做網(wǎng)站的單頁排名

單頁網(wǎng)站SEO是一個比較特殊的優(yōu)化工作，它更多的應(yīng)用于在線商品快速交易行業(yè)，單頁網(wǎng)站其實往往更多的應(yīng)用在競價推廣，而非SEO。

SEO單頁排名技術(shù)：指的是僅依靠一個獨立的頁面，對目標(biāo)關(guān)鍵詞進(jìn)行優(yōu)化，一般對內(nèi)容營銷策略的要求極高，多半以高轉(zhuǎn)化率為目的，但這與電商SEO還是有一定區(qū)別。

SEO單頁排名技術(shù)

那么，SEO單頁推廣的劣勢有哪些呢？

①不能利用站內(nèi)錨文本提高關(guān)鍵詞排名。

②很難去交互友情鏈接。

③高跳出率是無法避免的。

那么，SEO單頁優(yōu)化的優(yōu)勢有哪些呢？

①節(jié)省過高的開發(fā)費用，可以更便捷的進(jìn)行管理。

②提高用戶體驗：做一個單頁移動優(yōu)化的網(wǎng)頁，要比網(wǎng)站便捷的多，特別是MIP的配置。

③易于傳播與分享，特別適合社交媒體營銷。

④集中優(yōu)勢的內(nèi)容，往往產(chǎn)生高轉(zhuǎn)化率。

那么，單頁網(wǎng)站SEO優(yōu)化，該怎么做呢？

1、根據(jù)行業(yè)，制作最簡單的SEO單頁模板，注意：精簡代碼。

2、優(yōu)化頁面加載速度：特別是對頁面圖片的優(yōu)化，單頁網(wǎng)站往往圖片量大，且長。

3、更徹底的研究你的關(guān)鍵詞：單頁網(wǎng)站并不能通過更多的長尾關(guān)鍵詞頁面獲取流量，因此整個頁面的關(guān)鍵詞挖掘與布局，是非常重要的，你可以參考如下內(nèi)容：

①合理控制關(guān)鍵詞密度，注意上下文的語義相關(guān)。

②選擇合適的核心關(guān)鍵詞，并不需要過高的搜索量，相對競爭度較低的長尾關(guān)鍵詞是必須的。

③按照文章結(jié)構(gòu)，依次將核心關(guān)鍵詞，長尾關(guān)鍵詞，分配在從上到下的段落中。

4、精細(xì)化你的內(nèi)容：單頁網(wǎng)站，內(nèi)容是最核心的要素，它直接影響你的轉(zhuǎn)化率，針對你的產(chǎn)品類型與服務(wù)類型，合理的按照段落格式進(jìn)行分布，并且注重各個標(biāo)簽的使用，它包括：

①