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

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

一、性能優(yōu)化

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

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

HTTP 請求是頁面加載時間的主要瓶頸之一。可以通過以下方式來減少請求次數(shù)：

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

   2. 使用 CDN

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

   3. 使用瀏覽器緩存

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

   4. 懶加載

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

   5. 避免重排和重繪

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

下面是一個實例：

// 原始代碼
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)

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

二、跨域處理

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

   1. JSONP

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

   2. CORS

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

   3. 代理

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

下面是一個實例：

// 前端代碼
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: * 頭部來允許所有來源的請求。

總結

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