前端面试题（十一）

57. 浏览器渲染流程

• 浏览器渲染页面的基本流程是什么？

  1. 解析 HTML：浏览器会将 HTML 转换为一个 DOM 树。
  2. 解析 CSS：浏览器会将 CSS 转换为一个 CSSOM 树。
  3. 构建渲染树：DOM 树和 CSSOM 树结合，构建出渲染树。渲染树只包含需要渲染的节点。
  4. 布局 (Layout)：根据渲染树，浏览器会计算每个元素的布局位置，决定元素的大小和位置。
  5. 绘制 (Paint)：浏览器会将元素绘制到屏幕上。
  6. 合成 (Compositing)：如果页面包含复杂的图层，浏览器会将这些图层组合在一起，最终显示在屏幕上。
  • 渲染过程的关键点：
    1. 回流 (Reflow)：当 DOM 结构或几何属性（如宽高、位置）发生变化时，需要重新计算布局，称为回流。回流是影响性能的关键操作，应尽量避免频繁回流。
    2. 重绘 (Repaint)：当元素的样式发生变化但没有影响布局时（如颜色、背景等），浏览器只需要重新绘制元素，称为重绘。重绘的代价比回流低。

58. 跨域

• 什么是跨域？

  • 跨域 指的是浏览器在不同域之间进行请求时，因同源策略 (Same-Origin Policy) 限制，导致某些请求无法成功发出或返回结果。不同协议、域名、端口都被认为是不同的源。

• 常见的跨域解决方案有哪些？

  1. CORS (跨域资源共享)：通过在服务器端设置响应头 Access-Control-Allow-Origin，允许来自特定域的请求跨域访问资源。

     • 简单请求：GET 或 POST 请求且不包含自定义头部时，直接通过 CORS。
     • 预检请求：如果是复杂请求，浏览器会先发送 OPTIONS 请求进行预检，确保服务器允许该请求再实际发送。

     例子：

     Access-Control-Allow-Origin: https://example.com
     

  2. JSONP (JSON with Padding)：通过 <script> 标签进行跨域请求，因为 <script> 标签不受同源策略的限制，服务器返回一个包含回调函数的 JSON 数据。

     • 缺点：仅支持 GET 请求，安全性较低。

  3. 代理服务器：通过在同源的服务器上设置代理，将跨域请求通过该服务器转发到目标服务器，从而避免浏览器的跨域限制。

  4. 跨域资源共享 iframe + postMessage：使用两个域名的 iframe，结合 postMessage 进行数据通信。

59. 性能优化

• 前端性能优化有哪些常见的方法？

  1. 减少 HTTP 请求：

     • 合并文件：将多个 CSS 或 JavaScript 文件合并成一个文件，减少请求次数。
     • 使用图像精灵 (CSS Sprites)：将多个小图标合并成一张图片，使用 background-position 显示相应部分。
     • 懒加载：对于页面中暂时不可见的图片或资源，延迟加载（如图片懒加载&#x