浏览器基础知识

跨域

什么是跨域

浏览器的同源策略限制带来的跨域问题

同源策略

同源策略由Netsacpe公司1995年引入浏览器，主要是对浏览器进行防护免受XSS、CSFR的攻击。

在这个策略下，在相同的源的基础上，浏览器允许第一个页面的脚本访问第二个页面里的数据。

同源

如果两个URL的协议、域名、端口都相同，则这两个URL是同源的

如何解决跨域问题

反向代理

反向代理是 代理服务器对目标服务器进行代理。

www.a.com 转发到 http://b.com
server {
    listen 80; // 监听端口
    server_name www.a.com; // 监听地址
    
    location / { // 访问 www.a.com:80 时的所有路径都转发到 proxy_pass 配置的路径中
        root /usr/share/nginx/html; // 根目录
        index index.html index.html; // 设置默认页
        proxy_pass http://b.com； // 配置反向代理的url
    }
}

跨域技术 - CORS

浏览器是否启用同源策略是根据后端响应的 Access-Control-Allow-Origin 响应头来定的，所以配置后端是最直接的一种方法，也是工作中最常用的解决方式。

res.setHeader('Access-Control-Allow-Origin','*')
/*
    如果设置 * ，则会允许所有的请求
*/

cors 默认会允许所有跨域请求，如果要限制指定域名，可以给它的origin配置项传递一个字符串或数组，用于指定一个或多个允许跨域的域名：

app.use(cors({ 
    origin: ['http://domain1.com', 'http://domain2.com'] 
}))

JSONP

原理

利用 script 标签没有跨域限制的特点，通过动态生成 script 标签，指定 src 属性的方式加载跨域资源。【需要后端的配合】

前端：
1. 动态创建script标签，指定src属性拼接?callback回调函数名称
2. 定义与回调函数同名函数（做接收）

后端：
1. 获取回调函数的方法名称
2. 拼接返回的数据

【只支持GET请求】

参考：【知识体系 - Node系列】 - 掘金 (juejin.cn)

浏览器存储

存储类别

webStorage
- localStoarge
- sessionStroage
cookie
IndexedDR

webStorage

包括sessionStorage 和 localStorage。两者的主要区别在于，sessionStorage是会话级别的存储，localStorage属于持久化存储。

存储大小一般在 2.5 ~ 10M

sessionStorage

每个浏览器tab都有自己的session，且不可互相访问。页面关闭之后，其session存储的数据也会被销毁。

用法

// 存储
sessionStorage.setItem('lastName', 'elio');
sessionStorage.lastName = 'elio';
sessionStorage['lastName'] = 'elio';

// 获取
sessionStorage.getItem('lastName');
sessionStorage.lastName;

// 清除
// 删除某一个数据
sessionStorage.removeItem('lastName');
delete sessionStorage.lastName;

// 删除所有数据
sessionStorage.clear();

localStorage

浏览器共用一个localStorage，需要手动删除或清除浏览器缓存才能清除（即使关闭tab或浏览器都不能清除）。用法同sessionStorage

cookie

cookie 是一种纯文本的数据存储。

工作过程

当网页要发送http请求时，浏览器会先检查是否有相应的 cookie。有则自动添加到request header 中的 cookie 字段中。

特征

不同浏览器存放cookie位置不同
cookie的存储是以域名形式进行区分的，不同域名下的cookie是独立的
一个域下存放的cookie数量有限，不同浏览器存放的个数不同
大小一般为 4KB
cookie默认会话结束自动销毁，可以设置过期时间

分类

会话cookie：不包含过期时间。会话cookie存储的内容不会写入磁盘，关闭浏览器cookie就会自动销毁。
持久cookie：包含过期时间。持久cookie会在指定的日期后从磁盘删除。

设置

读取cookie

document.cookie = '名字=值'
document.cookie = 'username=elio;domain='

服务端设置cookie

服务端返回的 response header 中有一向叫 set-cookie, 是服务端专门用来设置 cookie 的,

Set-Cookie 消息头是一个字符串，其格式如下（中括号中的部分是可选的）：
Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]

浏览器内核

浏览器内核（Rendering Engine）

浏览器	内核
IE	Trident
firefox	Gecko
Safari	webkit
Chrome	webkit
Opera	Blink

浏览器内核主要分为两个部分：渲染引擎和JS引擎

最开始渲染引擎和JS引擎并没有区分很明确。后来JS引擎越来越独立，内核就倾向于指代渲染引擎。

渲染引擎：负责获取网页内容（HTML）、渲染页面（CSS），浏览器内核不同会使网页产生不同的语法解释，渲染的效果也不同。
JS引擎：解释和执行JS实现网页的动态效果。

渲染引擎如何工作

【首先】浏览器获取HTML文件，并对其进行解析，形成 `DOM Tree`
【然后】进行CSS解析，生成 `style rules`
【紧接着】将`DOM Tree`与`Style rules`结合生成 `Render Tree`
【接着】进入`Layout-布局`阶段，就是为每个节点分配一个屏幕坐标
【随后】调用`GPU`进行`绘制-Paint`，遍历`Render Tree`中的节点，将元素渲染出来

JS引擎如何工作 - V8解析JS过程b

【首先】JS引擎将JS代码解析为`AST-抽象语法树`
【紧接着】`解释器-interperter`将AST转化为`字节码-bytecode`（这一步JS引擎开始执行JS代码）
【最后】`编译器-complier`对字节码中的代码进行优化成`机器指令-machine code`进行执行

【浏览器不全记录】 - 浏览器基础知识