好程式設計師web前端分享什麼是前端同構渲染

2021-09-24 22:12:41 字數 814 閱讀 6622

好程式設計師web前端分享什麼是前端同構渲染,同構渲染指的是前後端都使用了js,首次渲染的時候使用nodejs載入了我們的html檔案,用小白的話來說,同構渲染既不屬於後端渲染,也不屬於前端渲染,它是介於二者之間的共有部分。同構渲染的實現其實就是ssr+csh,他們是通過乙份**而實現的。

在這裡提到了前端渲染和後端渲染,他們各自都有自己的優勢吧。前端渲染的優勢包括:可以區域性重新整理、可以實現懶載入技術、可以使用js實現各種炫酷的效果、可以通過cdn伺服器訪問資源、前後端分離開發、學習成本相對較低。後端主要的優勢有:可以很好的解決首屏載入的問題、利於seo的優化。

隨著技術的發展,像vue和react框架已經能夠實現很好的同構渲染,也就是我們常說的ssr,比如說nuxt.js和next.js。在前端渲染異常普遍的今天,我們為什麼會有同構渲染的技術出現呢?

上面已經介紹到了,同構渲染其實可以解決首屏載入緩慢和seo的優化問題。

傳統的搜尋引擎通過從 html檔案 中抓取我們所需要的資料,這樣的話前端渲染的頁面就無法被抓取到。開發過vue和react專案的開發者都知道,我們常使用的 spa 會把所有 js 整體打包,不可忽略的乙個問題就是檔案太大,導致渲染前等待很長時間。特別是網速差的時候,讓使用者等待白屏結束並非乙個很好的體驗。

服務端渲染可以先將使用的資料渲染成最終 html 直接展示,理想情況下能避免白屏問題。但是凡事無絕對,如果乙個頁面的資料量過大,那也不可避免的會有等待情況的發生。

說到php,jsp的渲染模式,他們都是前端寫完頁面之後交給後端,後端通過模板引擎渲染出來的html頁面,字尾名為php或者jsp。通過中的ssr其實原理也是一樣的,只不過多了一層csh而已,它的實現需要服務端提供乙份初始化的資料。

好程式設計師web前端分享邏輯運算

一門計算機語言,程式設計的核心在於邏輯思想,當我們在編寫程式的時候,邏輯是否通順,是能否正確寫出程式的關鍵,可以說如果你掌握了邏輯,那麼你就踏入了計算機程式設計的大門。與 或 否 邏輯 與 var a 0,b 3 alert a 0 b 3 true alert a 1 b 3 false 他的 返...

好程式設計師web前端分享CSS學習 HSLA顏色模式

好程式設計師web前端分享css學習 hsla顏色模式 一 理論 1.hsla顏色模式 a.hsla在hsl基礎上增加了不透明度,值越大透明度越低 b.hsla顏色模式的瀏覽器相容性和hsl一樣,只有較新版本的主流瀏覽器才支援 2.rgba和hsla顏色模式二者可以完全相互替換 3.rgba hsl...

好程式設計師web前端分享高度自適應

一 寬高自適應 網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整,這就是自適應。它能夠使網頁顯示更靈活,可以適應在不同裝置 不同視窗和不同解析度下顯示。1 寬度自適應 塊元素寬度預設為auto 2 高度自適應 元素 高度不寫 二 浮動元素父元素高度自適應 父...