前端各種渲染策略的簡介

2021-10-24 23:01:17 字數 703 閱讀 6174

預載入(preload):資源預載入是另乙個效能優化技術,我們可以使用該技術來預先告知瀏覽器某些資源可能在將來會被使用到。預載入簡單來說就是將所有所需的資源提前請求載入到本地,這樣後面在需要用到時就直接從快取取資源。

預請求(prefetch):是為了提前載入下乙個導航所需的資源,提公升下一次導航的首屏渲染效能。但也可以用來在當前頁面提前載入執行過程中所需的資源,加速響應。

預渲染(prerendering):預渲染不像伺服器渲染那樣即時編譯 html,它只在構建時為了特定的路由生成特定的幾個靜態html頁面。

懶載入(layzload):懶載入也叫延遲載入,一般用在長網頁中延遲載入影象,防止併發載入的資源過多會阻塞js的載入,影響**的正常使用,是一種很好優化網頁效能的方式。

服務端渲染(ssr):服務端渲染的模式下,當使用者第一次請求頁面時,由伺服器把需要的元件或頁面渲染成 html 字串,然後把它返回給客戶端。客戶端拿到手的,是可以直接渲染然後呈現給使用者的 html 內容,不需要為了生成 dom 內容自己再去跑一遍 js **。

客戶端渲染(csr):客戶端渲染模式下,服務端把渲染的靜態檔案給到客戶端,客戶端拿到服務端傳送過來的檔案自己跑一遍js,根據js執行結果,生成相應dom,然後渲染給使用者。

前端渲染與後端渲染的區別

前端渲染 指的是後端返回json資料,前端利用預先寫的html模板,迴圈讀取json資料,拼接字串 es6的模板字串特性大大減少了拼接字串的的成本 並插入頁面。好處 網路傳輸資料量小。不占用服務端運算資源 解析模板 模板在前端 很有可能僅部分在前端 改結構變互動都前端自己來了,改完自己調就行。壞處 ...

前端渲染跟後端渲染的區別

前端渲染 前後端分離,前端先寫好頁面後,拿到後端給的api介面,把資料新增到頁面中渲染出來。如果沒有後端,只是不能進行資料互動,使用者還是能看到頁面的。右鍵檢視網頁源 前端渲染的東西只能看到渲染後的,而無法看到原來的 後端渲染 資料跟頁面都是一起渲染到瀏覽器上的。如果沒有後端,那麼整個頁面都會出不來...

前端渲染和後端渲染的區別

前端渲染 指的是後端返回json資料,前端利用預先寫的html模板,迴圈讀取json資料,拼接字串,並插入頁面後端渲染 指的是前端傳送請求,後端用後台模板引擎直接生成html,前端接收到資料後直接插入頁面對比 對比前端渲染 後端渲染 頁面顯現速度 主要受限於頻寬和客戶端激起的好壞,優化的好,可以逐步...