【性能優化篇】【通俗版】:SEO(搜索引擎優化)背後的價值是什麼-

在瞭解SEO技術之前,我們要先知道服務端渲染(SSR)和客戶端渲染(CSR)

服務端渲染(SSR)

服務端渲染的模式下,當用戶第一次請求頁面時,由服務器把需要的組件或頁面渲染成 HTML 字符串,然後把它返回給客戶端。客戶端拿到手的,是可以直接渲染然後呈現給用戶的 HTML 內容,不需要爲了生成 DOM 內容自己再去跑一遍 JS 代碼。使用服務端渲染的網站,可以說是“所見即所得”,頁面上呈現的內容,我們在 html 源文件裏也能找到。

客戶端渲染(CSR)

html 僅僅作爲靜態文件,客戶端在請求時,服務端不做任何處理,直接以原文件的形式返回給客戶端客戶端,然後根據 html 上的 JavaScript,生成 DOM 插入 html。例如vue框架中會經常使用插值對象,eg:{{value}},這是需要通過js文件對其進行渲染, 網絡傳輸數據量小、減少了服務器壓力、前後端分離、局部刷新,無需每次請求完整頁面、交互好可實現各種效果

正片開始

但我們又知道SEO是什麼嗎,讓我廢話一篇:

搜索引擎優化,又稱爲SEO,即Search Engine Optimization,它是一種通過分析搜索引擎的排名規律,瞭解各種搜索引擎怎樣進行搜索、怎樣抓取互聯網頁面、怎樣確定特定關鍵詞的搜索結果排名的技術。搜索引擎採用易於被搜索引用的手段,對網站進行有針對性的優化,提高網站在搜索引擎中的自然排名,吸引更多的用戶訪問網站,提高網站的訪問量,提高網站的銷售能力和宣傳能力,從而提升網站的品牌效應。

所以現實中,我們度孃的時候,會有幾萬條記錄,內容有先後之分,排序且不是隨機的。肯定第一頁裏面的內容會有更多的人在看,想要喫米的人,前面的人永遠是拿大頭的那一個,後面就沒有米分了。

於是,大家爲了獲得當中的經濟效益,就開始研究當中的奧妙,便有了搜索引擎優化技術,提高自己網站在搜索引擎中的自然排名。

我們再來說SSR和CSR,由於CSR不利於SEO、爬蟲看不到完整的程序源碼、首屏渲染慢(渲染前需要下載一堆js和css等),但是SSR好處:首屏渲染快、利於SEO、可以生成緩存片段,生成靜態化文件、節能(對比客戶端渲染的耗電),

但是SSR 性能沒有這麼好,用戶體驗較差、不容易維護,但是很多生意人爲了獲取當中的利益,可以放棄這些性能損耗,這是爲什麼現在還是很多人都會選擇SSR(服務端渲染),這是到現在還有一席之地的重要原因

簡單總結就是兩點

首屏加載快 相比於加載單頁應用,我只需要加載當前頁面的內容,而不需要像 React 或者 Vue 一樣加載全部的 js 文件 SEO 優化 對於單頁應用,搜索引擎並不能收錄到 ajax 爬取數據之後然後再動態 js 渲染出來的頁面。

下面幾段話摘自掘金小冊,便於大家理解:

事實上,很多網站是出於效益的考慮才啓用服務端渲染,性能倒是在其次。 假設 A 網站頁面中有一個關鍵字叫“前端性能優化”,這個關鍵字是 JS
代碼跑過一遍後添加到 HTML 頁面中的。那麼客戶端渲染模式下,我們在搜索引擎搜索這個關鍵字,是找不到 A
網站的——搜索引擎只會查找現成的內容,不會幫你跑 JS 代碼。A
網站的運營方見此情形,感到很頭大:搜索引擎搜不出來,用戶找不到我們,誰還會用我的網站呢?爲了把“現成的內容”拿給搜索引擎看,A
網站不得不啓用服務端渲染。
但性能在其次,不代表性能不重要。服務端渲染解決了一個非常關鍵的性能問題——首屏加載速度過慢。在客戶端渲染模式下,我們除了加載
HTML,還要等渲染所需的這部分 JS 加載完,之後還得把這部分 JS
在瀏覽器上再跑一遍。這一切都是發生在用戶點擊了我們的鏈接之後的事情,在這個過程結束之前,用戶始終見不到我們網頁的廬山真面目,也就是說用戶一直在等!相比之下,服務端渲染模式下,服務器給到客戶端的已經是一個直接可以拿來呈現給用戶的網頁,中間環節早在服務端就幫我們做掉了,用戶豈不“美滋滋”?

可以參考以下文章加深理解:
服務端渲染(SSR)
爲什麼現在又流行服務端渲染html
精讀前後端渲染之爭 #
服務端渲染”吊打“客戶端渲染”的那些事(The Benefits of Server Side Rendering Over Client Side Rendering)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章