历史上第一个网页它长啥样???
JAVA葵花宝典
共 7104字,需浏览 15分钟
· 2021-07-27
来源│腾讯技术工程(ID: Tencent_TEG)
前言
![](https://filescdn.proginn.com/5a959197aae815811de7c19658022e21/18ddad9c609cdf927b30d4badbb6c75b.webp)
Tim Berners-Lee
![](https://filescdn.proginn.com/19494a7e18fb05c12665dd9b9f272f98/338cb4a01cdc1654d93618533f11692c.webp)
document
,标签名、文档对象模型的名称也是由此而来。![](https://filescdn.proginn.com/f8cb05b1b695dc6878499513f9eba240/29912413b8e9e4ca80a3b4601112742e.webp)
静态网页时代
<h1>
、<p>
、<a>
。后来为了丰富网页的内容,<img>
、<table>
标签诞生了。![](https://filescdn.proginn.com/bfed8506a618c8d83f7884984e4ff8a1/e33d5621ab7e1d936b62cc463c8e7374.webp)
网页能够动态显示 直接使用数据库里的数据 网页实现一些用户交互 让页面更美观
JavaScript 的诞生
![](https://filescdn.proginn.com/293ec5368f7759085107e871ec132fca/603644bd20a554f22b56326e9c4b341d.webp)
![](https://filescdn.proginn.com/8bb57b681686a7f8fe24099114454b1c/02ba71d1d29d81dc67c61d134f3542d8.webp)
扩展资料:第一次浏览器大战
![](https://filescdn.proginn.com/08acd6fc66f5c9da7da28f76b5612ae5/7f12f3afff5da835279a67d658d563a1.webp)
CSS
![](https://filescdn.proginn.com/c5a81d2930b354fd09f1fe52930b6701/4655558913e6921aa4bf2cd725c79713.webp)
![](https://filescdn.proginn.com/e45da0228c16498343b4c7c33fd72d4e/b33cd32c0014bd3783cf0736ad12bde6.webp)
![](https://filescdn.proginn.com/06742e801b2a2ffcf0a536aa3ef0a73c/c60b0858328153c6e6b72f7917f5c8af.webp)
30pt * 40% + 20pt * 60%
作为h2字体大小的最终值。动态网页技术
![](https://filescdn.proginn.com/2c1e0b5f70e6b3c2bc2e7d899095079a/9ee7447f88e8ba93346f6f2c4893968a.webp)
可以用数据库作为基础来展示网页内容 可以实现表单和一些简单交互 再也不用编写一大堆静态页面了
![](https://filescdn.proginn.com/373a234e6e1c37b788c3fc5e1ff8c84a/57f623f26fe42a9159e29f9b1b047b6b.webp)
网页总是刷新。用户名密码校验需要刷新以展示错误提示;因下拉选择器选择不同而展示的内容需要刷新才能展示;每次数据交互必然会刷新一次页面。 网页和后端逻辑混合。相信老前端们都有过这样的经历:开发完HTML后,会把页面发给后端修改,加上数据注入逻辑;联调或者debug的时候两个人坐在一块看,查问题的效率很低。 有大量重复代码无法复用。举一个典型的例子,论坛。很多时候只有内容有变化,菜单、侧边栏等几乎不会有改变,但每次请求的时候还是得再将整个网页传输一遍。不仅页面会刷新,速度慢,还挺耗流量(这个年代上网也是一种奢侈)。
AJAX
![](https://filescdn.proginn.com/4f40a8b06356a19f4d8b646c069c288e/6f09713f2f20dfb6051c27157fdfa0dd.webp)
后端业务代码和数据接口混合,还得兼容 APP 的接口(很多企业既有 APP 又有网站) 前端的代码复杂度急剧增加
![](https://filescdn.proginn.com/f128e12ebf803c87ec11a29845d6a442/942e34bbf55bf24f5cc7cde50a257a3f.webp)
![](https://filescdn.proginn.com/bcc25faf36c790a66563409da4a62e8a/7e300e3c183f179f5f4934ee3269154e.webp)
SPA
![](https://filescdn.proginn.com/e303440edb0e33e497f3f6adfd31e087/23a087d731b536ee18d2f0526549f2c2.webp)
请求网页后白屏时间比传统网页要长 爬虫爬到的是空白页面,没办法做 SEO 在业务复杂的情况下,请求文件很大,渲染非常慢。
![](https://filescdn.proginn.com/655a3ddd5a88f39103090794f3054936/38ba359dbec48860921cec5a5652f8d8.webp)
Server Side Render
![](https://filescdn.proginn.com/e0502c793dd31d88cb397fdc2e09329c/23cb7d995e4f8baee009c2fca409564d.webp)
![](https://filescdn.proginn.com/c7ad52c14a1a79c36c6a4505d9a2090b/4922360fc76c4de20133bcb7e0cc9c45.webp)
减小加载体积 减少接口请求数 PWA 缓存 分块渲染 …
NodeJS
![](https://filescdn.proginn.com/f2e904333193c37d338a73107d229532/abb4752f1914b223dfc9b8021ad1ca17.webp)
![](https://filescdn.proginn.com/198982943c6b259821803579060e6eb2/cc7f23267b2adab262e0f0e255fe3a02.webp)
扩展资料:第三次浏览器大战
未来
![](https://filescdn.proginn.com/c8e559bc8588bf860ad17e50e7138b05/54fb47f92277b48e6c126fbc66137e65.webp)
![](https://filescdn.proginn.com/c848d17cde08ad794fe307e8d3b282f5/5e8ee392409e4f44408a9524ca279256.webp)
![](https://filescdn.proginn.com/8e718bd614a5be76a91c93f117a3bfc9/af20b7ad6c3528977084cf8bc3dfaab4.webp)
![](https://filescdn.proginn.com/c57c0903f2fae46efec08a287b15d3bf/08598b0f0da4900ac9857f18f13d93de.webp)
评论