# 其他

这里会搜集一些有关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）。

← 浏览器缓存机制