互联网 Web 技术发展史
杰哥的IT之旅
共 7249字,需浏览 15分钟
·
2021-04-18 16:41
![](https://filescdn.proginn.com/07f1b1cdc56f0c6f16dcc03d90e6a2a6/293dc0c736e780a3eee4ea43d0f8658e.webp)
1991 年 8 月,第一个静态页面诞生了,这是由 Tim Berners-Lee 发布的,想要告诉人们什么是万维网。从静态页面到 Ajax 技术,从 Server Side Render 到 React Server Components,历史的车轮滚滚向前,一个又一个技术诞生和沉寂。
前言
![](https://filescdn.proginn.com/c987e9040ece6a72cb3cf5718dc8b193/f29c5afe0c8ba3958e376aeb9f4211d6.webp)
Tim Berners-Lee
![](https://filescdn.proginn.com/0b3e702a12214b1a32a53767c9ed34d9/78b9b578e956380176cdb0dbc972950a.webp)
document
,标签名、文档对象模型的名称也是由此而来。![](https://filescdn.proginn.com/fe607adc369a3cee71ebf5f70870dcc8/0e592015b3e79dade3f1180ce997bd4b.webp)
静态网页时代
<h1>
、<p>
、<a>
。后来为了丰富网页的内容,<img>
、<table>
标签诞生了。![](https://filescdn.proginn.com/2dcfc8135914f4e76e9756ff5a82e8e2/0bce46b3e034cd294b76346d0cdaae72.webp)
网页能够动态显示 直接使用数据库里的数据 网页实现一些用户交互 让页面更美观
JavaScript 的诞生
![](https://filescdn.proginn.com/329e56943147000a657a8ab093c25513/0f130cf1467c0cf302bdb487002bdaa1.webp)
![](https://filescdn.proginn.com/31c4c82710a9f5e292c9d7c97a35dee6/264c6c1dcc71a7a1c99893fd5d85c312.webp)
扩展资料:第一次浏览器大战
![](https://filescdn.proginn.com/ad7864879485f555f34998399527e9ef/74b3d0a5ba52ca5e5c63616da64231ec.webp)
CSS
![](https://filescdn.proginn.com/1d9e0ecf4a79711d9ff180a689ab4460/23dd503df2d205f2df654773a425ccb5.webp)
![](https://filescdn.proginn.com/91d15bec8922c09513b69c41c1183a85/67cdb0720e7e4d49415a71f42135e13c.webp)
![](https://filescdn.proginn.com/ec629167e2de9be7d4722846864018d6/d6de2806f15af69964efba2d71bfa398.webp)
30pt * 40% + 20pt * 60%
作为h2字体大小的最终值。动态网页技术
![](https://filescdn.proginn.com/2e18cc4f6e46bc8091f73c2626a0ddcc/1702b78394a7b683d9080f3f47e658df.webp)
可以用数据库作为基础来展示网页内容 可以实现表单和一些简单交互 再也不用编写一大堆静态页面了
![](https://filescdn.proginn.com/f17336641e970a8aeb6ebd0527d3a022/c3e757ea4acded00f94e1bd15c816773.webp)
网页总是刷新。用户名密码校验需要刷新以展示错误提示;因下拉选择器选择不同而展示的内容需要刷新才能展示;每次数据交互必然会刷新一次页面。 网页和后端逻辑混合。相信老前端们都有过这样的经历:开发完HTML后,会把页面发给后端修改,加上数据注入逻辑;联调或者debug的时候两个人坐在一块看,查问题的效率很低。 有大量重复代码无法复用。举一个典型的例子,论坛。很多时候只有内容有变化,菜单、侧边栏等几乎不会有改变,但每次请求的时候还是得再将整个网页传输一遍。不仅页面会刷新,速度慢,还挺耗流量(这个年代上网也是一种奢侈)。
AJAX
![](https://filescdn.proginn.com/55ee1cb78450f282d66fedf1c9a11159/6f08fda4d0aecc729c3eb72def596810.webp)
后端业务代码和数据接口混合,还得兼容 APP 的接口(很多企业既有 APP 又有网站) 前端的代码复杂度急剧增加
扩展资料:第二次浏览器大战
![](https://filescdn.proginn.com/b6af13cf8e7bf339082be673b16aace5/d5471be61d7d34e1ab7f525e4cf61802.webp)
![](https://filescdn.proginn.com/dca13a000d3819225019f6dac0889c01/b197a7653a563c61ff9f60246c08b6c6.webp)
SPA
![](https://filescdn.proginn.com/60b99830c14d834bf9157da65166cdc4/af8c5f22816131a7621b17cfe189b325.webp)
请求网页后白屏时间比传统网页要长 爬虫爬到的是空白页面,没办法做 SEO 在业务复杂的情况下,请求文件很大,渲染非常慢。
![](https://filescdn.proginn.com/0a1fab7bf58dc17d69654dcda96d1379/09ea2b2c2e0ba735c792c76523dc718a.webp)
Server Side Render
![](https://filescdn.proginn.com/905ea4306bcb916155f4a93847dc4b80/da746c36843734bcf2eadfd56e673956.webp)
![](https://filescdn.proginn.com/1806f735e5b55609f97084bd22c33b38/4d93e7c3138c830f453bdfeb75df72c4.webp)
减小加载体积 减少接口请求数 PWA 缓存 分块渲染 …
NodeJS
![](https://filescdn.proginn.com/53108f5d12815962b1bb4a57fe181778/cf78d700b7a05af500592607da6cef41.webp)
![](https://filescdn.proginn.com/19d29edee6570f71141e55c188cedce0/853cc208c705063b5df77b2d3c527256.webp)
扩展资料:第三次浏览器大战
Benedict Evans: “Mobile is eating the world.”(移动设备正在蚕食世界) “Mobile remakes the Internet.”(移动设备正在重构Internet)
未来
![](https://filescdn.proginn.com/f306c124304c62761a94f7e539cbd9a4/5c35d0ded2419c1ac6d127dc7d4d0134.webp)
![](https://filescdn.proginn.com/c52ef9c9f432aea28e410173b644319a/eda35cd8085c453179df533e73f71469.webp)
![](https://filescdn.proginn.com/518e04563aca445350d4804fccdc7baa/5e88290ad02122de2369b7629899202b.webp)
![](https://filescdn.proginn.com/3e041ffa0d61233b582dd0c09920e3cd/ae0105f4b8bc564b052e0d9373aa54bd.webp)
推荐阅读
评论