五年面试，三年模拟(other篇)

什么是同源策略

为保护用户信息安全，防止恶意网站窃取用户数据，浏览器限制本域中的脚本只能访问本域中的资源，这就是同源策略。

下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例:

URL	结果	原因
http://store.company.com/dir2/other.html	同源	只有路径不同
http://store.company.com/dir/inner/another.html	同源	只有路径不同
https://store.company.com/secure.html	失败	协议不同
http://store.company.com:81/dir/etc.html	失败	端口不同 ( http:// 默认端口是80)
http://news.company.com/dir/other.html	失败	主机不同

如何跨域

jsonp

jsonp能实现跨域是利用了img、script和link标签自身的跨域能力。
我们知道当img或者script中的src是一个链接的时候，浏览器会请求这个链接获取资源，那么这个链接如果是跨域的，浏览器也会请求，从而达到了跨域请求的一个功能。

var script = document.createElement('script');
script.src = 'http://localhost:3000/api/test.do?a=1&b=2&callback=cb';
$('body').append(script);

function cb(res){
    // do something
    console.log(res)
}

可以看到，我们创建一个script标签，将src改成我们要请求的接口，并将script添加在body中，那么当浏览器解析到这个script时，会想src对应的服务器发送一个get请求，并将参数带过去。
然后当浏览器接收到服务端返回的数据，就会触发参数中callbak对应的回调函数cb，从而完成整个get请求。

cors

cors 是一个W3C标准,全称是”跨域资源共享”（Cross-origin resource sharing），它允许浏览器向跨源服务器发送XMLHttpRequest请求。

具体实现：通过后端设置响应头（Access-Control-Allow-Origin），里面可以设置两种形式，一种是‘*’，允许所有请求跨域，另一种是设置指定的具体地址，它只允许指定的这个地址跨域。

nginx

nginx解决跨域的问题跟之前的方法有所不同，它是通过服务器的方向代理，将前端访问域名跟后端服务域名映射到同源的地址下，从而实现前端服务和后端服务的同源。

vue proxyTable

在我们使用npm run dev命中，启动了一个node服务，然后将前端发出的请求发送到node服务，再将该服务转发到原本的后台服务，在这过程中实现了一层代理，由一个node服务发送一个请求到另外一个后台服务，自然也没有了浏览器所限制的跨域问题。

https 和 http的区别

1. http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl/tls加密传输协议
2. 默认端口不一样，http是80，https是443
3. http连接没有状态，https是ssl加密的传输，身份认证的网络协议

长连接和短连接区别

短连接：连接->传输数据->关闭连接
长连接：连接->传输数据->保持连接 -> 传输数据-> ………..->直到一方主动关闭连接

import require区别

require/exports 和 import/export 遵循的规范不同

import/export是ES2015的模块
require/exports是CommonJS(在Node中实现)

require/exports 和 import/export 语法不一样

// require/exports 的用法只有以下三种简单的写法：

const fs = require('fs')
exports.fs = fs
module.exports = fs

// import/export 的写法
import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'

export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'

git和svn区别

1.git是分布式的，而svn不是

2.git可以离线提交，而svn不可以

浏览器输入网址到完成请求的整个过程

1.DNS域名解析（获得IP地址，访问服务器）

2.建立TCP连接（三次握手）

3.发送HTTP请求

4.服务器得到并处理请求，返回HTTP报文

5.浏览器下载web服务器返回的数据及解析html源文件

6.生成DOM树，解析css和js，渲染页面，直至显示完成

前端性能优化方式

• 按需隐入（如element ui）
• 路由图片懒加载
• 使用CDN(网站上静态资源即css、js、图片全都使用cdn分发)
• 使用gzip压缩内容
• 把CSS放到顶部、把JS放到底部(加载js时会对后续的资源造成阻塞，必须得等js加载完才去加载后续的文件)
• 接口缓存(如请求数据字典)

get和post请求的区别

1.get把请求的数据放在url上,post把数据放在HTTP的包体内

2.get请示的参数的数据长度是有限制，而post请求的数据长度没有限制

3.从语义上来说：get是从服务器获取数据，post是向服务器提交数据

为什么操作dom消耗性能

DOM操作通常会导致浏览器的回流，而回流的代价很高