浏览器面试题整理

浏览器网页生成过程

1. 构建 dom 树
2. 解析 CSS，构建 CSSOM 树
3. 结合 CSS 和 CSSOM 树，生成一棵渲染树(Render Tree)
4. 布局阶段生成 LayoutTree
5. 分层生成 LayerTree
6. Paint 绘制阶段
7. 栅格化(raster)操作
8. 合成与展示

什么是重排和重绘？

• 重排（也称回流）
  当 DOM 的变化影响了元素的几何信息(DOM 对象的位置和大小)，浏览器需要重新计算的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
  触发条件：

1. 添加或者删除可见的 DOM 元素
2. 元素尺寸改变——盒模型的各个值改变。

• 重绘：当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，叫做重绘。
  触发条件：

1. 改变元素的 color、background、box-shadow 等属性。

参考https://juejin.cn/post/6844903779700047885

DOM 和 BOM

BOM 是指浏览器对象模型，可以对浏览器窗口进行访问和操作。
DOM 是文档对象模型，允许脚本和程序动态访问和更新内容、结构和样式。

浏览器从输入 url 到渲染页面，发生了什么

1. 构建请求
2. 查找缓存
3. 准备 ip 地址和端口（包含 DNS)
4. 等待 TCP 队列（同一个域名 6 个连结）
5. 建立 TCP 连接
6. 发送 HTTP 请求

XSS

XSS 是跨站脚本攻击，分为存储型、反射型、dom 型。

XSS 避免方式：

url 参数使用 encodeURIComponent 方法转义
尽量不是有 InnerHtml 插入 HTML 内容
使用特殊符号、标签转义符。

CSFR

跨站请求伪造，攻击者通过伪造用户的浏览器的请求，向访问一个用户自己曾经认证访问过的网站发送出去，使目标网站接收并误以为是用户的真实操作而去执行命令

CSRF 防御：

1. 验证 HTTP referer 字段
2. 请求添加 token
3. HTTP 头中添加自定义属性。

浏览器缓存

强制缓存：Expires、cache-control
协商缓存：Last-Modified/Etag。
区别在于是否会发请求。

前端性能优化

1. 浏览器缓存。
2. 懒加载
3. nginx 配置 gzip 压缩
4. webpack 打包配置
5. react 代码优化
6. 网络层面的优化（HTTP2.0）等。
7. 资源 CDN

跨域通信的方式

1. JSONP
   利用 script 标签没有跨域限制的漏洞实现，只支持 get，需要服务端配合。

2. CORS
   Accept-Control-Allow-Origin，简单请求和复杂请求

3. postmessage 多窗口通

4. websocket

5. Node 中间件

6. nginx 反向代理

7. iframe 嵌套(不安全，体验不好)

浏览器本地存储

cookie、webstorage、indexDb。
webstorage 分为 localstorage、sessionstorage。
保存在浏览器中，且同源。

大小不同：
cookie 不能超过 4k。localstorage、sessionStorage 能到 5M。
作用域不同：
sessionStorage:不在不同的浏览器窗口共享，即使是同一个页面。
localstorage:在所有同源窗口中是共享的，也就是说浏览器不关闭，数据仍然存在。
cookie: 在所有同源窗口共享，浏览器不关闭，数据仍然存在。

script 标签中的 defer 和 async 区别

script 标签会阻塞 html 解析，只有下载好并执行完脚本才会继续解析 html。
async，解析 HTML 的过程中进行脚本的异步下载，下载成功后立马执行。
defer,解析完成后执行脚本。