前端面试八股文：从性能优化到跨域处理

作为一名前端工程师，面试中经常会被问到一些基础的概念和技术，这些问题被称为“八股文”。在本文中，我们将讨论两个常见的八股文话题：性能优化和跨域处理，并结合具体实例进行说明。

一、性能优化

性能优化一直是前端开发中不可避免的话题。以下是几个常见的优化方法：

1. 减少 HTTP 请求次数

HTTP 请求是页面加载时间的主要瓶颈之一。可以通过以下方式来减少请求次数：

合并 CSS 和 JS 文件
使用 CSS Sprites 来合并小图标
使用字体图标替代图片
压缩图片大小

2. 使用 CDN

使用 CDN 可以加速静态资源的加载速度，提高用户体验。

3. 使用浏览器缓存

浏览器缓存可以减少网络传输量，提高网页访问速度。

4. 懒加载

懒加载是指延迟加载网页上的某些组件，而不是一次性加载所有内容。这可以减少网页的加载时间。

5. 避免重排和重绘

当 DOM 元素的位置或尺寸发生变化时，浏览器会重新计算布局和绘制。这会消耗大量的资源，降低性能。

下面是一个实例：

// 原始代码
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div')
  div.innerHTML = 'hello world'
  document.body.appendChild(div)
}

// 优化后的代码
const fragment = document.createDocumentFragment()

for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div')
  div.innerHTML = 'hello world'
  fragment.appendChild(div)
}

document.body.appendChild(fragment)

在这个例子中，我们使用了 document.createDocumentFragment() 来避免重排和重绘。

二、跨域处理

跨域是指在浏览器端向不同域名或端口发起 HTTP 请求的过程。出于安全考虑，浏览器默认禁止这种行为。以下是几个常见的跨域处理方法：

1. JSONP

JSONP 是一种利用 <script> 标签的跨域技术。通过将回调函数名作为查询参数传递到服务器上，服务器返回一段 JavaScript 代码，该代码会调用回调函数并传入数据。由于 <script> 标签没有跨域限制，因此可以实现跨域请求。

2. CORS

CORS（Cross-Origin Resource Sharing）是 HTML5 引入的一项标准，是目前最常用的跨域解决方案。CORS 通过在 HTTP 头中添加一些新的字段，告诉浏览器允许哪些跨域请求。

3. 代理

使用代理服务器是另一种跨域请求的方法。在同一域名下部署一个代理服务器，该服务器负责与其他域名进行通信，并将数据返回给客户端。

下面是一个实例：

// 前端代码
fetch('http://localhost:3000/data')
  .then(response => response.json())
  .then(data => console.log(data))

// 后端代码
const express = require('express')
const app = express()

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  next()
})

app.get('/data', (req, res) => {
  res.send({ name: 'Bob', age: 18 })
})

app.listen(3000, () => {
  console.log('server started on port 3000')})

在这个例子中，我们使用了 CORS 来允许跨域请求，并设置了 Access-Control-Allow-Origin: * 头部来允许所有来源的请求。

总结

本文介绍了前端面试中常见的两个话题：性能优化和跨域处理。对于性能优化，我们可以通过减少 HTTP 请求次数、使用 CDN、浏览器缓存、懒加载、避免重排和重绘等方式来提高页面加载速度。而对于跨域问题，我们可以使用 JSONP、CORS、代理等方式来实现跨域请求。以上方法都有具体的实现技巧和适用场景，需要根据具体情况进行选择和调整。