史上第一個(gè)網(wǎng)頁長這樣,網(wǎng)友:有點(diǎn)辣雞。。。
點(diǎn)擊上方[全棧開發(fā)者社區(qū)]→右上角[...]→[設(shè)為星標(biāo)?]
點(diǎn)擊領(lǐng)取全棧資料:全棧資料
前言

Tim Berners-Lee

document,標(biāo)簽名、文檔對(duì)象模型的名稱也是由此而來。
靜態(tài)網(wǎng)頁時(shí)代
<h1>、<p>、<a>。后來為了豐富網(wǎng)頁的內(nèi)容,<img>、<table>標(biāo)簽誕生了。
網(wǎng)頁能夠動(dòng)態(tài)顯示 直接使用數(shù)據(jù)庫里的數(shù)據(jù) 網(wǎng)頁實(shí)現(xiàn)一些用戶交互 讓頁面更美觀
JavaScript 的誕生


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

CSS



30pt * 40% + 20pt * 60% 作為h2字體大小的最終值。動(dòng)態(tài)網(wǎng)頁技術(shù)

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

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

后端業(yè)務(wù)代碼和數(shù)據(jù)接口混合,還得兼容 APP 的接口(很多企業(yè)既有 APP 又有網(wǎng)站) 前端的代碼復(fù)雜度急劇增加
擴(kuò)展資料:第二次瀏覽器大戰(zhàn)


SPA

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

Server Side Render


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


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

未來




來源丨騰訊技術(shù)工程
覺得本文對(duì)你有幫助?請(qǐng)分享給更多人
關(guān)注「全棧開發(fā)者社區(qū)」加星標(biāo),提升全棧技能
本公眾號(hào)會(huì)不定期給大家發(fā)福利,包括送書、學(xué)習(xí)資源等,敬請(qǐng)期待吧!
如果感覺推送內(nèi)容不錯(cuò),不妨右下角點(diǎn)個(gè)在看轉(zhuǎn)發(fā)朋友圈或收藏,感謝支持。
好文章,留言、點(diǎn)贊、在看和分享一條龍吧??
評(píng)論
圖片
表情

