前端面試八股文：從性能優(yōu)化到跨域處理

作為一名前端工程師，面試中經(jīng)常會(huì)被問到一些基礎(chǔ)的概念和技術(shù)，這些問題被稱為“八股文”。在本文中，我們將討論兩個(gè)常見的八股文話題：性能優(yōu)化和跨域處理，并結(jié)合具體實(shí)例進(jìn)行說明。

一、性能優(yōu)化

性能優(yōu)化一直是前端開發(fā)中不可避免的話題。以下是幾個(gè)常見的優(yōu)化方法：

   1. 減少 HTTP 請求次數(shù)

HTTP 請求是頁面加載時(shí)間的主要瓶頸之一?？梢酝ㄟ^以下方式來減少請求次數(shù)：

• 合并 CSS 和 JS 文件
• 使用 CSS Sprites 來合并小圖標(biāo)
• 使用字體圖標(biāo)替代圖片
• 壓縮圖片大小

   2. 使用 CDN

使用 CDN 可以加速靜態(tài)資源的加載速度，提高用戶體驗(yàn)。

   3. 使用瀏覽器緩存

瀏覽器緩存可以減少網(wǎng)絡(luò)傳輸量，提高網(wǎng)頁訪問速度。

   4. 懶加載

懶加載是指延遲加載網(wǎng)頁上的某些組件，而不是一次性加載所有內(nèi)容。這可以減少網(wǎng)頁的加載時(shí)間。

   5. 避免重排和重繪

當(dāng) DOM 元素的位置或尺寸發(fā)生變化時(shí)，瀏覽器會(huì)重新計(jì)算布局和繪制。這會(huì)消耗大量的資源，降低性能。

下面是一個(gè)實(shí)例：

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

// 優(yōu)化后的代碼
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)

在這個(gè)例子中，我們使用了 document.createDocumentFragment() 來避免重排和重繪。

二、跨域處理

跨域是指在瀏覽器端向不同域名或端口發(fā)起 HTTP 請求的過程。出于安全考慮，瀏覽器默認(rèn)禁止這種行為。以下是幾個(gè)常見的跨域處理方法：

   1. JSONP

JSONP 是一種利用 <script> 標(biāo)簽的跨域技術(shù)。通過將回調(diào)函數(shù)名作為查詢參數(shù)傳遞到服務(wù)器上，服務(wù)器返回一段 JavaScript 代碼，該代碼會(huì)調(diào)用回調(diào)函數(shù)并傳入數(shù)據(jù)。由于 <script> 標(biāo)簽沒有跨域限制，因此可以實(shí)現(xiàn)跨域請求。

   2. CORS

CORS（Cross-Origin Resource Sharing）是 HTML5 引入的一項(xiàng)標(biāo)準(zhǔn)，是目前最常用的跨域解決方案。CORS 通過在 HTTP 頭中添加一些新的字段，告訴瀏覽器允許哪些跨域請求。

   3. 代理

使用代理服務(wù)器是另一種跨域請求的方法。在同一域名下部署一個(gè)代理服務(wù)器，該服務(wù)器負(fù)責(zé)與其他域名進(jìn)行通信，并將數(shù)據(jù)返回給客戶端。

下面是一個(gè)實(shí)例：

// 前端代碼
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')
})

在這個(gè)例子中，我們使用了 CORS 來允許跨域請求，并設(shè)置了 Access-Control-Allow-Origin: * 頭部來允許所有來源的請求。

總結(jié)

本文介紹了前端面試中常見的兩個(gè)話題：性能優(yōu)化和跨域處理。對(duì)于性能優(yōu)化，我們可以通過減少 HTTP 請求次數(shù)、使用 CDN、瀏覽器緩存、懶加載、避免重排和重繪等方式來提高頁面加載速度。而對(duì)于跨域問題，我們可以使用 JSONP、CORS、代理等方式來實(shí)現(xiàn)跨域請求。以上方法都有具體的實(shí)現(xiàn)技巧和適用場景，需要根據(jù)具體情況進(jìn)行選擇和調(diào)整。