Web标准与前端开发 | 青训营笔记

雨后初阳
50 阅读4分钟

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

重点内容

  • 前端开发的起源、架构、变迁、应用领域以及语言、框架
  • Web标准及相关流程

详细内容

前端开发

起源

"Suppose all the information stored oncomputers everywhere were linked.Suppose l could program my computerto create a space in which everythingcould be linked to everything."

架构 1989年，WEB由三种技术构成

  • HTML
  • HTTP
  • URL

变迁

  • 只读时代：1989-2004，HTML/CSS/JavaScript
    • 单向发布
    • 静态只读
    • 链接跳转
    • 刷新页面
    • 表格对齐对象
    • CGI
  • 体验时代：2005-2010，Ajax/Web API/Jquery
    • 动态交互
    • 社交媒体
    • 用户生成内容（UGC）
    • 单页应用
    • JQuery
    • YUI
  • 敏捷时代：2010-至今，Fetch/Node.js/Webpack
    • 模块化
    • 组件化
    • 转译（transpiling）
    • 打包（bundling）
    • React
    • Vue

前端应用领域

  • To Business（eg. 工作平台、监控）
  • To Customer （eg. 电商）
  • To Developer

终端和跨端

前端开发的发展已经分为三大类，一种是终端命令行的格式，另一类是桌面跨段的格式，最后一类就是移动跨端。终端和跨端，这个应用领域通常是开发者工具，比如命令行工具里的Webpack、Babel、React、Vue，而桌面跨锦主要有Electron和NW.js，目前世界上最流行的编码环境VSCode就是基于Electron的一个web应用。

语言、框架、工具

前端有JS，TS语言，React，Vue框架，node，npm，webpack，git工具等等。刚开始前端只有HTML、CSS和JavaScript三种语言实现浏览器从静态显示到动态显示，后来又出现了WebAssembly,能够支持四种语言。

Web标准

关于Web标准

标准组织

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

W3C：

重点问题

浏览器的地址栏在输入完地址后回车会发生什么？

1、解析URL： 首先会对 URL 进行解析，分析所需要使用的传输协议和请求的资源的路径

2、缓存判断： 浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并且没有失效，那么就直接使用，否则向服务器发起新的请求。

3、DNS解析： 下一步首先需要获取的是输入的 URL 中的域名的 IP 地址，首先会判断本地是否有该域名的 IP 地址的缓存，如果有则使用，如果没有则向本地 DNS 服务器发起请求。

4、获取MAC地址： 当浏览器得到 IP 地址后，数据传输还需要知道目的主机 MAC 地址，因为应用层下发数据给传输层，TCP 协议会指定源端口号和目的端口号，然后下发给网络层。

5、TCP三次握手： 下面是 TCP 建立连接的三次握手的过程，首先客户端向服务器发送一个 SYN 连接请求报文段和一个随机序号，服务端接收到请求后向客户端发送一个 SYN ACK报文段，确认连接请求，并且也向客户端发送一个随机序号。客户端接收服务器的确认应答后，进入连接建立的状态，同时向服务器也发送一个ACK 确认报文段，服务器端接收到确认后，也进入连接建立状态。

7、返回数据： 当页面请求发送到服务器端后，服务器端会返回一个 html 文件作为响应，浏览器接收到响应后，开始对 html 文件进行解析，开始页面的渲染过程。

8、页面渲染： 浏览器首先会根据 html 文件构建 DOM 树，根据解析到的 css 文件构建 CSSOM 树，如果遇到 script 标签，则判端是否含有 defer 或者 async 属性，要不然 script 的加载和执行会造成页面的渲染的阻塞。当 DOM 树和 CSSOM 树建立好后，根据它们来构建渲染树。

9、TCP四次挥手： 最后一步是 TCP 断开连接的四次挥手过程。若客户端认为数据发送完成，则它需要向服务端发送连接释放请求。服务端收到连接释放请求后，会告诉应用层要释放 TCP 链接。

总结

这节课对前端技术的发展历史以及相关知识有了进一步了解，知道了前端应用领域和学习方向，另外熟悉web标准可以帮助我们写出更好的代码。

avatar
文章
阅读
粉丝