前端知识-网络

网络

DNS

通过DNS服务器将域名转换成IP地址, 从而实现正确的网络连接. DNS服务器不仅部署在互联网的各个角落, 每一台终端设备都会内置本地DNS服务器.

• DNS查询

DNS查询时, 会依次经过应用程序的缓存, 本地hosts, 本地DNS服务器, 根服务器, 顶级域名服务器, 权威服务器, 最后得到真正的IP地址

• 购买域名

从域名服务商购买顶级域名, 同时提供域名解析服务

DNS记录的类型: A ( 保存最终要返回的IP地址 ), AAAA, CNAME ( 将子域名映射到另一个域名, 可以指向相同主域名或其他主域名 ), TXT, MX

• 分布式部署

在A记录上直接填写固定IP地址的方式只适用于简单的单机部署网站.

在大型应用中, 应用服务器以分布式方式部署, IP地址动态变化, 因此会采用动态解析IP地址的方式, 将同一个域名根据不同网络运营商, 不同地区, 解析到不同IP的服务器上.

这些服务器不是最终的应用服务器(不会暴露于公网环境), 而是具备反向代理能力的负载均衡(LB)服务器, WEB应用防火墙(WAF) 等等.

DNS服务器还会提供安全插件(DNSSEC), DNS分析, 边缘网络加速解析, DDoS防护等功能.

• 加速DNS解析

DNS解析加速: 高性能DNS服务器, 配置DNS缓存, 增加DNS记录的缓存时间(TTL).

前端通过浏览器提供的DNS预取功能来指定需要提前解析的域名, 可以让浏览器在解析完该标签后立即进行DNS查询

<link rel="dns-prefetch" href="//cdn.example.com">

• 跨域问题

利用DNS的查询原理, 通过修改本地hosts的方式来给项目配置一个域名, 而不是直接使用localhost, 这能有效解决与服务器联调时cookie无法跨域传输的问题

如果项目依赖中硬编码了线上域名, 通过修改本地DNS记录, 可以在不改变代码的情况下, 将线上域名映射到本地或者联调环境, 方便问题验证和多环境联调

• CDN-内容分发网络

当不同地区的用户访问前端静态资源时, 会从不同的CDN节点下载数据, 这归功于DNS系统的CNAME记录. DNS服务器会根据用户所在地区, 返回不同的CNAME域名(CDN加速域名).

HTTP协议

工作在TCP/IP协议栈的应用层, 底层的数据传输由TCP或UDP负责.

常用版本: HTTP/1.1, HTTP/2(多路复用, 二进制帧层, 头部压缩等特性, 提升传输性能), HTTP/3(基于QUIC协议使用UDP作为传输层, 进一步降低连接延迟和提升传输性能)

HTTPS: 加盖了一层SSL/TLS来实现加密传输

• 请求与响应

HTTP协议大体上是一种问答形式, 客户端发出请求, 服务器处理请求, 然后再给出响应.

服务器根据不同场景返回不同的响应码, 2表示成功, 3表示重定向, 4表示客户端错误, 5表示服务端错误.

在请求和响应报文中, 除了请求方法和响应码外, 最值得关注的就是请求头和响应头:

• 用于请求上下文的Host, Referer, User-Agent

• 用于响应上下文的Allow, Server

• 用于缓存的Cache-Control, Last-Modified/Last-Modified-Since, ETag/If-NoneMatch

• 用于Cookie的Cookie和Set-Cookie

• 用于安全的X-Frame-Options, Strict-Transport-Security(HSTS)

• 用于跨域控制(CORS)的Origin和Access-Control-* 一套

• Web API

浏览器加载资源会使用HTTP协议, 前端与服务端的异步请求通常也通过HTTP协议完成

最早使用XMLHttpRequest(XHR)在浏览器中发起一个异步请求, 基于XHR的有jQuery, ajax, superagent和axios

后来的Fetch API标准在不同环境下有不同的实现, 比如Node.js环境下基于Undici, 边缘运行时(Edge Runtime)中, Fetch API也会依据平台有所不同.

• 测试

在针对API测试的场景下, 可以通过Postman等自动化工具来批量测试; 调试移动设备内的HTTPS则需要安装信任证书以及通过网络代理工具来实现; 对于远程或是生产环境, 通过抓包和分析服务端日志来完成

• 扩展

在大型客户端应用中, 为了更高效和安全的传输数据, 同时兼容HTTP协议(原始HTTP协议在更复杂的高并发场景下, 会不够高效稳定), 大型技术基建通常会设计一层无线网关(Gateway), 并对HTTP进行定制, 增加登录验证, 请求跟踪, 监控, 限流等功能. 而前端代码通过远程过程调用(RPC)的方式, 而非直接使用原始HTTP.