前端常见八股文---浏览器
目录
1、什么是浏览器的同源策略？为什么要有同源策略？
2、怎么解决跨域问题？
2.1、JSONP
2.2、WebSocket
2.3、Cors
2.4、反向代理(node接口代理)
2.5、Nginx
2.6、postMessage
3、浏览器的本地存储方式有哪些，有什么区别，分别有哪些应用场景？
3.1、webStorage
3.2、Cookie
3.3、IndexedDB
3.4、Web SQL
4、回流与重绘
1、什么是浏览器的同源策略？为什么要有同源策略？
官方解析：同源策略（Same-Origin Policy）是浏览器安全策略的一项重要规则，它限制了浏览器只允许当前网页的脚本与来自同一站点（协议、主机、端口号相同）的窗口进行交互，而限制了与不同源（协议、主机、端口号任一不同）的窗口进行交互。同源策略的目的在于有效保护用户的信息安全和隐私。
同源策略主要分为三种：
- DOM同源策略： 限制了一个文档中的脚本只能访问同一来源的文档对象模型。
- XMLHttpRequest请求同源策略： 限制了通过XMLHttpRequest发起的请求只能访问同一来源的资源。
- Cookie、LocalStorage存储同源策略： 限制了对Cookie和LocalStorage的访问只能来自同一来源的页面。
如果不存在同源策略的限制，将会导致一系列Web攻击，如跨站脚本攻击（XSS）和跨站请求伪造（CSRF）。例如，通过iframe引入其他页面，用户在页面中输入了用户名和密码，恶意攻击者就可以获取不同源的DOM结构，进而获取用户的敏感信息。又如，用户向网站A发送的请求携带了对应的Cookie，当用户访问恶意网站B时，恶意脚本可能导致向网站A发送携带Cookie的Ajax请求，从而获取用户信息。同源策略的存在有助于防范这些安全风险。
2、怎么解决跨域问题？
官方解析：跨域问题（Cross-Origin Resource Sharing，CORS）是由于浏览器的同源策略（Same-Origin Policy）导致的。同源策略要求两个 URL 的协议、主机名和端口号都相同，否则就被认为是跨域的。浏览器在跨域请求时会受到同源策略的限制。
为了解决跨域问题，可以采用以下几种方法：
2.1、JSONP
因为浏览器同源策略的存在，导致存在跨域问题，以下这三个标签加载资源路径是不受束缚的：
1. script标签：
2. link标签：
3. img标签：
JSONP利用了script标签的src加载不受同源策略限制的特性。通过在前端创建一个script标签，将回调函数名传递给后端，后端在接收到请求后，将所需数据拼接成一个字符串，形如callback(所需数据)，并作为脚本返回给前端。前端接收到这个字符串后，会自动执行回调函数，从而获取数据。JSONP需要前后端协作，而且仅支持GET请求方法。
前端代码示例：
// index.html http://127.0.0.1:8080/index.html
const jsonp = (url, params, cbName) => {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
window[cbName] = (data) => {
resolve(data);
document.body.removeChild(script);
};
params = { ...params, callback: cbName };
const str = Object.keys(params).map(key => `${key}=${params[key]}`);
script.src = `${url}?${str.join('&')}`;
document.body.appendChild(script);
});
};
jsonp('http://example.com/api', { name: 'john', age: 25 }, 'callback')
.then(data => {
console.log(data); // 处理获取的数据
});
后端代码示例：
// index.js http://127.0.0.1:8000
const http = require('http');
const urllib = require('url');
const port = 8000;
http.createServer(function(req, res) {
const { query } = urllib.parse(req.url, true);
if (query && query.callback) {
const { name, age, callback } = query;
const person = `${name}今年${age}岁了!!!`;
const str = `${callback}(${JSON.stringify(person)})`;
res.end(str);
} else {
res.end(JSON.stringify('没有数据'));
}
}).listen(port, function() {
console.log('server is listening on port ' + port);
});
JSONP的缺点是需要前后端协作，且仅支持GET请求方法。
2.2、WebSocket
WebSocket在设计时就考虑了可以跨域使用，与同源策略不附属。与传统的跨域检测方式不同，WebSocket的跨域检测是由服务端来处理的。尽管浏览器仍会携带Origin跨域请求头，但服务端负责判断这次跨域WebSocket请求是否合法。这种设计机制为WebSocket提供了更灵活的跨域使用方式。
前端代码示例：
// index.html http://127.0.0.1:8080/index.html
function myWebsocket(url,params){
return new Promise((resolve,reject)=>{
const socket = new WebSocket(url)
socket.onopen = () => {
socket.send(JSON.stringify(params))
}
socket.onmessage = (e) => {
resolve(e.data)
}
})
}
myWebsocket('ws://127.0.0.1:8000',{ name:'mos', age:18 }).then(data=>){
console.log(data) // mos今年18岁了!!!
}后端代码示例：
// index.js http://127.0.0.1:8000
const Websocket = require('ws');
const port = 8000;
const ws = new Websocket.Server({ port })
ws.on('connection',(obj) =>{
obj.on('message',(data) =>{
data = JSON.parse(data.toString())
const { name, age } = data
obj.send(`${name}今年${age}岁了!!!`)
})
})2.3、Cors
CORS，全称为Cross-Origin Resource Sharing，意为跨域资源共享。通常由后端来进行配置开启，一旦开启，前端就可以跨域访问后端。在前端跨域访问到后端时，后端开启CORS，发送Access-Control-Allow-Origin字段到前端，如果域名匹配，浏览器就不会执行跨域拦截，从而解决跨域问题。
前端代码示例：
// index.html http://127.0.0.1:8080/index.html
// 步骤一：创建异步对象
var ajax = new XMLHttpRequest();
// 步骤二：设置请求的url参数，参数一是请求的类型，参数二是请求的url，可以带参数
ajax.open('get', 'http://127.0.0.1:8000?name=梁理论&age=23');
// 步骤三：发送请求
ajax.send();
// 步骤四：注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
// 步骤五 如果能够进到这个判断 说明数据完美的回来了，并且请求的页面是存在的
console.log(ajax.responseText);
}
}
后端代码示例：
// index.js http://127.0.0.1:8000
const http = require('http');
const urllib = require('url');
const port = 8000;
http.createServer(function(req,res){
// 开启Cors
res.writeHead(200,{
// 设置允许跨域的域名，也可设置*允许所有域名
'Access-Control-Allow-Origin': 'http://127.0.0.1.8080',
// 跨域允许的请求⽅法，也可以设置*允许所有⽅法
"Access-Control-Allow-Methods": 'DELETE,PUT,POST,GET,OPIIONS',
// 允许的header类型
'Access-Contorl-Allow-Headers': 'Content-Type'
})
const { query : { name, age } } = urllib.parse(req.url, true);
res.end(`${name}今年${age}岁啦！！！`);
}).listen(port,function(){
console.log('server is listening on port ' + port);
})2.4、反向代理(node接口代理)
同源策略它只是浏览器的⼀个策略而已，它是不限制后端的，也就是前端-后端会被同源策略限制，但是后端-后端 则不会被限制，所以可以通过Node接口代理，先访问已设置Cors的后端1，再让后端1去访问后端2获取数据到后端1，后端1再把数据传到前端
前端代码：
// index.html http://127.0.0.1:8080
//步骤⼀:创建异步对象
var ajax = new XMLHttpRequest();
//步骤⼆:设置请求的url参数,参数⼀是请求的类型,参数⼆是请求的url,可以带参数,动态的传递参数
starName到服务端
ajax.open('get', 'http://127.0.0.1:8888?name=mos&age=18');
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调⽤
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的⻚⾯是存在的
console.log(ajax.responseText);//输⼊相应的内容
}
}后端1代码：
// index2.js http://127.0.0.1:8888
const http = require('http');
const urllib = require('url');
const querystring = require('querystring');
const port = 8888;
http.createServer(function (req, res) {
// 开启Cors
res.writeHead(200, {
//设置允许跨域的域名，也可设置*允许所有域名
'Access-Control-Allow-Origin': 'http://127.0.0.1:5500',
//跨域允许的请求⽅法，也可设置*允许所有⽅法
"Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",
//允许的header类型
'Access-Control-Allow-Headers': 'Content-Type'
})
const { query } = urllib.parse(req.url, true);
const { methods = 'GET', headers } = req
const proxyReq = http.request({
host: '127.0.0.1',
port: '8000',
path: `/?${querystring.stringify(query)}`,
methods,
headers
}, proxyRes => {
proxyRes.on('data', chunk => {
console.log(chunk.toString())
res.end(chunk.toString())
})
}).end()
}).listen(port, function () {
console.log('server is listening on port ' + port);
})后端2代码：
// index.js http://127.0.0.1:8000
const http = require('http');
const urllib = require('url');
const port = 8000;
http.createServer(function (req, res) {
console.log(888)
const { query: { name, age } } = urllib.parse(req.url, true);
res.end(`${name}今年${age}岁啦！！！`)
}).listen(port, function () {
console.log('server is listening on port ' + port);
})2.5、Nginx
其实Nginx跟node接口代理是同一个道理，只不过Nginx不需要我们去搭建一个中间服务
server{
listen 8888;
server_name 127.0.0.1;
location /{
proxy_pass 127.0.0.1:8000;
}
}2.6、postMessage
场景： 在 http://127.0.0.1:5500/index.html 页面中使用了