譯者 | 劉汪洋

審校 | 重樓

在現(xiàn)代數(shù)字化環(huán)境下，單純構(gòu)建一個(gè)具備基本功能的系統(tǒng)已無(wú)法滿足更高的應(yīng)用需求。我們需要開(kāi)發(fā)在高負(fù)載環(huán)境下能夠穩(wěn)定且高效擴(kuò)展的系統(tǒng)。

眾多開(kāi)發(fā)者和架構(gòu)師的實(shí)踐證明，系統(tǒng)可擴(kuò)展性的提升往往伴隨著獨(dú)特的挑戰(zhàn)。即使是微小的效率問(wèn)題，在放大到百萬(wàn)倍的負(fù)載下，也可能導(dǎo)致系統(tǒng)陷入癱瘓。那么，怎樣才能確保你的應(yīng)用程序在任何負(fù)載下都能快速響應(yīng)呢？

本文將詳細(xì)介紹構(gòu)建可擴(kuò)展系統(tǒng)時(shí)的性能優(yōu)化策略。我們會(huì)探討一些適用于各種代碼庫(kù)的通用策略，無(wú)論是前端還是后端，也不論使用何種編程語(yǔ)言。這些策略不僅限于理論層面；它們已在全球一些最具挑戰(zhàn)性的技術(shù)環(huán)境中經(jīng)過(guò)實(shí)際應(yīng)用和驗(yàn)證。作為 Facebook 團(tuán)隊(duì)的一員，我親自參與了將這些優(yōu)化技術(shù)應(yīng)用于多個(gè)項(xiàng)目中，包括 Facebook 的輕量級(jí)廣告創(chuàng)建體驗(yàn)和 Meta 商務(wù)套件。

因此，無(wú)論你是在打造下一個(gè)大型社交網(wǎng)絡(luò)、企業(yè)級(jí)軟件套件，還是僅僅想要優(yōu)化個(gè)人項(xiàng)目，我們?cè)诖擞懻摰牟呗远紝⒊蔀槟愎ぞ呦渲械膶氋F資產(chǎn)?，F(xiàn)在，讓我們開(kāi)始探索吧。

預(yù)取

預(yù)取是一種基于預(yù)測(cè)用戶行為的性能優(yōu)化技術(shù)。設(shè)想用戶正在與應(yīng)用程序交互，系統(tǒng)能夠預(yù)測(cè)用戶的下一步操作，并提前獲取相關(guān)數(shù)據(jù)。這種方法能夠創(chuàng)造一種無(wú)縫體驗(yàn)：當(dāng)數(shù)據(jù)被需要時(shí)，它幾乎能夠即刻被獲取，從而使應(yīng)用程序顯得更加迅速和響應(yīng)靈敏。主動(dòng)在需求出現(xiàn)之前獲取數(shù)據(jù)能夠顯著提升用戶體驗(yàn)，但如果過(guò)度使用，可能會(huì)導(dǎo)致資源浪費(fèi)，如帶寬、內(nèi)存甚至處理能力的浪費(fèi)。Facebook 在其需要依賴機(jī)器學(xué)習(xí)的復(fù)雜操作中大量使用預(yù)取，例如在“好友建議”功能中。

何時(shí)進(jìn)行預(yù)??？

預(yù)取涉及在用戶明確表達(dá)需求之前，主動(dòng)向服務(wù)器發(fā)送請(qǐng)求以檢索數(shù)據(jù)。盡管這看起來(lái)很有吸引力，但開(kāi)發(fā)者必須確保在效率和資源使用之間取得平衡。

A.優(yōu)化服務(wù)器響應(yīng)時(shí)間（后端代碼優(yōu)化）

在實(shí)施預(yù)取之前，首先應(yīng)確保服務(wù)器響應(yīng)時(shí)間已經(jīng)得到優(yōu)化。后端代碼優(yōu)化可以通過(guò)以下方式實(shí)現(xiàn)更佳的服務(wù)器響應(yīng)時(shí)間：

• 精簡(jiǎn)數(shù)據(jù)庫(kù)查詢，以縮短檢索時(shí)間。
• 確保復(fù)雜操作能夠并發(fā)執(zhí)行。
• 減少重復(fù)的 API 調(diào)用，避免重復(fù)獲取相同的數(shù)據(jù)。
• 剔除不必要的計(jì)算過(guò)程，以避免減慢服務(wù)器響應(yīng)。

B.確認(rèn)用戶意圖

預(yù)取的核心是對(duì)用戶下一步操作的預(yù)測(cè)。然而，預(yù)測(cè)有時(shí)可能不準(zhǔn)確。如果系統(tǒng)為用戶從未訪問(wèn)的頁(yè)面或功能預(yù)獲取數(shù)據(jù)，就會(huì)造成資源的浪費(fèi)。因此，開(kāi)發(fā)者應(yīng)采用機(jī)制來(lái)評(píng)估用戶意圖，例如跟蹤用戶行為模式或檢查用戶的活躍參與度，以確保數(shù)據(jù)僅在有高概率被使用的情況下被獲取。

如何實(shí)現(xiàn)預(yù)取

預(yù)取可以在任何編程語(yǔ)言或框架中實(shí)現(xiàn)。以 React 為例，來(lái)展示預(yù)取的實(shí)現(xiàn)方法。

考慮一個(gè)簡(jiǎn)單的 React 組件。該組件一旦完成渲染，就會(huì)觸發(fā)一個(gè) AJAX 調(diào)用來(lái)預(yù)先獲取數(shù)據(jù)。當(dāng)用戶點(diǎn)擊該組件中的按鈕時(shí)，第二個(gè)組件會(huì)使用這些預(yù)先獲取的數(shù)據(jù)：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function PrefetchComponent() {
  const [data, setData] = useState(null);
  const [showSecondComponent, setShowSecondComponent] = useState(false);
  // 組件渲染完成后立即預(yù)取數(shù)據(jù)
  useEffect(() => {
    axios.get('https://api.example.com/data-to-prefetch')
      .then(response => {
        setData(response.data);
      });
  }, []);
  return (
    <div>
    <button onClick={() => setShowSecondComponent(true)}>
Show Next Component
  </button>
{showSecondComponent && <SecondComponent data={data} />}
  </div>
 );
}
function SecondComponent({ data }) {
  // 在這個(gè)組件中使用預(yù)取的數(shù)據(jù)
  return (
    <div>
    {data ? <div>Here is the prefetched data: {data}</div> : <div>Loading...</div>}
</div>
);
}
export default PrefetchComponent;

在上述代碼示例中，PrefetchComponent組件在渲染之后立刻進(jìn)行數(shù)據(jù)獲取。當(dāng)用戶點(diǎn)擊按鈕時(shí)，SecondComponent組件會(huì)展示，使用的是之前預(yù)先獲取的數(shù)據(jù)。

記憶化

在計(jì)算機(jī)科學(xué)中，“不要重復(fù)自己”原則是優(yōu)秀編碼習(xí)慣的核心。此原則也是性能優(yōu)化的有效手段，正是記憶化技術(shù)的基礎(chǔ)。記憶化建立在這樣一個(gè)觀點(diǎn)上：重復(fù)執(zhí)行某些操作可能會(huì)消耗大量資源，尤其是當(dāng)這些操作的結(jié)果不經(jīng)常發(fā)生變化時(shí)。那么，為什么要重復(fù)執(zhí)行已經(jīng)完成的工作呢？

記憶化通過(guò)緩存計(jì)算結(jié)果來(lái)提升應(yīng)用程序的性能。當(dāng)同一計(jì)算再次被請(qǐng)求時(shí)，系統(tǒng)會(huì)先檢查結(jié)果是否已在緩存中。如果已緩存，就直接從緩存中提取結(jié)果，省去了實(shí)際計(jì)算的步驟。從本質(zhì)上講，記憶化涉及到對(duì)之前結(jié)果的存儲(chǔ)（由此得名）。這對(duì)于計(jì)算成本高且經(jīng)常被同樣的輸入調(diào)用的函數(shù)來(lái)說(shuō)尤為有效。這就好比一個(gè)學(xué)生解決了一個(gè)復(fù)雜的數(shù)學(xué)問(wèn)題，并在書的邊緣記下了答案。如果未來(lái)的考試中出現(xiàn)了同樣的問(wèn)題，學(xué)生可以簡(jiǎn)單地查看書邊的筆記，而不必重新解決這個(gè)問(wèn)題。

何時(shí)使用記憶化？

記憶化并非適用于所有情況。在某些場(chǎng)景下，記憶化可能會(huì)導(dǎo)致更多的內(nèi)存消耗。因此，正確識(shí)別何時(shí)使用這種技術(shù)至關(guān)重要：

• 數(shù)據(jù)變化不頻繁時(shí)： 對(duì)于那些輸入一致時(shí)返回結(jié)果也一致的函數(shù)，尤其是計(jì)算密集型的函數(shù)，使用記憶化是理想選擇。這確保了在隨后相同的調(diào)用中不會(huì)浪費(fèi)一次計(jì)算的努力。
• 數(shù)據(jù)不太敏感時(shí)： 在考慮使用記憶化時(shí)，安全性和隱私問(wèn)題也是不可忽視的重要因素。雖然緩存所有內(nèi)容看似誘人，但并不總是安全的。例如，支付信息、密碼及其他個(gè)人詳細(xì)信息這類數(shù)據(jù)永遠(yuǎn)不應(yīng)緩存。然而，像社交媒體帖子的點(diǎn)贊數(shù)和評(píng)論數(shù)這類較為無(wú)害的數(shù)據(jù)，可以安全地進(jìn)行記憶化以提升性能。

如何實(shí)現(xiàn)記憶化

在 React 中，我們可以利用 useCallback 和useMemo等鉤子來(lái)實(shí)現(xiàn)記憶化。讓我們來(lái)看一個(gè)簡(jiǎn)單的例子：

import React, { useState, useCallback, useMemo } from 'react';

function ExpensiveOperationComponent() {
    const [input, setInput] = useState(0);
    const [count, setCount] = useState(0);
    // 模擬一個(gè)計(jì)算開(kāi)銷很大的操作
    const expensiveOperation = useCallback((num) => {
        console.log('Computing...');
        // 模擬耗時(shí)長(zhǎng)的計(jì)算
        for(let i = 0; i < 1000000000; i++) {}
        return num * num;
    }, []);

    const memoizedResult = useMemo(() => expensiveOperation(input), [input, expensiveOperation]);

    return (
        <div>
            <input value={input} onChange={e => setInput(e.target.value)} />
            <p>Result of Expensive Operation: {memoizedResult}</p>
            <button onClick={() => setCount(count + 1)}>Re-render component</button>
            <p>Component re-render count: {count}</p>
        </div>
    );
}

export default ExpensiveOperationComponent;

在這個(gè)示例中，expensiveOperation函數(shù)模擬了一個(gè)計(jì)算密集型任務(wù)。我們使用useCallback鉤子來(lái)確保在每次組件渲染時(shí)，這個(gè)函數(shù)不會(huì)被重新定義。此外，useMemo鉤子被用來(lái)存儲(chǔ)expensiveOperation的結(jié)果，這樣，即使組件重新渲染，如果輸入沒(méi)有變化，就不會(huì)重復(fù)執(zhí)行這個(gè)計(jì)算。

并行獲取

并行數(shù)據(jù)獲取是指同時(shí)獲取多個(gè)數(shù)據(jù)集，而非逐個(gè)獲取。這就好比在超市結(jié)賬時(shí)，有多個(gè)收銀員同時(shí)服務(wù)，而不僅僅是一個(gè)：顧客能更快得到服務(wù)，排隊(duì)時(shí)間縮短，整體效率得到提升。在數(shù)據(jù)處理領(lǐng)域，鑒于很多數(shù)據(jù)集之間互不相關(guān)，因此并行獲取能顯著加快頁(yè)面加載速度，尤其適用于檢索復(fù)雜數(shù)據(jù)所需時(shí)間較長(zhǎng)的場(chǎng)景。

何時(shí)使用并行獲?。?/h3>

• 當(dāng)各數(shù)據(jù)集獨(dú)立且獲取過(guò)程復(fù)雜時(shí)： 若所需獲取的數(shù)據(jù)集之間無(wú)依賴關(guān)系，并且檢索每個(gè)數(shù)據(jù)集耗時(shí)較長(zhǎng)，此時(shí)并行獲取能有效提高處理速度。
• 后端應(yīng)用廣泛，前端使用需謹(jǐn)慎： 盡管在后端，通過(guò)提升服務(wù)器響應(yīng)速度，并行獲取能發(fā)揮顯著效果，但在前端使用時(shí)需格外小心。過(guò)多的并行請(qǐng)求可能會(huì)加重客戶端負(fù)載，影響用戶體驗(yàn)。
• 優(yōu)先處理網(wǎng)絡(luò)請(qǐng)求： 若數(shù)據(jù)獲取涉及多個(gè)網(wǎng)絡(luò)請(qǐng)求，最佳做法是優(yōu)先處理一個(gè)主要請(qǐng)求，并在前端展示，同時(shí)在后臺(tái)并行處理其他請(qǐng)求。這樣做可確保最重要的數(shù)據(jù)首先被獲取，同時(shí)其他次要數(shù)據(jù)也在后臺(tái)并行地進(jìn)行加載。

如何使用并行獲取

在 PHP 中，隨著現(xiàn)代擴(kuò)展和工具的發(fā)展，實(shí)現(xiàn)并行處理變得更為簡(jiǎn)便。以下是一個(gè)使用concurrent {}代碼塊的基本示例：

<?php
use Concurrent\TaskScheduler;
require 'vendor/autoload.php';

// 假設(shè)這些是一些從各種來(lái)源獲取數(shù)據(jù)的函數(shù)
function fetchDataA() {
    // 模擬延遲
    sleep(2);
    return "Data A";
}

function fetchDataB() {
    // 模擬延遲
    sleep(3);
    return "Data B";
}

$scheduler = new TaskScheduler();

$result = concurrent {
    "a" => fetchDataA(),
    "b" => fetchDataB(),
};

echo $result["a"];  // Outputs: Data A
echo $result["b"];  // Outputs: Data B
?>

在此示例中，fetchDataA 和 fetchDataB 分別代表兩個(gè)數(shù)據(jù)檢索函數(shù)。通過(guò)運(yùn)用concurrent {}代碼塊，這兩個(gè)函數(shù)可同時(shí)執(zhí)行，從而縮短了獲取這兩個(gè)數(shù)據(jù)集的總耗時(shí)。

延遲加載

延遲加載是一種設(shè)計(jì)模式，其核心思想是僅在真正需要時(shí)才加載數(shù)據(jù)或資源。與預(yù)先加載所有內(nèi)容不同，延遲加載只載入初始視圖所需的必要內(nèi)容，隨后根據(jù)需求加載額外資源。這類似于一家餐廳僅在顧客點(diǎn)特定菜品時(shí)才開(kāi)始烹飪，而非預(yù)先準(zhǔn)備所有菜肴。例如，在網(wǎng)頁(yè)中，模態(tài)框的數(shù)據(jù)只有在用戶點(diǎn)擊按鈕打開(kāi)模態(tài)框時(shí)才被加載。通過(guò)這種方式，可以將數(shù)據(jù)的獲取推遲到實(shí)際需要的時(shí)刻。

如何實(shí)現(xiàn)延遲加載

有效實(shí)現(xiàn)延遲加載的關(guān)鍵在于，要確保在數(shù)據(jù)獲取過(guò)程中向用戶提供清晰的反饋，以優(yōu)化用戶體驗(yàn)。常見(jiàn)的做法是在數(shù)據(jù)檢索時(shí)展示一個(gè)旋轉(zhuǎn)的加載動(dòng)畫，這樣用戶就能明白他們的請(qǐng)求正在被處理，即便數(shù)據(jù)暫時(shí)還不可用。

React 中的延遲加載示例

以下是一個(gè) React 組件中實(shí)現(xiàn)延遲加載的示例。此組件只在用戶點(diǎn)擊按鈕以查看模態(tài)框內(nèi)容時(shí)獲取數(shù)據(jù)：

import React, { useState } from 'react';

function LazyLoadedModal() {
    const [data, setData] = useState(null);
    const [isLoading, setIsLoading] = useState(false);
    const [isModalOpen, setIsModalOpen] = useState(false);

    const fetchDataForModal = async () => {
        setIsLoading(true);
        
        // 模擬一次 AJAX 獲取數(shù)據(jù)的調(diào)用
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();

        setData(result);
        setIsLoading(false);
        setIsModalOpen(true);
    };

    return (
        <div>
            <button onClick={fetchDataForModal}>
                Open Modal
            </button>

            {isModalOpen && (
                <div className="modal">
                    {isLoading ? (
                        <p>Loading...</p>  // 這里可以使用旋轉(zhuǎn)圈或加載動(dòng)畫
                    ) : (
                        <p>{data}</p>
                    )}
                </div>
            )}
        </div>
    );
}

export default LazyLoadedModal;

在這個(gè)例子中，只有當(dāng)用戶點(diǎn)擊“打開(kāi)模態(tài)框”按鈕后，才會(huì)開(kāi)始獲取模態(tài)框的數(shù)據(jù)。在此之前，不會(huì)發(fā)起不必要的網(wǎng)絡(luò)請(qǐng)求。一旦開(kāi)始獲取數(shù)據(jù)，便會(huì)顯示加載信息（或旋轉(zhuǎn)器），以示用戶請(qǐng)求正在處理。

結(jié)論

在當(dāng)今快速的數(shù)字時(shí)代，響應(yīng)時(shí)間的每一毫秒都十分重要。用戶尋求快速響應(yīng)，而企業(yè)無(wú)法承受讓用戶等待的后果。性能優(yōu)化已成為提供優(yōu)質(zhì)數(shù)字體驗(yàn)的必要條件，而不僅僅是一種優(yōu)化。

通過(guò)預(yù)取、記憶化、并行獲取和延遲加載等技術(shù)，開(kāi)發(fā)者能有效提升應(yīng)用性能。雖然這些策略在應(yīng)用和方法上有所不同，但它們共同的目標(biāo)是確保應(yīng)用程序能夠盡可能高效和快速地運(yùn)行。

重要的一點(diǎn)是，不存在一勞永逸的解決方案或“銀彈”。每個(gè)應(yīng)用程序都有其獨(dú)特之處，性能優(yōu)化應(yīng)結(jié)合對(duì)應(yīng)用程序需求的深入理解、對(duì)用戶期望的認(rèn)識(shí)，以及正確技術(shù)的有效應(yīng)用。這是一個(gè)持續(xù)改進(jìn)和學(xué)習(xí)的過(guò)程。

譯者介紹

劉汪洋，51CTO社區(qū)編輯，昵稱：明明如月，一個(gè)擁有 5 年開(kāi)發(fā)經(jīng)驗(yàn)的某大廠高級(jí) Java 工程師，擁有多個(gè)主流技術(shù)博客平臺(tái)博客專家稱號(hào)。

原文標(biāo)題：Performance Optimization Strategies in Highly Scalable Systems，作者：Hemanth Murali