1.cookie和session的共同点和区别
共同点：都是用于保存用户状态的机制。
不同：
- cookie数据保存在客户端（浏览器），session数据保存在服务器端。对于并发访问量很大的网站，session会给服务器造成负担。
- cookie只能保存ASCII字符串，session可以保存任意数据类型。
- 单个cookie保存的数据大小不能超过4K，session可存储的数据远高于cookie。
- 可以通过设置Cookie的属性，达到Cookie长期有效的效果。Session一般有效时间较短，客户端关闭或者Session超时都会失效。
2.cookie，localStorage，sessionStorage的共同点和区别
共同点：都是保存在浏览器端，都遵循同源策略。
不同：
- cookie始终在同源的http请求中携带，localStorage和sessionStorage不会主动把数据发送给服务器，仅在本地保存。
- cookie数据大小不能超过4K，localStorage和sessionStorage可以保存5MB的信息。
- cookie在设置的过期时间之前一直有效，sessionStorage仅在当前浏览器窗口关闭前有效，localStorage除非被手动清除，否则始终有效。
- sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
3.跨域
只要协议、域名、端口有一个不一样就形成了跨域。需要注意的是，跨域并不是服务端没有返回数据，而是浏览器进行了拦截，不执行脚本。
解决办法：
- JSONP
jsonp的原理是利用script标签不受跨域的限制，发送带有callback参数的get请求，服务端接收到请求后，通过该参数获取到回调函数名，并将数据放在参数中将其返回。
缺点：只能接受get请求 - CORS
CORS全称是"跨域资源共享"（Cross-origin resource sharing）。CORS需要服务器进行适配。
服务器在收到请求后设置响应头的Access-Control-Allow-Origin字段，该值要和请求头中Origin的值一致。 - nginx反向代理
nginx代理一般使用在生产环境。是服务端解决跨域的一种方案。
#如果监听到请求接口地址是 www.xxx.com/api/page ，nginx就向http://www.yyy.com:9999/api/page这个地址发送请求
server {
listen 80;
server_name www.xxx.com;
#判过滤出含有api的请求
location /api/ {
proxy_pass http://www.yyy.com:9999; #真实服务器的地址
}
}
- WebSocket
浏览器支持WebSocket通信，而WebSocket没有浏览器跨域的限制，因此也可以解决跨域问题。
4.正向代理和反向代理的区别。
反向代理指的是隐藏了真实的服务端，正向代理指的是隐藏了真实的客户端。
在正向代理中，proxy是clien设置的，用来隐藏client。在反向代理中，proxy是server设置的，用来隐藏server。
5.XSS攻击、CSRF攻击及防范。
XSS攻击指的是跨站脚本攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行，从而获取用户的敏感信息如cookie、sessionID等。
防范方法：
cookie使用http-only，使得脚本无法获取。
CSP白名单，告诉浏览器哪些外部资源可以加载和执行，阻止恶意代码执行。
CSRF攻击指的是跨站请求伪造攻击。攻击者诱导用户进入一个三方网站，然后该网站向被攻击网站发送请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。
防范方法：
同源检测，服务器根据http请求头中origin或referer信息来判断请求是否是为允许访问的站点，从而对请求进行过滤。
给cookie设置Samesite属性，限制cookie不能被第三方使用。
6.性能优化
- 加载优化：减少HTTP请求，使用缓存资源，压缩代码，压缩图像，按需加载。
- 执行优化：css写在头部，js写在尾部并异步调用。避免img、iframe等的src为空。
- 渲染优化：设置viewport，优化动画，防抖，节流，减少dom节点。
- 样式优化：值为0时不需要加单位，不滥用float，正确使用display。
- 脚本优化：减少重绘、重排，尽量使用id选择器，尽量使用事件代理。
7.浏览器页面渲染过程
- HTML解析生成DOM树。
- CSS解析生成CSSOM树。
- 结合DOM树和CSSOM树，生成渲染树。
- 计算节点布局。
- 绘制页面。
