浏览器相关面试题
1. 什么是重排、重绘，如何避免？
重排也称回流，是指元素的尺寸、结构、位置等属性发生变化时，浏览器需要重新计算元素的几何属性，然后再绘制到屏幕上。重排是非常消耗性能的，因为它会导致整个页面的布局都需要重新计算。
重绘是指元素的外观发生变化，但没有影响布局，浏览器只需要重新绘制元素的外观即可。
重排一定会引起重绘，但重绘不一定会引起重排。
避免重排、重绘的方法：
- 使用
transform替代top、left等定位属性 - 使用
visibility: hidden替代display: none，前者只会引起重绘，后者会引起重排 - 使用
documentFragment将多次 DOM 操作合并为一次 - 使用
requestAnimationFrame，它会在下一次重绘前执行，可以将多次重绘合并为一次 - 使用
debounce函数，将多次事件合并为一次 - 使用
flex或grid布局table布局，因为table布局比较复杂，其中一个元素变化就可能会引起整个表格的重新布局
2. GET 和 POST 的区别
- GET 请求的数据会暴露在 URL 中，以
?分割 URL 和传输数据，参数之间以&相连，如?name=jack&age=18。POST 请求的数据放在请求体中。因此 POST 更安全一点。 - GET 请求的数据长度有限制，因为 URL 长度有限制，不同浏览器限制不同，一般在 2KB 到 8KB 之间。POST 请求没有限制。
- GET 请求会被浏览器主动缓存，而 POST 请求不会，除非手动设置。
- GET 请求只能进行 URL 编码，而 POST 支持多种编码方式。
- GET 请求参数会被完整保留在浏览器历史记录里，而 POST 中的参数不会被保留。
3. 什么是跨域，如何解决？
跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 实施的安全限制。
同源策略要求源相同才能进行通信，源指的是协议、域名、端口号。三者中有一个不同则不满足同源策略，就会产生跨域。
跨域带来的影响：
- 无法获取非同源网页的 Cookie、LocalStorage 和 IndexedDB
- 无法获取非同源网页的 DOM
- 无法向非同源地址发送 AJAX 请求
解决跨域的常用方法：
- JSONP：利用
<script>标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP 请求一定需要对方的服务器做支持才可以。 - CORS：服务端设置
Access-Control-Allow-Origin头，浏览器会根据这个头判断是否允许该跨域请求。 - 代理：同源策略是浏览器的安全策略，不是服务器的安全策略，因此服务器端并不会阻止跨域请求，可以通过服务器端请求数据然后返回给前端。
注意：浏览器其实能接收到对跨域请求的响应，但是被浏览器拦截了所以页面中用不了。
4. 什么是 XSS 攻击，如何预防？
XSS（Cross Site Scripting）攻击是指黑客在网站上注入恶意脚本，当用户浏览网页时，这些脚本会被执行，从而达到攻击的目的。
预防 XSS 攻击的方法：
- 对用户输入的数据进行过滤，将
<、>、"、'等特殊字符转义 - 使用 HTTP 头部中的
Content-Security-Policy，可以减少 XSS 攻击 - 使用
X-XSS-Protection头部，它是浏览器的一个内建的 XSS 防护功能 - 使用
X-Content-Type-Options头部，它是浏览器的一个内建的防止 MIME 类型混淆的功能 - 使用
X-Frame-Options头部，它是浏览器的一个内建的点击劫持防护功能 - 使用
HttpOnly属性，它是 Cookie 的一个属性，如果设置了HttpOnly，那么通过 JavaScript 脚本将无法读取到 Cookie - 使用
Secure属性，它是 Cookie 的一个属性，如果设置了Secure，那么 Cookie 只能用于加密传输协议，比如 HTTPS
5. 分析在浏览器地址栏输入 URL 到页面加载完成的过程
- 浏览器先看看自己缓存中有没有这个页面，有的话直接加载
- 依次从浏览器缓存、系统缓存、路由器缓存、ISP DNS 中查找域名对应的 IP 地址
- 根据查询到的 IP 地址，向服务器发起 HTTP 请求（基于 TCP 协议，三次握手）
- 服务器接收到请求后，根据路径参数等信息，处理请求，然后返回响应
- 浏览器接收到响应后，解析 HTML。得到 DOM 树、CSSOM 树和渲染树。在解析的过程中，如果遇到图片、音视频等资源，会再次向服务器发起请求
- 得到渲染树后，浏览器根据渲染树进行布局和绘制，最终呈现在页面上
6. 什么是虚拟 DOM
虚拟 DOM 是真实 DOM 的一个映射，它是一个纯 JS 对象，用于描述真实 DOM 的层次结构。当虚拟 DOM 发生变化时，会通过 diff 算法找出变化的部分，然后只更新变化的部分，这样可以减少对真实 DOM 的操作，提高性能。
7. 什么是 PWA
PWA（Progressive Web App）渐进式网页应用，是一种可以提供类似于原生应用的体验的 Web 应用。PWA 可以离线访问、推送通知、后台更新等，可以像原生应用一样被添加到主屏幕上。PWA 的核心技术包括 Service Worker、Web App Manifest、HTTPS 等。
8. script 标签的 defer 和 async 有什么区别
- defer：脚本会被延迟执行，直到文档解析完成后执行。多个 defer 脚本会按照它们在文档中出现的顺序执行。
- async：脚本会异步执行，不会阻塞文档解析，但是多个 async 脚本的执行顺序是不确定的。