关于前端的知识一

本文章主要讲解什么是前端以及了解什么是DNS,http

1.什么是前端

1.1 前端的历史

前端的历史可以追溯到1990年代，当时的互联网还处于早期阶段，网页的设计和开发主要依赖于静态的HTML页面。随着互联网的发展，前端技术也逐渐得到了广泛的应用。

1.2 现代前端的工作

现代前端除了解决人机交互这个主要问题外,还拓展出了很多用户体验和工程问题

用户体验:

  • 性能优化: 更加有效的提升用户界面的加载效率
  • 无障碍化: 如何保证在不同设备上的兼容性
  • 交互设计: 如何改善在移动设备的交互方式
  • 个性化需求: 如何满足个性化需求

工程配置:

  • 研发质量: 如何大幅度提高开发效率和质量
  • 安全措施: 如何保证前端安全
  • 监控和数据: 如何利用实时监控了解应用健康度
  • 部署运维: 如何利用云基础平台进行部署和运维

1.3 现代前端与过去的区别

过去的前端主要依赖于HTML、CSS和JavaScript,等技术完成界面开发，对接后端接口即可

现代前端的能力边界已经拓展了许多，还需要照顾到体验,效能,工程化,数据运营,部署运维,终端安全,多端适配等,这些都是为了更好的服务与人机交互

举个栗子!现代前端的界面渲染方式已经从客户端渲染(CSR)过渡到部分服务端渲染(SSR),而流式渲染(Streaming)我认为是未来的趋势,流式渲染与服务器渲染的最大区别简单来说就是流式渲染的速度比服务器渲染快

现代前端很多时候都不全是在做前端的事,前端与服务端的界限已经越来越模糊,当然前端借助服务端所做的一切都是为了服务于用户的体验

2.什么是DNS

DNS(Domain Name System)是互联网的基础,它将域名和IP地址相互映射,使得用户可以通过域名访问网站,而不是IP地址,现代DNS服务器除了基本的域名解析功能外，还会提供安全插件(DNSSEC),DNS分析,边缘网络加速解析,DDos防护等功能,这些功能都是为了更快,更安全的为用户提供服务

2.1 DNS的工作原理

当用户在浏览器中输入一个域名时,浏览器会首先检查本地的DNS缓存,如果缓存中有对应的IP地址,则直接返回,否则会向本地DNS服务器,最后得到的是IP地址,当然这些服务器大概率不是最终的应用服务器，而是具有反向代理的负载均衡(LB)服务器或WEB应用防火墙(WAW)等,真正的应用服务器IP地址不会暴露在公网环境

2.2 内容分发系统(CDN)与DNS的关系

在不同地区的用户在访问前端静态资源时会从不同的cdn节点下载数据,这归功于DNS系统的CNAME记录,DNS服务器会根据用户所在地区的不同,将用户引导到最近的cdn节点也就是CNAME域名,从而提高用户的访问速度

举个栗子,假如我们的图片资源托管在img.alicdn.com上,通过nslookup工具以此查询当前域名的CNAME和A记录,最终我们会得到CDN服务器的IP地址,实际的地理位置会是在离你最近的CDN节点上

如栗子所说DNS解析不是一轮完成,会进行多次查询,所以会非常慢,所以不管是DNS云服务器还是互联网上的基础设施,都会想尽办法加速DNS解析的速度如使用高性能的DNS服务器,DNS缓存，增加DNS记录的缓存时间(TTL)等方式,作为前端我们可是使用浏览器提供的DNS预取功能来指定需要提前解析的域名,也可以根据DNS的缓存原理通过本地调试的方式设置本地host来解决cookies的跨域问题

3.什么是HTTP协议

HTTP协议是连接世界的桥梁,是人们打开互联网的y钥匙,它对于前端的重要性是毫无疑问的,虽然HTTP叫传输协议,但它实际上是工作在TCP/IP协议栈的应用层,底层的数据传输由TCP或UDP负责

3.1 HTTP的版本

  • HTTP/1.1: 目前还是广泛的版本,它支持持久连接,支持管线化,支持请求和响应的压缩,支持缓存等
  • HTTP/2:引入了多路复用,二进制帧层,头部压缩等特性,提高了不少传输性能
  • HTTP/3:基于QUIC协议使用UDP作为传输层,进一步降低了链接延迟和提高了不少传输性能

HTTPS是HTTP的安全版本,它使用了SSL/TLS协议来加密数据传输,确保数据的安全性,HTTPS的加密方式有对称加密和非对称加密两种,对称加密是指加密和解密使用同一个密钥,而非对称加密是指加密和解密使用不同的密钥,HTTPS的加密方式是先使用非对称加密来交换密钥,然后使用对称加密来加密数据,这样可以保证数据的安全性(HTTP/3 强制要求需要)

3.2 HTTP的工作原理

HTTP协议是基于请求和响应的,客户端向服务器发送请求,服务器处理请求并返回响应,HTTP协议是无状态的,即每次请求都是独立的,服务器不会记录客户端的状态,HTTP协议是基于TCP/IP协议栈的应用层协议,底层的数据传输由TCP或UDP负责

举个栗子,我的图片放在服务器上,我如果要得到这张图片我可以通过向服务器发送我想要图片的这个请求，服务器收到后会给我反馈也就是响应常见的响应是JSON格式的其中注意code返回的值2开头标识成功,4开头标识失败,5开头标识服务器错误,常见的响应状态码有200,301,302,404,500等

3.3 异步请求

前端和服务端的异步请求求通常也是通过HTTP协议完成,最早是通过XMLHttpRequest(XHR)完成的,但是随着ES6的出现,前端也可以使用Fetch API来完成异步请求,异步请求的好处是可以提高用户体验,减少页面的加载时间,但是也会带来一些问题,如请求的顺序问题,请求的并发数问题,请求的缓存问题等,这些问题都需要我们在开发中进行考虑

3.4 调试工具

浏览器开发者工具,在Chrome浏览器中可以使用F12打开开发者工具,在开发者工具中通过Network选项卡查看网络请求的请求和响应信息,如想快速看看可以通过cURL等命令行工具完成,在对api测试时可以使用Postman等自动化工具来批量完成,如需要调试移动设备的HTTPS则需要安装信任证书以及通过网络代理工具来实现,如对于远程以及生产环境则需要使用抓包工具和分析服务器日志来完成

3.5 HTTP在大型客户端应用中的变体

为了更高效和安全的传输数据,同时兼容HTTP协议,会有一些变化,不是所有的客户端环境都支持先进的HTTP/2或HTTP/3原始HTTP协议在更复杂的高并发场景下会不够高效或稳定,大型技术基建通常会设计一层无线网关(Gateway)并对HTTP协议进行定制添加登录验证,请求跟踪,监控,限流等功能,而前端代码通过远程过程调用(RPC)的方式,而不是使用原始的HTTP,定制化的HTTP协议可以带来更加强大的功能