作为一名前端工程师，面试中经常会被问到一些基础的概念和技术，这些问题被称为“八股文”。在本文中，我们将讨论两个常见的八股文话题：性能优化和跨域处理，并结合具体实例进行说明。
一、性能优化
性能优化一直是前端开发中不可避免的话题。以下是几个常见的优化方法：
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、代理等方式来实现跨域请求。以上方法都有具体的实现技巧和适用场景，需要根据具体情况进行选择和调整。
