这是我参与「第四届青训营 」笔记创作活动的的第1天
关于前端Web
三个时代
- 只读时代:单向发布, 链接跳转, 刷新页面
网站基于HTTPS协议 响应请求。从url网络视角来看,每次页面更新都要向服务器发起新的请求,服务器将 url 对应的 html 文件读取到内存中,并且发送给请求者 ,浏览器将原来的页面清除,替换新的内容。
特点:
- 基于Http
- 每次链接跳转,都是全新的Http请求,并且返回内容后,重新渲染页面。
- 每个文件都是全新的一套,哪怕有很多重复的地址、导航
缺点:
- 文件比较大,去服务器的速度可能会比较慢。而网页的打开速度是至关重要的。
- 拿了重复的内容,做了重复的渲染。
可优化: 依赖于http协议,去取到新的的内容(去除重复的内容),如使用 PATCH 方式请求进行页面局部更新,把需要改变页面的地方,动态去修改。- 将原来页面丢掉,等待请求的过程时 页面会白屏。
- 体验时代: 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
最后
以上就是在青训营 Day3 Web标准与前端开发 - 李松峰老师 课程学习的记录,以及我个人的思考和补充。