作為一名前端工程師，面試中經常會被問到一些基礎的概念和技術，這些問題被稱為“八股文”。在本文中，我們將討論兩個常見的八股文話題：性能優(yōu)化和跨域處理，并結合具體實例進行說明。
一、性能優(yōu)化
性能優(yōu)化一直是前端開發(fā)中不可避免的話題。以下是幾個常見的優(yōu)化方法：
1. 減少 HTTP 請求次數
HTTP 請求是頁面加載時間的主要瓶頸之一?？梢酝ㄟ^以下方式來減少請求次數：
- 合并 CSS 和 JS 文件
- 使用 CSS Sprites 來合并小圖標
- 使用字體圖標替代圖片
- 壓縮圖片大小
2. 使用 CDN
使用 CDN 可以加速靜態(tài)資源的加載速度，提高用戶體驗。
3. 使用瀏覽器緩存
瀏覽器緩存可以減少網絡傳輸量，提高網頁訪問速度。
4. 懶加載
懶加載是指延遲加載網頁上的某些組件，而不是一次性加載所有內容。這可以減少網頁的加載時間。
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> 標簽的跨域技術。通過將回調函數名作為查詢參數傳遞到服務器上，服務器返回一段 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: * 頭部來允許所有來源的請求。
總結
本文介紹了前端面試中常見的兩個話題：性能優(yōu)化和跨域處理。對于性能優(yōu)化，我們可以通過減少 HTTP 請求次數、使用 CDN、瀏覽器緩存、懶加載、避免重排和重繪等方式來提高頁面加載速度。而對于跨域問題，我們可以使用 JSONP、CORS、代理等方式來實現跨域請求。以上方法都有具體的實現技巧和適用場景，需要根據具體情況進行選擇和調整。
