如何優(yōu)化單頁面?

優(yōu)化單頁面的方法：

【資料圖】

1、在網(wǎng)站title上布局重要的關(guān)鍵詞;

2、合理布局網(wǎng)站的標簽;

3、文章要突出產(chǎn)品的內(nèi)容展示;

4、整體頁面布局，構(gòu)造上要給用戶簡潔自然的感覺;

5、做優(yōu)質(zhì)外鏈，引導蜘蛛抓取。

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

1，單頁面應(yīng)用的優(yōu)點

良好的交互體驗

單頁應(yīng)用的內(nèi)容的改變不需要重新加載整個頁面，獲取數(shù)據(jù)也是通過Ajax異步獲取，沒有頁面之間的切換，就不會出現(xiàn)“白屏現(xiàn)象”,也不會出現(xiàn)假死并有“閃爍”現(xiàn)象，頁面顯示流暢

良好的前后端工作分離模式

后端不再負責模板渲染、輸出頁面工作，后端API通用化，即同一套后端程序代碼，不用修改就可以用于Web界面、手機、平板等多種客戶端

減輕服務(wù)器壓力

單頁應(yīng)用相對服務(wù)器壓力小，服務(wù)器只用出數(shù)據(jù)就可以，不用管展示邏輯和頁面合成，吞吐能力會提高幾倍

2， 缺點

首屏加載慢

解決方案： 1，vue-router懶加載

Vue-router懶加載就是按需加載組件，只有當路由被訪問時才會加載對應(yīng)的組件，而不是在加載首頁的時候就加載，項目越大，對首屏加載的速度提升得越明顯

2，使用CDN加速

在做項目時，我們會用到很多庫，采用cdn加載可以加快加載速度。

3，異步加載組件

4，服務(wù)端渲染

服務(wù)端渲染還能對seo優(yōu)化起到作用，有利于搜索引擎抓取更多有用的信息(如果頁面純前端渲染，搜索引擎抓取到的就只是空頁面)

不利于SEO

seo 本質(zhì)是一個服務(wù)器向另一個服務(wù)器發(fā)起請求，解析請求內(nèi)容。但一般來說搜索引擎是不會去執(zhí)行請求到的js的。也就是說，搜索引擎的基礎(chǔ)爬蟲的原理就是抓取url，然后獲取html源代碼并解析。 如果一個單頁應(yīng)用，html在服務(wù)器端還沒有渲染部分數(shù)據(jù)數(shù)據(jù)，在瀏覽器才渲染出數(shù)據(jù)，即搜索引擎請求到的html是模型頁面而不是最終數(shù)據(jù)的渲染頁面。 這樣就很不利于內(nèi)容被搜索引擎搜索到

解決方案：1，服務(wù)端渲染

服務(wù)器合成完整的 html 文件再輸出到瀏覽器

2，頁面預渲染

3，路由采用h5 history模式

不適合開發(fā)大型項目

大型項目中可能會涉及大量的DOM操作、復雜的動畫效果，也就不適合使用Vue、react框架進行開發(fā)