浏览器DOM API

来源于以下链接，这里仅供个人复习使用

前端面试每日一题：https://q.shanyue.tech/
一本正经前端面试清单： http://huasenjio.top/article/interview

1、cookie

cookie是服务器保存在浏览器的一小段文本信息，浏览器在向服务器发送请求时会自动附上这段信息。

常用场合：

• 对话管理：保存登录、购物车等需要记录的信息
• 个性化：保存用户偏好，浏览器字体大小、背景色
• 追踪：记录和分析用户行为

注：cookie不可跨域，即每个cookie都绑定单一的域名

cookie的属性：
（1）name
（2）value
（3）path
（4）domain
（5）expires：有效期（同时设置max-age时，max-age优先生效）
（6）secure：当这个属性设置为true时，此cookie只会在https和ssl等安全协议下传输
（7）HttpOnly：当这个属性设置为true时，不能通过js获取cookie，能有效地防止xss攻击

如果浏览器要更改一个早先设置的cookie，必须同时满足cookie的key、domain、path、secure都匹配

//使用js操作cookie
document.cookie='name=,path=/,domain=,expires='

删除cookie：

1. 将max-age设为-1
2. 将expires设置为已过期时间

2、如何判断当前环境是移动端还是PC端

var userAgentInfo=navigator.userAgent
    console.log(userAgentInfo);
    var Agents=new Array(
      'Android',
      'iPhone',
      'SymbianOS',
      'Windows Phone',
      'iPad',
      'iPod'
    )
function isPc(Arr,val){
      return Arr.some(arrval=>arrval===val)
    }

3、input监听值的变化是在监听什么事件？

• keypress：按任意键触发
• keydown：只按字符键触发
• keyup
• input

注：onchange无法实时监听，因为它要失去焦点才能触发

4、什么是跨域，如何解决？

协议（如http和https）、域名（如.baidu.com和.google.com）、端口（如80、81）任一不一致就是跨域

解决方案：

（1）响应头
响应头配置Access-Control-Allow-Origin：

• *，允许所有请求
• 域名，只允许指定域名的请求

（2）反向代理
跨域问题只存在于浏览器
使用中转服务器来发送请求和接收响应

//配置server
server:{
	proxy:{
		"/api":{
			traget:"http://loaclhost:5000",
			changeOrigin:true,
			rewrite:(path)=>path.replace(/^\/api/,"")	
		}
	}
}

（3）JSONP（只能处理get跨域）
script的src不受跨域限制

<script>
   window.callback=function(data){
     console.log(data);
   }
</script>
//81端口
<script src="index.js"></script>
callback(11111)

5、CSP是干什么用的？

csp只允许加载指定的脚本和样式，最大程度地防止xss攻击。

1. 外部脚本可以通过指定域名来限制：content-Security-Policy:script-src ‘self’,self代表只加载当前域名
2. 需要加载内联脚本，需要提供一个nonce，Content-Security-Policy: script-src 'nonce-xxxxxxxxxxxxxxxxxx’

例：攻击者通过恶意脚本注入到系统内，显示给访问用户，以获取用户信息，可以通过CSP设置信任域名才可以执行脚本

6、prefetch 与 preload 的区别是什么

• preload加载当前路由必须资源（加载后不执行），优先级高，好处在于将加载和执行分离开，不阻塞渲染和document的onload事件，不会出现依赖的font字体隔一段时间才刷出

<link rel="preload" href="">

• prefetch是告诉浏览器可能需要的资源。浏览器不一定会加载这些资源，优先级低。可用于提前prefetch下一屏内容

7、fetch 中 crendentials 指什么意思，可以取什么值

一个简单的fetch实例：

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

credentials 指在使用 fetch 发送请求时是否应当发送 cookie

• omit：从不发送cookie
• same-origin：同源时发送cookie
• include：同源和跨域时都发送cookie

8、当 cookie 没有设置 maxage 时，cookie 会存在多久

浏览器关闭就没有了

9、在浏览器中如何监听剪切板中内容

//先获取clipboard-read权限
const restlt=await navigator.permissions.query({name:"clipboard-read"})
//获取剪切内容
const text=await navigator.clipboard.readText()