制作展示性網(wǎng)站：目標(biāo)及需求

時(shí)間：2023-07-22 21:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-22 21:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

制作展示性網(wǎng)站：目標(biāo)及需求：基本上大家平常開(kāi)發(fā)的都是些功能性的網(wǎng)站，純展示性的網(wǎng)頁(yè)可能只在進(jìn)入職場(chǎng)的前一兩年有過(guò)涉獵。那么展示性網(wǎng)頁(yè)的要求是什么？使用主流框架是否合適呢？

先搞清楚，展示性的網(wǎng)站都需要我們做什么：

1.seo

2.加載時(shí)長(zhǎng)

3.關(guān)鍵詞選擇

4.后期優(yōu)化

5.外鏈

6.良好的交互

7.簡(jiǎn)潔明了的內(nèi)容

8.排名

9.網(wǎng)站收錄

可以看出來(lái)，技術(shù)可以解決的問(wèn)題都比較關(guān)鍵。畢竟搜索引擎是一段程序，而不是人工。代碼的世界只有true和false，沒(méi)有各一半。

那么對(duì)于前端開(kāi)發(fā)，以擅長(zhǎng)vue全家桶舉例，常規(guī)做法基本都是spa。

spa是什么？

“單頁(yè)Web應(yīng)用（single page web application，SPA）： SPA 是一種特殊的 Web 應(yīng)用，是加載單個(gè) HTML 頁(yè)面并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁(yè)面的。它將所有的活動(dòng)局限于一個(gè) Web 頁(yè)面中，僅在該 Web 頁(yè)面初始化時(shí)加載相應(yīng)的 HTML 、 JavaScript 、 CSS 。一旦頁(yè)面加載完成， SPA 不會(huì)因?yàn)橛脩舻牟僮鞫M(jìn)行頁(yè)面的重新加載或跳轉(zhuǎn)，而是利用 JavaScript 動(dòng)態(tài)的變換 HTML（采用的是 div 切換顯示和隱藏），從而實(shí)現(xiàn)UI與用戶的交互。在 SPA 應(yīng)用中，應(yīng)用加載之后就不會(huì)再有整頁(yè)刷新。相反，展示邏輯預(yù)先加載，并有賴于內(nèi)容Region（區(qū)域）中的視圖切換來(lái)展示內(nèi)容?！?br>
展示型的網(wǎng)站最重要的是什么？無(wú)可置疑：曝光度。

曝光度靠的是什么？靠的是搜索引擎。那就不得不說(shuō)爬蟲(chóng)了。

“網(wǎng)絡(luò)爬蟲(chóng)是一個(gè)自動(dòng)提取網(wǎng)頁(yè)的程序，它為搜索引擎從萬(wàn)維網(wǎng)上下載網(wǎng)頁(yè)，是搜索引擎的重要組成。傳統(tǒng)爬蟲(chóng)從一個(gè)或若干初始網(wǎng)頁(yè)的URL開(kāi)始，獲得初始網(wǎng)頁(yè)上的URL，在抓取網(wǎng)頁(yè)的過(guò)程中，不斷從當(dāng)前頁(yè)面上抽取新的URL放入隊(duì)列，直到滿足系統(tǒng)的一定停止條件。聚焦爬蟲(chóng)的工作流程較為復(fù)雜，需要根據(jù)一定的網(wǎng)頁(yè)分析算法過(guò)濾與主題無(wú)關(guān)的鏈接，保留有用的鏈接并將其放入等待抓取的URL隊(duì)列。然后，它將根據(jù)一定的搜索策略從隊(duì)列中選擇下一步要抓取的網(wǎng)頁(yè)URL，并重復(fù)上述過(guò)程，直到達(dá)到系統(tǒng)的某一條件時(shí)停止。另外，所有被爬蟲(chóng)抓取的網(wǎng)頁(yè)將會(huì)被系統(tǒng)存貯，進(jìn)行一定的分析、過(guò)濾，并建立索引，以便之后的查詢和檢索；對(duì)于聚焦爬蟲(chóng)來(lái)說(shuō)，這一過(guò)程所得到的分析結(jié)果還可能對(duì)以后的抓取過(guò)程給出反饋和指導(dǎo)?！?br>
集合爬蟲(chóng)和spa的介紹，就可以看出來(lái)，spa對(duì)于網(wǎng)絡(luò)爬蟲(chóng)不友好。畢竟爬蟲(chóng)是沒(méi)辦法去爬數(shù)據(jù)的。

所以，直接使用cli全家桶的做法和展示性網(wǎng)站的本質(zhì)是有沖突的。

盡管我們可以有其他方法去處理這個(gè)問(wèn)題！

對(duì)于現(xiàn)在的前端開(kāi)發(fā)圈子來(lái)說(shuō)（基本都是使用三大框架），怎么做一個(gè)展示性的網(wǎng)站也是個(gè)挑戰(zhàn)?。闶欠襁€能把“從數(shù)據(jù)驅(qū)動(dòng)dom”的思維 改成“ 直接操作dom” 呢？）

所以，基于最上面所列出來(lái)的展示性網(wǎng)站所要的需求，我們可以列出來(lái)一些大體的實(shí)現(xiàn)或優(yōu)化方法：

1. 使用CDN緩存靜態(tài)文件

2. 使用服務(wù)端對(duì)SEO部分進(jìn)行動(dòng)態(tài)賦值

3. 頁(yè)面預(yù)渲染

4. 路由采用h5 history模式

5. TDK描敘詳細(xì)

6. 提升網(wǎng)頁(yè)加載速度

7. 增加外聯(lián)

8. 關(guān)鍵詞排名

9. 主動(dòng)推送收錄

10. 頁(yè)面靜態(tài)化

11. ssr

12. 預(yù)渲染

13. 靜態(tài)資源處理

14. 返回可處理頁(yè)面給爬蟲(chóng)

15. url優(yōu)化

以此做“對(duì)”網(wǎng)站，也做好網(wǎng)站