Web标准与前端规范化 | 青训营笔记

给我一杯泰绿魔法药水
162 阅读5分钟

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

本堂课重点内容：

介绍了关于前端开发：起源、架构、变迁，前端与服务器、网页、浏览器相关知识、前端网页各种规范标准

前端开发：起源、架构、变迁

只读时代

1989-2004 HTML/CSS/JavaScript

特点：获取服务器的信息就要发送一次请求，获得一个网页。更新页面需要再发一次请求来替换。类似阅读器

  • 单向发布
  • 静态只读
  • 链接跳转
  • 刷新页面
  • 表格对齐元素
  • CGI

体验时代

2005-2010 Ajax/Web API/jQuery

特点：ajax，httprequest，修改dom树

  • 动态交互
  • 社交媒体
  • 用户生成内容(UGC)
  • 单页应用(SPA)
  • jQuery
  • YUI

敏捷时代

2010-2021 Fetch/Node.js/Webpack

  • 模块化
  • 组件化
  • 转译(transpiling)
  • 打包(bundling)
  • React.js
  • Vue.js

前端应用领域

  • To Business 企业级应用
  • To Customer 通过网站/手机端展示给客户
  • To Developer 开发工具给开发者

服务器、网络、浏览器

HTTP 是一种能够获取如 HTML 这样的网络资源的 protocol(通讯协议)。它是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受方发起的。

HTTP

HTTP 是一种能够获取如 HTML 这样的网络资源的(通讯协议)

它是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受方发起的。

HTTP协议的主要特点

  • 简单快速 --- 可以理解为每个资源的URI（统一资源定位符）都是固定的，所以在http协议处理起来比较容易
  • 灵活 --- 每个http协议的头部都有一个类型，通过一个http协议就能完成不同类型的传输，所以比较灵活
  • 无连接--- http协议连接一次之后就会断开，不会保持连接
  • 无状态--- 可以理解为服务端和客户端是两种身份，单从http协议中是无法区分两次协议者的身份

常见状态码

  • 1XX --- 指示信息，表示请求已接受，继续处理
  • 2XX --- 成功，表示请求已被成功接受
    • 200 --- OK，客户端请求成功
    • 206 --- 客户端发送了一个带有Range头的GET请求，视频/音频可能会用到
  • 3XX --- 重定向，要完成请求，必需进行近一步操作

重定向是服务器发起的跳转，要求客户端使用新的 URI 重新发送请求。在响应头字段 Location 中指示了要跳转的 URI。使用 Refresh 字段，还可以实现延时重定向。

    • 301 --- 重定向，所请求的界面转移到新的url，永久重定向
    • 302 --- 同上301，但是是临时重定向
    • 304 --- 缓存，服务端告诉客户端有缓存可用，不用重新请求
  • 4XX --- 客户端错误，请求有语法错误或请求无法实现
    • 400 --- Bad Request， 客户端请求有语法错误
    • 401 --- Unauthorized, 请求未授权
    • 403 --- Forbidden, 禁止页面访问
    • 404 --- Not found， 请求资源不存在
  • 5XX --- 服务端错误，服务器未能实现合法的请求
    • 500 --- Internal Server Error, 服务器错误
    • 503 --- Server Unavailable, 请求未完成，服务器临时过载或者宕机，一段时间后可恢复正常

浏览器

从输入 URL 到显示发生了什么

  • 浏览器从url中解析出服务器的主机名
  • 浏览器将服务器的主机名转换成服务器的IP地址（DNS）
  • 浏览器将端口号从url中解析出来
  • 浏览器建立一条与web服务器的TCP连接
  • 浏览器向服务器发送一条HTTP的请求报文
  • 服务器向浏览器回送一条HTTP的响应报文
  • 关闭连接，浏览器渲染

浏览器建立一条与web服务器的TCP连接的时候多了哪些事（三次握手/四次挥手）？

  • 三次握手
      • 客户端首先发送一个带有SYN标志的数据包给服务端
      • 服务端接受SYN数据包之后，回传一个SYN/ACK标志的数据包以示传达确认连接信息
      • 客户端收到SYN/ACK的确认数据包之后，再回传一个ACK标志的数据包给服务端，表示‘握手’结束
  • 四次挥手
      • 客户端向服务端先发送一个带有FIN标志的数据包给服务端
      • 服务端接受FIN数据包之后，回传一个ACK的数据包给客户端以示传达确认关闭信息
      • 服务端向客户端发送一个FIN标志的数据包，请求关闭连接
      • 客户端收到FIN的数据包之后，回传一个ACK的数据包给服务端，以表示确认关闭

浏览器的渲染过程

  • html元素转成DOM树
  • css 样式转成CSS 树
  • DOM 树和CSS 树整合形成渲染树
  • 通过布局计算DOM 元素要显示的位置和样式
  • 浏览器进行绘制渲染

TCP、UDP

  1. TCP是面向连接的，UDP 是无连接的，即发送数据前不需要先建立链接。
  2. TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达；UDP尽最大努力交付，即不保证可靠交付。 并且因为tcp可靠，面向连接，不会丢失数据因此适合大数据量的交换。
  3. TCP是面向字节流，UDP面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如IP电话和视频会议等）。
  4. TCP只能是1对1的，UDP不是

引用参考

avatar
文章
阅读
粉丝