前端开发web的三个时代 | 青训营笔记

260 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

关于前端Web

三个时代

  • 只读时代:单向发布, 链接跳转, 刷新页面

网站基于HTTPS协议 响应请求。从url网络视角来看,每次页面更新都要向服务器发起新的请求,服务器将 url 对应的 html 文件读取到内存中,并且发送给请求者 ,浏览器将原来的页面清除,替换新的内容。

特点:

  1. 基于Http
  2. 每次链接跳转,都是全新的Http请求,并且返回内容后,重新渲染页面。
  3. 每个文件都是全新的一套,哪怕有很多重复的地址、导航

缺点:

  1. 文件比较大,去服务器的速度可能会比较慢。而网页的打开速度是至关重要的。
  2. 拿了重复的内容,做了重复的渲染。
    可优化: 依赖于http协议,去取到新的的内容(去除重复的内容),如使用 PATCH 方式请求进行页面局部更新,把需要改变页面的地方,动态去修改。
  3. 将原来页面丢掉,等待请求的过程时 页面会白屏。
  • 体验时代: Ajax的提出, SPA, 动态交互, jQuery

ajax 可以动态刷新页面,用户体验比较好。又或使用 xhr 异步请求。
交互更加灵活,与只读时代对比,只读时代的页面内容是有限的,而体验时代页面的内容是无限的。就好比我们刷抖音,可以无限下滑看到新的内容。

  • 敏捷时代: React, Vue的出现, 模块化, 组件化

使用虚拟 DOM 、模块化、组件化等技术,使页面更加的灵活。

前端应用场景

  • 浏览器
  • 服务器: node, deno…
  • 命令行: webpack CLI, Vue CLI…
  • 桌面端: Electron, nw.js
  • 移动端: React Native

关于web标准

标准组织

  • W3C: World wide Web Consortium>Ecma:
  • Ecma International
  • WHATWG: Web Hypertext ApplicationTechnology Working Group
  • IETF: Internet Engineering Task Force

前端学习路线

这里放上 李松峰老师 的推荐路线:
roadmap

image.png


最后

以上就是在青训营 Day3 Web标准与前端开发 - 李松峰老师 课程学习的记录,以及我个人的思考和补充。