App下載

五分鐘了解互聯(lián)網(wǎng)Web技術(shù)發(fā)展史

猿友 2021-04-09 12:09:13 瀏覽數(shù) (3995)
反饋

作者:charryhuang,騰訊 CSIG 前端開發(fā)工程師

來源:騰訊技術(shù)工程

1991年8月,第一個(gè)靜態(tài)頁(yè)面誕生了,這是由 Tim Berners-Lee 發(fā)布的,想要告訴人們什么是萬維網(wǎng)。從靜態(tài)頁(yè)面到Ajax技術(shù),從Server Side Render到React Server Components,歷史的車輪滾滾向前,一個(gè)又一個(gè)技術(shù)誕生和沉寂。


前言

1994年,萬維網(wǎng)聯(lián)盟(W3C,World Wide Web Consortium)成立,超文本標(biāo)記語言(HTML,Hyper Text Markup Language)正式確立為網(wǎng)頁(yè)標(biāo)準(zhǔn)語言,我們的旅途從此開始。


本文將沿著時(shí)間線,從“發(fā)現(xiàn)問題-解決問題”的角度,帶領(lǐng)大家了解 Web 技術(shù)發(fā)展的關(guān)鍵歷程,了解典型技術(shù)的誕生以及技術(shù)更迭的緣由,思考技術(shù)發(fā)展的原因。

01 Web 技術(shù)發(fā)展的關(guān)鍵歷程



Tim Berners-Lee

02 Tim Berners-Lee


Tim Berners-Lee(蒂姆·伯納斯·李),英國(guó)科學(xué)家,萬維網(wǎng)之父,于1989年在歐洲核子研究組織(CERN)正式提出萬維網(wǎng)的設(shè)想。該網(wǎng)絡(luò)最初是為了滿足世界各地大學(xué)和研究所的科學(xué)家之間對(duì)自動(dòng)信息共享的需求而設(shè)計(jì)和開發(fā)的,這也是為什么 HTML 的頂層聲明是 document,標(biāo)簽名、文檔對(duì)象模型的名稱也是由此而來。


1990年12月,他開發(fā)出了世界上第一個(gè)網(wǎng)頁(yè)瀏覽器。1993年4月30日,歐洲核子研究組織將萬維網(wǎng)軟件置于公共領(lǐng)域,把萬維網(wǎng)推廣到全世界,讓萬維網(wǎng)科技獲得迅速的發(fā)展,深深改變了人類的生活面貌。


他創(chuàng)造了超文本標(biāo)記語言(HTML),并創(chuàng)建了歷史上第一個(gè)網(wǎng)站。當(dāng)然,現(xiàn)在只剩下了由 CERN 恢復(fù)的網(wǎng)站副本:info.cern.ch.

03 歷史上第一個(gè)網(wǎng)站



靜態(tài)網(wǎng)頁(yè)時(shí)代

早期的靜態(tài)網(wǎng)頁(yè),只有最基本的單欄布局,HTML 所支持的標(biāo)簽也僅有<h1>、<p>、<a>。后來為了豐富網(wǎng)頁(yè)的內(nèi)容,<img><table>標(biāo)簽誕生了。

這一階段,Web服務(wù)器基本上只是一個(gè)靜態(tài)資源服務(wù)器,每當(dāng)客戶端瀏覽器發(fā)來訪問請(qǐng)求,它都來者不拒的建立連接,查找 URL 指向的靜態(tài)頁(yè)面,再返回給客戶端。

04 靜態(tài)網(wǎng)頁(yè)時(shí)代


隨著網(wǎng)頁(yè)的飛速發(fā)展,人們發(fā)現(xiàn)要人工實(shí)現(xiàn)所有信息的編寫是非常困難的,而且非常耗時(shí)。

設(shè)想一下,假如一個(gè)頁(yè)面有兩塊區(qū)域展示的內(nèi)容是互相獨(dú)立的,那么你需要涵蓋所有的可能,需要編寫的頁(yè)面數(shù)量是兩塊區(qū)域的內(nèi)容數(shù)量的乘積!

此外,靜態(tài)網(wǎng)站只能夠根據(jù)用戶的請(qǐng)求返回指向的網(wǎng)頁(yè),除了進(jìn)行超鏈接跳轉(zhuǎn),沒辦法實(shí)現(xiàn)任何交互。

此時(shí),人們想要

  • 網(wǎng)頁(yè)能夠動(dòng)態(tài)顯示
  • 直接使用數(shù)據(jù)庫(kù)里的數(shù)據(jù)
  • 網(wǎng)頁(yè)實(shí)現(xiàn)一些用戶交互
  • 讓頁(yè)面更美觀


JavaScript 的誕生

1994 年,網(wǎng)景公司發(fā)布了 Navigator 瀏覽器,但他們急需一種網(wǎng)頁(yè)腳本語言,以使瀏覽器可以與網(wǎng)頁(yè)互動(dòng)。

05 Navigator 瀏覽器



1995年,網(wǎng)景公司的 Brendan Eich 迫于公司的壓力,只花了十天就設(shè)計(jì)了 JS 的最初版本,并命名為 Mocha。后來網(wǎng)景公司為了蹭 Java 的熱度,把 JS 最終改名為 JavaScript。但實(shí)際情況是,網(wǎng)景公司和 Sun 公司結(jié)成聯(lián)盟,才更名為 JavaScript。

06 JavaScript



從此網(wǎng)頁(yè)有了一些簡(jiǎn)單的用戶交互,比如表單驗(yàn)證;也有了一些JS為基礎(chǔ)的動(dòng)效,如走馬燈。


但是讓網(wǎng)頁(yè)真正開始進(jìn)入動(dòng)態(tài)網(wǎng)頁(yè)時(shí)代的卻是以 PHP 為代表的后端網(wǎng)站技術(shù)。


擴(kuò)展資料:第一次瀏覽器大戰(zhàn)

在網(wǎng)景公司推出 JavaScript 的時(shí)候,微軟以JS為基礎(chǔ),編寫了JScript 和 VBScript 作為瀏覽器語言,并在 1995 年的 8 月推出了 IE 1.0。


由于微軟在系統(tǒng)里捆綁瀏覽器,而 90% 的人都在使用 Windows 操作系統(tǒng),大量用戶被動(dòng)地選擇了 IE。面對(duì)微軟快速搶占瀏覽器份額,網(wǎng)景公司無奈之下只能快速將 JavaScript 向 ECMA 提交標(biāo)準(zhǔn),制定了 ECMAScript 標(biāo)準(zhǔn)。


在這段時(shí)間,還發(fā)生過一件趣事,IE 4.0 發(fā)布當(dāng)天 Netscape 的員工們發(fā)現(xiàn)公司的草坪上出現(xiàn)了一個(gè)大大的 IE 圖標(biāo),這明顯是一個(gè)挑釁的舉動(dòng)。作為回應(yīng),Netscape 把自己的吉祥物 “Mozilla” 放在 IE 的圖標(biāo)上,并掛上胸牌,寫著 “Netscape 72,Microsoft 18”——在當(dāng)時(shí), IE 的市場(chǎng)份額確實(shí)不如 Netscape Navigator。

07 Netscape 的吉祥物 Mozilla


但這無法解決份額的問題,網(wǎng)景公司最終在第一次瀏覽器大戰(zhàn)中落敗,于1998年,被美國(guó)在線(AOL)以42億美元收購(gòu)。

在 1998 年網(wǎng)景公司被收購(gòu)前,網(wǎng)景公司公開了 Navigator 源代碼,想通過廣大程序員的參與重新獲得市場(chǎng)份額。Navigator 改名為 Mozilla。這也是火狐瀏覽器的由來,也是第二次瀏覽器大戰(zhàn)的伏筆。


CSS

1994年,Hkon Wium Lie 最初提出了 CSS 的想法。1996年12月,W3C 推出了 CSS 規(guī)范的第一版本。


美觀是所有人的追求。HTML 誕生以來,網(wǎng)頁(yè)基本上就是一個(gè)簡(jiǎn)陋的富文本容器。由于缺少布局和美化手段,早期網(wǎng)頁(yè)流行用 table 標(biāo)簽進(jìn)行布局。為了解決網(wǎng)頁(yè)“丑”的問題,Hkon Wium Lie 和 Bert Bos 共同起草了 CSS 提案,同期的 W3C 也對(duì)這個(gè)很感興趣。

08 早期網(wǎng)頁(yè)外觀

早期網(wǎng)頁(yè)外觀


早期的 CSS 存在多種版本,在 PSL96 版本你甚至可以在里面使用邏輯表達(dá)式。但因?yàn)樗菀讛U(kuò)展,瀏覽器廠商那么多,會(huì)變得很難統(tǒng)一,最終被放棄。

09 PSL96



在眾多提案中,H?kon W Lie 的 CHSS(Cascading HTML Style Sheets)最早提出了樣式表可疊加的概念。

10 樣式表可疊加



行尾的百分比表示這條樣式的權(quán)重,最終將根據(jù)權(quán)重計(jì)算最終值。圖中將會(huì)計(jì)算 30pt * 40% + 20pt * 60% 作為 h2 字體大小的最終值。

為了解決 CSS 兼容性的問題,網(wǎng)景公司甚至還將 CSS 用 JS 來編寫。

CSS 從誕生開始就伴隨著大量的 bug,不同瀏覽器表現(xiàn)不同坑害了無數(shù)的程序員。今天我們能用上相對(duì)靠譜的 css,不得不說這是一個(gè)奇跡。


動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)

1995年,Rasmus Lerdof 創(chuàng)造的 PHP 開始活躍在各大網(wǎng)站,它讓 Web 可以訪問數(shù)據(jù)庫(kù)了,PHP 實(shí)現(xiàn)了人們渴望的動(dòng)態(tài)網(wǎng)頁(yè)。

這里的動(dòng)態(tài)網(wǎng)頁(yè)不是指網(wǎng)頁(yè)動(dòng)效,而是指內(nèi)容的動(dòng)態(tài)展示、豐富的用戶交互。PHP 就像給網(wǎng)絡(luò)世界打開了一扇窗,各種動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)(如ASP、JSP)雨后春筍般的冒了出來,萬維網(wǎng)也因此開始高速發(fā)展,MVC模式也開始出現(xiàn)在后端網(wǎng)站技術(shù)中。

11 動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)



動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)解決了以前各種令人無法呼吸的痛,生活總會(huì)越來越好的:

  • 可以用數(shù)據(jù)庫(kù)作為基礎(chǔ)來展示網(wǎng)頁(yè)內(nèi)容
  • 可以實(shí)現(xiàn)表單和一些簡(jiǎn)單交互
  • 再也不用編寫一大堆靜態(tài)頁(yè)面了

PHP等動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的原理,大體上都是根據(jù)客戶端的請(qǐng)求,從數(shù)據(jù)庫(kù)里獲取相對(duì)應(yīng)的數(shù)據(jù),然后塞到網(wǎng)頁(yè)里去,返回給客戶端一個(gè)填充好內(nèi)容的網(wǎng)頁(yè)。這個(gè)階段也是前后端耦合的。

11 網(wǎng)頁(yè)開發(fā)流程

網(wǎng)頁(yè)開發(fā)流程


而當(dāng)一些基礎(chǔ)的需求被滿足之后,動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)帶來的不足也漸漸暴露出來:

  • 網(wǎng)頁(yè)總是刷新。用戶名密碼校驗(yàn)需要刷新以展示錯(cuò)誤提示;因下拉選擇器選擇不同而展示的內(nèi)容需要刷新才能展示;每次數(shù)據(jù)交互必然會(huì)刷新一次頁(yè)面。
  • 網(wǎng)頁(yè)和后端邏輯混合。相信老前端們都有過這樣的經(jīng)歷:開發(fā)完HTML后,會(huì)把頁(yè)面發(fā)給后端修改,加上數(shù)據(jù)注入邏輯;聯(lián)調(diào)或者debug的時(shí)候兩個(gè)人坐在一塊看,查問題的效率很低。
  • 有大量重復(fù)代碼無法復(fù)用。舉一個(gè)典型的例子,論壇。很多時(shí)候只有內(nèi)容有變化,菜單、側(cè)邊欄等幾乎不會(huì)有改變,但每次請(qǐng)求的時(shí)候還是得再將整個(gè)網(wǎng)頁(yè)傳輸一遍。不僅頁(yè)面會(huì)刷新,速度慢,還挺耗流量(這個(gè)年代上網(wǎng)也是一種奢侈)。

然后AJAX站了出來。


AJAX

AJAX,Async JavaScript And XML,于 1998 年開始初步應(yīng)用,2005 年開始普及。AJAX 的廣泛使用,標(biāo)志著 Web2.0 時(shí)代的開啟。這同時(shí)也是各大瀏覽器爭(zhēng)鋒的時(shí)代。 

現(xiàn)在,我們可以通過 AJAX 來動(dòng)態(tài)獲取數(shù)據(jù),利用DOM操作動(dòng)態(tài)更新網(wǎng)頁(yè)內(nèi)容了。來看看加入了 AJAX 的網(wǎng)頁(yè)是怎么工作的:

12 AJAX



這個(gè)時(shí)候前端路由還沒有興起,大多數(shù)情況下還是后端返回一整個(gè)頁(yè)面,部分內(nèi)容通過 AJAX 進(jìn)行獲取。

隨著智能手機(jī)的出現(xiàn),APP 開始萌芽。相比起網(wǎng)頁(yè),APP 編寫好之后只需要數(shù)據(jù)接口就能工作;而網(wǎng)頁(yè)不僅需要后端寫業(yè)務(wù)邏輯,控制跳轉(zhuǎn),還要寫一部分接口用于 AJAX 請(qǐng)求。

這個(gè)階段前端能做的事情還是很少,還背負(fù)著“切圖仔”的綽號(hào)。隨著 HTML5 草案的提出,前端能做的交互越來越多,程序員們急需解決以下問題:

  • 后端業(yè)務(wù)代碼和數(shù)據(jù)接口混合,還得兼容 APP 的接口(很多企業(yè)既有 APP 又有網(wǎng)站)
  • 前端的代碼復(fù)雜度急劇增加

能不能讓前端也像 APP 一樣,只需要請(qǐng)求數(shù)據(jù)接口即可展現(xiàn)內(nèi)容呢?

擴(kuò)展資料:第二次瀏覽器大戰(zhàn)

2004年 Firefox 發(fā)布,拉開了第二次瀏覽器大戰(zhàn)的序幕。同期市面上誕生的各種新興瀏覽器,如 Safari、Chrome 等,也加入了戰(zhàn)爭(zhēng)。

Firefox瀏覽器



此前由于 XP 系統(tǒng)實(shí)在過于火爆,導(dǎo)致 IE 6 無任何競(jìng)爭(zhēng)對(duì)手,微軟甚至解散了瀏覽器的大部分員工,只留下幾個(gè)人象征性地維護(hù)順便修補(bǔ)一下  bug。這讓開發(fā)人員非常痛苦。

此時(shí) Firefox 以優(yōu)越于IE的性能和非常友好的編程工具,迅速將那些被 IE6 搞得焦頭爛額的網(wǎng)頁(yè)開發(fā)人員們,從水火之中救出,導(dǎo)致先讓前端工程師成為忠實(shí)的第一批用戶,然后,經(jīng)由這些有經(jīng)驗(yàn)的開發(fā)人員們推廣到了普通的用戶群體。

基于 webkit 內(nèi)核的 Safari,借助自家產(chǎn)品(iOS、MacOS)的壟斷快速收割移動(dòng)端和mac端市場(chǎng)份額;同樣基于 webkit 內(nèi)核的Chrome,趁著微軟放松警惕,憑借優(yōu)越于市場(chǎng)上所有瀏覽器的性能,如同中國(guó)歷史上的成吉思汗一樣大殺四方,快速擴(kuò)展市場(chǎng)份額。

微軟知道,自己已經(jīng)失去了最初能稱霸的機(jī)會(huì),這次它不想失去,IE 再次開始迭代,各大瀏覽器廠商又開始不顧標(biāo)準(zhǔn),迭代再次開始,為了統(tǒng)一化標(biāo)準(zhǔn),W3C 開發(fā)了 HTML5,但是遲遲得不到微軟的認(rèn)可。在其他瀏覽器紛紛支持 HTML5 后,微軟發(fā)現(xiàn),自己又成了孤家寡人,份額不斷縮水。

2016 年,Chrome 瀏覽器份額超越 IE,第二次瀏覽器大戰(zhàn)結(jié)束。

Chrome瀏覽器份額超越IE



瀏覽器大戰(zhàn)極大的推動(dòng)了技術(shù)進(jìn)步,正是 Google 研發(fā)出的 V8 引擎極大的提升了 JS 的運(yùn)行效率,NodeJS 才有機(jī)會(huì)誕生,前端才能走向全棧。JS 其實(shí)沒有你想象的那么慢。


SPA

2008 年 HTML5 草案提出,各大瀏覽器開啟良性競(jìng)爭(zhēng),爭(zhēng)先實(shí)現(xiàn) HTML5 功能。由于 HTML5 帶來前端代碼復(fù)雜度的增加,前端為了尋求良好的可維護(hù)性和可復(fù)用性,也不得不參考后端 MVC 進(jìn)行了設(shè)計(jì)和拆分,后來出現(xiàn)了三大前端框架:Vue(2014)、React(2010)、 AngularJS(2009)。

SPA



單頁(yè)應(yīng)用返回一個(gè)空白的 HTML,并通過 JS 腳本進(jìn)行動(dòng)態(tài)生成內(nèi)容,從此和頁(yè)面刷新說拜拜。

后端不再負(fù)責(zé)模板渲染,前端和 APP 開始對(duì)等,后端的API也可以通用化了。前后端終于得以分離。(PS: 最終目標(biāo)是成為后端)

但 SPA 因?yàn)榉祷氐氖强?HTML,所有 JS 也被打包為一個(gè)文件,需要在一開始就加載完所有的資源,

  • 請(qǐng)求網(wǎng)頁(yè)后白屏?xí)r間比傳統(tǒng)網(wǎng)頁(yè)要長(zhǎng)
  • 爬蟲爬到的是空白頁(yè)面,沒辦法做 SEO
  • 在業(yè)務(wù)復(fù)雜的情況下,請(qǐng)求文件很大,渲染非常慢。

這使得前端不得不拆分過于龐大的單頁(yè)應(yīng)用,出現(xiàn)了框架的多頁(yè)面概念,也出現(xiàn)了多種解決方案。

很多網(wǎng)頁(yè)首次加載的時(shí)候其實(shí)并不需要太多的東西,比如論壇首頁(yè)與貼子詳情頁(yè),完全可以將其拆開,用戶在新打開的頁(yè)面閱讀反而體驗(yàn)更好(多頁(yè)應(yīng)用)。

又比如管理后臺(tái),可以在頁(yè)面框架內(nèi),將每個(gè)菜單對(duì)應(yīng)的管理頁(yè)拆出來動(dòng)態(tài)加載(import)。

多頁(yè)應(yīng)用



Server Side Render

Server Side Render,服務(wù)端渲染,簡(jiǎn)稱SSR,又稱服務(wù)端同構(gòu)、直出,一般使用NodeJS實(shí)現(xiàn)。

這里的服務(wù)端渲染和以前的不一樣,SSR會(huì)利用已經(jīng)“脫水”的首屏數(shù)據(jù)來渲染首屏頁(yè)面返回給客戶端,到了瀏覽器再注入瀏覽器事件,并且保留單頁(yè)應(yīng)用的能力,對(duì)SEO非常友好。但學(xué)習(xí)成本高,限制較多。

讓我們看看傳統(tǒng)SPA和加入了SSR的SPA在請(qǐng)求上的區(qū)別:

客戶端渲染示意

客戶端渲染示意


服務(wù)端渲染示意

服務(wù)端渲染示意


傳統(tǒng) SPA 可以更快的返回頁(yè)面,請(qǐng)求響應(yīng)時(shí)間更短;加載 JS 后才開始渲染,白屏?xí)r間更長(zhǎng),loading 結(jié)束后用戶感知到的相對(duì)可交互時(shí)間更早。

SSR 在接到瀏覽器請(qǐng)求時(shí),先從后端拉取首屏數(shù)據(jù)渲染在頁(yè)面內(nèi)才返回,請(qǐng)求響應(yīng)時(shí)間更長(zhǎng);因?yàn)楣?jié)約了一段瀏覽器請(qǐng)求首屏數(shù)據(jù)的時(shí)間,白屏?xí)r間更短。由于 JS 異步加載,用戶感知的相對(duì)可交互時(shí)間變晚。但體驗(yàn)上 SSR 一般更好。

在極端情況下,用戶眼中傳統(tǒng) SPA 會(huì)一直顯示 loading,使用了 SSR 的頁(yè)面則會(huì)出現(xiàn)“點(diǎn)不動(dòng)”的情況。

大多數(shù)時(shí)候 SSR 體驗(yàn)會(huì)更佳,因?yàn)榉?wù)端承擔(dān)了大部分渲染工作,這也導(dǎo)致服務(wù)端負(fù)載變高。但在業(yè)務(wù)復(fù)雜的情況下,SSR 首屏請(qǐng)求的接口數(shù)很多,導(dǎo)致返回 HTML 變慢。

歸根結(jié)底,SSR 不能很好的應(yīng)付業(yè)務(wù)復(fù)雜的情況,首屏要加載的東西還是太多了。所以我們要怎樣讓用戶感知到的白屏?xí)r間變短呢?

  • 減小加載體積
  • 減少接口請(qǐng)求數(shù)
  • PWA 緩存
  • 分塊渲染

IMWEB 的企鵝輔導(dǎo)落地了 SSR + PWA 之后,達(dá)到了幾乎秒開的程度。


NodeJS

說完了 SSR,必須說一下 NodeJS。2010 年 NodeJS 正式立項(xiàng)到現(xiàn)在已經(jīng) 11 個(gè)年頭了,NodeJS 的誕生來自于 Ryan Dahl(下圖) 的靈感。他想以非阻塞的方式做所有事情,用完全異步方式可以處理非常多的請(qǐng)求(高并發(fā))。  


NodeJS 的出現(xiàn)讓前端向全棧的發(fā)展邁出了重大的一步。很多公司開始用 NodeJS 搞 BFF(backend for frontend),我們也開始把 Controller 層放到 NodeJS 來處理,后端只負(fù)責(zé)基礎(chǔ)業(yè)務(wù)數(shù)據(jù)。也就是現(xiàn)在的三層架構(gòu):


NodeJS


這種架構(gòu)在跨端的時(shí)候具有良好的適配性,我們可以根據(jù)業(yè)務(wù)需求,為不同端設(shè)計(jì)不同的 Controller 和 View,而后臺(tái)可以不做變更。這種架構(gòu)省去了很多溝通成本,前端專注頁(yè)面的展示,后端專注業(yè)務(wù)邏輯。

當(dāng)然,NodeJS 還可以對(duì)后端數(shù)據(jù)進(jìn)行預(yù)處理,前端根據(jù)自己的需要自己設(shè)計(jì)數(shù)據(jù)結(jié)構(gòu),頁(yè)面開發(fā)與接口調(diào)試形成閉環(huán),還為后端分擔(dān)了壓力。



擴(kuò)展資料:第三次瀏覽器大戰(zhàn)

第三次瀏覽器大戰(zhàn)


智能手機(jī)的飛速發(fā)展,這張圖表現(xiàn)的淋漓盡致。第三次瀏覽器大戰(zhàn)是爭(zhēng)奪移動(dòng)端市場(chǎng)份額的一戰(zhàn),也是當(dāng)下正在進(jìn)行的一戰(zhàn)。

Benedict Evans: “Mobile is eating the world.”(移動(dòng)設(shè)備正在蠶食世界) “Mobile remakes the Internet.”(移動(dòng)設(shè)備正在重構(gòu)Internet)

而未來,瀏覽器真正的對(duì)手不再是瀏覽器,而是小程序這樣結(jié)合了 APP 和網(wǎng)頁(yè)優(yōu)點(diǎn)的新興技術(shù)。


未來

早在 2009 年,F(xiàn)acebook 的工程師就開發(fā)了 bigPipe,讓 Facebook 頁(yè)面打開速度提高了兩倍。bigPipe 使用 分塊渲染 的思想,將網(wǎng)頁(yè)的渲染變成了一小塊一小塊的,服務(wù)端渲染好一塊頁(yè)面就發(fā)送給客戶端。他們直接把木桶拆了,打破了短板效應(yīng)。

服務(wù)端渲染 VS 流式分塊渲染

服務(wù)端渲染 VS 流式分塊渲染


時(shí)隔 11 年,也就是 2020 年 12 月,React 團(tuán)隊(duì)提出了 React Server Components,算是一個(gè)可擴(kuò)展的前后端融合方案。其理念和 bigPipe 類似,把組件放在服務(wù)端渲染,節(jié)省了從瀏覽器進(jìn)行數(shù)據(jù)請(qǐng)求的開支,一些運(yùn)行時(shí)也可以不用放到瀏覽器,減小了包大?。ㄈ?markdown 在服務(wù)端渲染好了,也就不再需要把工具庫(kù)發(fā)送給瀏覽器了)。React Server Components 的引入,也同步做到了自動(dòng)的 Code Split。

React Server Components 原理

React Server Components 原理


不同的是 React Server Components 返回的不是 HTML,而是帶有結(jié)構(gòu)和數(shù)據(jù)的自定義類JSON數(shù)據(jù)。



這種結(jié)構(gòu),是對(duì)服務(wù)端渲染的核心(結(jié)構(gòu)+數(shù)據(jù))進(jìn)行抽象,結(jié)合 React 的工作方式(如Suspense),平緩的從服務(wù)端過渡到了客戶端,維持了組件狀態(tài),并且可以更自由的拼裝服務(wù)器組件和客戶端組件。

客戶端組件和服務(wù)端組件混用


客戶端組件和服務(wù)端組件混用


關(guān)于拆分這條思路,讓我想到微前端,雖然現(xiàn)在微前端還有很多問題,但微應(yīng)用即服務(wù)也不乏為一條解決之道。未來前端或許會(huì)往“小而美”的方向發(fā)展,甚至形成一個(gè)以服務(wù)端組件為單位的包管理器,網(wǎng)頁(yè)打包大小會(huì)越來越小,更多的組件是從網(wǎng)絡(luò)上直接獲取。

此外,我也很期待 Web Components 的發(fā)展,有了原生的支持,0kb runtime也不是不可能了。合久必分分久必合,現(xiàn)存很多前端框架也可以得到統(tǒng)一了。當(dāng)然現(xiàn)在 Web Components 想要投入使用,首先離不開瀏覽器的支持,而且必須有一個(gè)平緩的過渡,此外兼容性也是一個(gè)大問題(最后還是苦了程序員們)。


結(jié)語

從 JavaScript 的誕生一路走來,從“發(fā)現(xiàn)問題-解決問題”的角度,我們看到了技術(shù)發(fā)展的原因和必然性。2021 年的今天,Web APP 仍然距離原生 APP 體驗(yàn)有一定的差距。或許以后會(huì)出現(xiàn)一個(gè)小程序桌面 APP,小程序能夠得到統(tǒng)一;或許會(huì)在 PWA 的道路上越走越遠(yuǎn);又或者瀏覽器開放更多原生系統(tǒng)  API,利用各種加載方式,再模擬 APP 的各種體驗(yàn),達(dá)到近似 APP 的效果。

每個(gè)時(shí)代都誕生了許多的技術(shù),大浪淘沙,留下的卻也只是只存在于這個(gè)時(shí)代的王者。技術(shù)總是不斷的更迭,重要的不是慌慌張張的追趕技術(shù)的腳步,而是去思考技術(shù)為什么這么如此演變,思考這樣的演變方式的利與弊。如果是你,又會(huì)怎么解決當(dāng)代技術(shù)的問題呢?


想要系統(tǒng)自學(xué)前端開發(fā)推薦收藏《W3Cschool 前端開發(fā)學(xué)習(xí)路線


0 人點(diǎn)贊