# 其他

这里会搜集一些有关Web的零碎知识

# 渐进增强、优雅降级

渐进增强是指,针对低版本浏览器进行构建(先保证最基本的功能),然后再针对高级浏览器进行改进。

优雅降级是指,一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

# 正向代理、反向代理

# 正向代理

系统内部要访问外部网络时,统一通过一个代理服务器把请求转发出去。那在外部网络看起来这个请求就只是代理服务器发起的访问

此时代理服务器实现的就是正向代理

// 在vue里的config/index.js中dev对象的proxyTable上设置,来解决开发时跨域问题
dev: {
    proxyTable: {
        '/api': {
            target: 'http://192.168.5.2',
            changeOrigin: true
        }
    }
}
1
2
3
4
5
6
7
8
9

# 反向代理

外部请求进入内部系统时,代理服务器把该请求转发到系统中的某台指定的服务器上。那在外部请求看起来和它交互的只有这个代理服务器

此时代理服务器实现的就是反向代理。

  • 浏览器对域名解析后,实际上得到的是 反向代理服务器的IP,而不是直接的服务器IP。(然后通过Nginx再把具体的http请求转发到某台指定的服务器上。)

TIP

跨域原理:通过把本地的一个url前缀映射到要跨域访问的web服务器上。

  • 对于浏览器来说,访问的是同源服务器上的一个url;
  • 对于Nginx来说,通过检测URL前缀,把HTTP请求转发到后面真实的物理服务器上
// 客户端 部分
192.168.72.49 8081.max.com
192.168.72.49 8082.max.com
--------------------------

// 服务端 部分
server {
    listen 80;
    server_name 8081.max.com // 根据这个字段进行匹配

    location / {
        proxy_pass http://192.168.72.49:8081 //再根据这个字段进行转发
    }
}

server {
    listen 80;
    server_name 8082.max.com

    location / {
        proxy_pass http://192.168.72.49:8082
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Nginx配置Demo

# TCP三次握手、四次挥手

三次握手:

  • 客户端发送SYN=1服务端
  • 服务端收到SYN=1后,会给客户端发送SYN=1、ACK=1
  • 客户端收到SYN=1、ACK=1后,会给服务端发送ACK=1

alt

四次挥手:

  • 客户端会发送FIN=1服务端
  • 服务端收到FIN=1后,会发送ACK=1客户端
  • 服务端再发送FIN=1客户端
  • 客户端收到FIN=1,发送ACK=1服务端

alt

# DNS

顺序:

  • 1、本地host文件
  • 2、本地DNS解析器
  • 3、本地DNS服务器
  • 4、根域名服务器
  • 5、顶级域名服务器
  • 6、权威域名服务器

# Base64

最近听说对于存储图片有两种方式,一种是最常见的url,另一种是base64

base64编码 可以将 一张图片数据 编码成 一串字符串,这个字符串可以替代图像地址。

  • 每一张图片都有 固定的base64编码,所以不用上传到服务器

# 意义

最大好处:减少https请求

# 使用方法

<img src="data:image/png; base64, R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP">

// css同理 
1
2
3

# 适用范围

1、图片足够小

2、复用性高,且基本不会被更新

3、无法被制作成css sprites

# 如何转为base64编码?

1、在线地址: http://www.pjhome.net/web/html5/encodeDataUrl.htm

2、在chrome直接拖入一张图片,F12,Source,点击图片即可

# WebAssembly

# 目前状况

WebAssembly在2017年受到主流浏览器的支持,并发布了MVP版本(Minimum Viable Product,最简可行产品),单并非最终版本。

# MVP版本的特点(4个基本技能要求)

  • 编译

    能够将许多不同的语言编译成WebAssembly

  • 快速执行

    编译成WebAssembly后的应用能够快速执行

  • 压缩

    为了加速载入速度

  • 线性内存分配

    和JavaScript使用内存的方式有区别,它能够直接管理使用的内存

# 未来WebAssembly的“新技能”

包括:多线程、隐式HTTP缓存、64位寻址、分层编译器等等;

一旦以上功能全部就位,WebAssembly就可以和JavaScript互操作了,包括JS和WebAssembly之间的快速调用、简单的数据交换、ES模块集成、工具链集成和向后兼容性。

目前WebAssembly还不支持高阶的语言功能,包括垃圾回收、异常处理、调试一级尾调用(Tail calls)。

更新时间: 11/21/2021, 2:45:24 AM