第 3 卷

• 修改宽高（width/height）、内外边距（margin/padding）、边框（border）；
• 修改定位（position）、浮动（float）、top/left/right/bottom；
• 修改字体大小（font-size）、行高（line-height）（影响文字排版尺寸）；
• 修改 box-sizing、 min-width / max-height 等布局相关属性。

1. 浏览器/窗口操作

• 浏览器窗口大小改变（resize事件）；
• 页面滚动（部分浏览器对滚动的回流做了优化，仅计算可视区域）；
• 浏览器缩放（zoom）。

1. 其他强制计算场景

• 调用获取布局属性的API（会强制浏览器立即回流，获取最新值），如：

offsetWidth/offsetHeight、 clientWidth/clientHeight、 scrollWidth/scrollHeight、

getBoundingClientRect()、 getComputedStyle()。

9. 解释什么是重绘(Repaint)以及它在浏览器渲染网页时的作用

重绘（Repaint/Paint）的定义

重绘是浏览器在回流完成后，根据渲染树的样式规则，重新绘制节点的像素内容的过程，仅修改节点的视觉属性（不改变几何位置/尺寸），性能消耗远低于回流。

重绘的核心作用

• 保证页面的视觉效果与样式规则一致，将CSS样式转化为屏幕上的像素点；
• 重绘仅操作画布像素，不涉及布局计算，是渲染流程的最后一步可视化操作；
• 重绘可局部触发，仅绘制修改样式的节点，无需遍历整个渲染树。

触发重绘的场景（核心：修改视觉属性，不改变几何结构）

• 修改颜色（color/background-color/border-color）；
• 修改背景（background-image/background-position）；
• 修改阴影（box-shadow/text-shadow）；
• 修改透明度（opacity）、光标（cursor）；
• 修改 visibility:hidden（节点仍占据布局空间，仅隐藏视觉）；
• 修改文字装饰（text-decoration）、字体样式（font-style）。

1. 重绘：修改视觉属性→仅重新绘制像素→性能消耗小；
2. 关系：回流必触发重绘，重绘不一定触发回流。

10. 描述在开发过程中遇到的跨域问题，并解释导致跨域问题产生的原因

开发中常见的跨域问题场景

1. AJAX请求跨域：前端通过axios/fetch请求不同域名的接口，控制台报错 No 'Access-

Control-Allow-Origin' header is present on the requested resource；

1. 静态资源跨域：加载不同域名的CSS/JS/图片/字体，部分资源（如字体）因浏览器限制触发跨域；
2. iframe跨域：父子iframe页面域名不同，无法互相操作DOM/通信；
3. LocalStorage/Cookie跨域：不同域名无法共享LocalStorage/Cookie，无法读取对方存储数据；
4. WebSocket跨域：WebSocket连接的地址与当前页面域名不同，触发跨域校验。

跨域问题产生的根本原因

跨域的本质是浏览器的同源策略限制，浏览器为了保护用户数据安全，禁止非同源的页面之间进行资源交互和数据通信，当请求的协议、域名、端口三者任意一个与当前页面不一致时，即判定为跨域，

浏览器会拦截请求响应/数据交互。

注：跨域是浏览器的行为，服务器之间的请求不存在跨域限制（如后端接口调用第三方接口）。

1. 什么是浏览器的同源策略?为什么浏览器会有同源策略?

同源策略（Same-Origin Policy）的定义

同源策略是浏览器的核心安全机制，规定：只有当两个页面的「协议、域名、端口」完全一致时，才视为同源，同源页面之间可自由进行数据交互和资源访问，非同源则受严格限制。

同源判定示例（以http://www.baidu.com:8080为例）

• ✅ 同源： http://www.baidu.com:8080/index.html（协议/域名/端口一致）；
• ❌ 跨域： https://www.baidu.com:8080（协议不同：http→https）；
• ❌ 跨域： http://blog.baidu.com:8080（域名不同：www→blog）；
• ❌ 跨域： http://www.baidu.com:80（端口不同：8080→80）。

1. 防止CSRF跨站请求伪造：避免恶意网站伪造用户请求，向合法网站提交操作（如转账、改密

码）；

1. 防止DOM劫持：避免非同源页面操作当前页面的DOM结构，篡改页面内容；
2. 保护用户隐私数据：隔离不同域名的存储数据、会话信息，避免数据泄露。

同源策略的限制范围

1. 禁止AJAX/fetch请求非同源接口；
2. 禁止操作非同源iframe的DOM/JS对象；
3. 禁止读取非同源的Cookie/LocalStorage/SessionStorage；
4. 禁止加载非同源的字体/部分插件资源；
5. 禁止WebSocket非同源连接（需服务端允许）。

注：同源策略不限制静态资源（CSS/JS/图片）的加载，仅限制脚本对资源的操作。

12. 解释正向代理和反向代理的概念及其在网络通信中的作用

正向代理（Forward Proxy）

定义

正向代理是客户端的代理，代理服务器位于客户端与目标服务器之间，客户端主动向代理服务器发起请求，代理服务器再转发请求到目标服务器，目标服务器只知道代理服务器的地址，不知道真实客户

端的地址。

核心特征

• 代理服务于客户端，客户端明确知道目标服务器地址；
• 客户端需要手动配置代理地址才能使用；
• 代理服务器隐藏真实客户端IP。

典型应用场景

1. 科学上网：突破网络地域限制，访问境外网站；
2. 网络加速：代理服务器缓存静态资源，提升访问速度；
3. 隐藏客户端IP：保护客户端隐私，避免被目标服务器追踪；
4. 企业内网管控：企业通过代理服务器统一管理员工的外网访问。