前端面试题（十四）

76. 前端性能优化

前端性能优化有哪些常见方法？
1. 减少 HTTP 请求：
  - 合并 CSS、JavaScript 和图片文件。
  - 使用雪碧图 (Sprite) 减少图片请求数。
2. 资源压缩和合并：
  - 压缩 JavaScript 和 CSS 文件，减少文件体积。
  - 使用工具如 UglifyJS、CSSNano 等来删除注释、空格和未使用的代码。
3. 使用懒加载：
  - 对于图片、视频等资源，只有在用户即将看到它们时才进行加载。
  - 可以使用 IntersectionObserver API 来监听元素是否进入视口并进行懒加载。
4. 使用浏览器缓存：
  - 利用 HTTP 的 Cache-Control、Expires 和 ETag 头来缓存静态资源，减少重复请求。
5. 内容传输优化：
  - 使用 Gzip 或 Brotli 压缩传输内容。
  - 使用 CDN 加速内容分发。
6. 图片优化：
  - 使用合适的图片格式，如 SVG、WebP。
  - 图片压缩和裁剪，避免加载不必要的大尺寸图片。

77. 跨域处理

什么是跨域？
- 跨域是指浏览器出于安全限制，阻止浏览器向不同的域名、协议或端口发出请求的情况。这种限制称为 同源策略，它防止不同来源的站点之间进行未经授权的数据共享。

跨域问题的解决方案有哪些？

CORS (跨域资源共享)：

服务器设置 Access-Control-Allow-Origin 头来指定允许跨域访问的来源。

例如：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type

JSONP：
- JSONP 利用 <script> 标签不受同源策略限制的特性，通过动态插入 <script> 标签来实现跨域请求。需要服务器配合输出 JSONP 格式的数据。
- 缺点：只能使用 GET 请求。
- 示例：
```
function handleResponse(data) {
  console.log(data);
}
const script = document.createElement('script');
script.src = 'https://example.com/api?callback=handleResponse';
document.body.appendChild(script);
```
反向代理：
- 在本地服务器上设置一个代理，将请求转发到目标服务器，避免浏览器的跨域限制。常用于开发环境。
- 例如使用 Nginx 或 Node.js 实现反向代理。

PostMessage：

通过 window.postMessage API，可以在不同窗口或 iframe 之间进行跨域通信。

例如：

// 在父窗口中发送消息
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello from parent', 'https://example.com');

// 在 iframe 中监听消息
window.addEventListener('message', (event) => {
  if (event.origin === 'https://example.com') {
    console.log(event.data); // 输出 'Hello from parent'
  }
});

78. JavaScript 引擎的工作原理

JavaScript 引擎是如何工作的？
JavaScript 引擎（如 V8 引擎）会将 JavaScript 代码解析、编译并执行。以下是引擎的工作流程：
1. 解析器 (Parser)：
  - 将 JavaScript 源代码解析成 抽象语法树 (AST)。首先进行词法分析，将代码拆分为标记 (tokens)；然后进行语法分析，构建出语法树。
2. 解释器 (Interpreter)：
  - 解释器根据 AST 执行代码，将其转化为字节码。V8 引擎中的解释器叫 Ignition。
3. 编译器 (Compiler)：
  - 编译器会将部分高频使用的代码片段优化成机器代码，以提高执行效率。V8 引擎中的即时编译器叫 TurboFan。
4. 垃圾回收 (Garbage Collection)：
  - JavaScript 引擎通过垃圾回收机制自动管理内存，回收不再使用的对象，避免内存泄漏。V8 引擎使用 分代垃圾回收算法 来进行内存管理。

79. CSS 布局

CSS 有哪些常见布局方式？
1. 块级布局 (Block Layout)：
  - 默认情况下，块级元素会从上到下依次排列，占据容器的整行。
2. 浮动布局 (Float Layout)：
  - 通过 float 将元素从文档流中移除，通常用于文字环绕图片的布局。但由于 float 带来的一些副作用，现在使用较少。
3. 弹性布局 (Flexbox)：
  - Flexbox 是一种一维布局系统，适用于沿主轴方向的排列（水平或垂直）。通过设置父容器的 display: flex 来启用弹性布局。
  - 例子：
```
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
```
4. 网格布局 (Grid Layout)：
  - Grid 是一种二维布局系统，适合构建复杂的布局。通过 display: grid 来启用网格布局，并可以通过 grid-template-columns 和 grid-template-rows 来定义网格的结构。
  - 例子：
```
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
```
5. 绝对定位 (Absolute Positioning)：
  - 元素通过 position: absolute 从普通文档流中脱离，并相对于最近的已定位祖先进行定位。常用于固定位置的元素，如悬浮按钮或对话框。
6. 响应式布局：
  - 通过 媒体查询 (media queries) 和 弹性单位（如 rem、%）来构建能够适应不同屏幕尺寸的布局。
  - 例子：
```
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}
```

80. 前端安全

常见的前端安全问题有哪些？
1. XSS (跨站脚本攻击)：
  - XSS 攻击是指攻击者在网页中注入恶意脚本，通常是通过不安全的输入和输出处理。XSS 攻击可以用来窃取用户的 cookie，或者执行恶意操作。
  - 防御措施：
    - 对用户输入进行严格的过滤和转义。
    - 使用 CSP (内容安全策略) 限制脚本执行来源。
2. CSRF (跨站请求伪造)：
  - CSRF 是一种攻击，攻击者诱导用户在已认证的会话中执行未授权的操作。常见场景如伪造用户的表单提交。
  - 防御措施：
    - 使用 CSRF Token 来验证每次请求的合法性。
    - 使用 SameSite Cookie 标记，防止第三方网站携带用户的 Cookie 发送请求。
3. 点击劫持 (Clickjacking)：
  - 点击劫持是通过在一个透明的 iframe 中嵌入目标网站的方式，诱导用户在不知情的情况下点击一些隐蔽的按钮。
  - 防御措施：
    - 使用 X-Frame-Options 头部禁止页面嵌入 iframe。
    - 使用 CSP 规则，限制允许页面嵌入的来源。

81. WebSocket 和 HTTP/2

什么是 WebSocket？
- WebSocket 是一种全双工通信协议，它允许客户端和服务器之间建立一个持久的连接，并进行实时数据传输。与传统的 HTTP 请求-响应模型不同，WebSocket 是双向的，一旦连接建立，服务器可以随时向客户端发送数据。
- 使用场景：
  - 实时聊天应用、股票行情推送、游戏服务器等需要实时通信的场景。
- WebSocket 示例：
```
const socket = new WebSocket('wss://example.com/socket');

// 当连接打开时执行
socket.onopen = function () {
  console.log('WebSocket connection established');
  socket.send('Hello Server');
};

// 当接收到消息时执行
socket.onmessage = function (event) {
  console.log('Message from server:', event.data);
};

// 当连接关闭时执行
socket.onclose = function () {
  console.log('WebSocket connection closed');
};

// 当发生错误时执行
socket.onerror = function (error) {
  console.log('WebSocket error:', error);
};
```
- WebSocket 的优点：
  1. 双向通信：与传统 HTTP 请求的单向通信不同，WebSocket 允许服务器和客户端之间的实时双向数据传输。
  2. 减少延迟：因为 WebSocket 是持久连接，不需要为每次通信建立新的连接，所以减少了延迟和带宽开销。
- WebSocket 的缺点：
  1. 兼容性问题：虽然现代浏览器普遍支持 WebSocket，但一些老旧设备可能不支持。
  2. 复杂性：维护 WebSocket 连接（如心跳检测、断线重连等）比传统的 HTTP 更为复杂。
HTTP/2 的特点：
- HTTP/2 是 HTTP 协议的一个重大升级版本，它通过多路复用、头部压缩等机制优化了网络传输效率。
1. 多路复用 (Multiplexing)：
  - 在同一个 TCP 连接上，HTTP/2 允许同时发送多个请求和响应，解决了 HTTP/1.1 中的队头阻塞问题，大幅提升了传输效率。
2. 头部压缩 (Header Compression)：
  - HTTP/2 通过 HPACK 算法压缩请求和响应的头部，减少了重复头部字段的传输，降低了带宽消耗。
3. 服务器推送 (Server Push)：
  - 服务器可以在客户端请求之前主动推送资源（如 CSS、JavaScript 文件）给客户端，进一步提高性能，减少资源加载延迟。
4. 二进制传输：
  - HTTP/2 使用二进制格式进行数据传输，而不是 HTTP/1.1 的文本格式。二进制格式更高效，便于解析和传输。
- HTTP/2 的优点：
  1. 性能提升：通过多路复用、头部压缩等技术，显著减少了请求的延迟和带宽占用。
  2. 低延迟：在同一连接上并行传输多个请求和响应，降低了延迟。
- HTTP/2 的使用场景：
  - 适用于需要加载大量静态资源的网页，比如现代的 Web 应用和单页应用（SPA）。它能够提升页面的首屏加载速度，减少白屏时间。
- HTTP/2 示例：
  HTTP/2 是默认支持的，只要服务器配置了 HTTP/2 协议，浏览器就会自动使用它。常见的 Web 服务器如 Nginx 和 Apache 都支持 HTTP/2。