Find N3入網(wǎng)：最高支持16+1TB
OPPO將于近期登場的Find N3折疊屏目前已經(jīng)正式入網(wǎng)，型號為PHN110。本次Find N3在外觀方面相比前兩代有很大的變化，不再是小號的橫向折疊屏，而是跟別的廠商一樣采用了較為常見的
譯者 | 劉汪洋
審校 | 重樓
在現(xiàn)代數(shù)字化環(huán)境下，單純構(gòu)建一個具備基本功能的系統(tǒng)已無法滿足更高的應(yīng)用需求。我們需要開發(fā)在高負載環(huán)境下能夠穩(wěn)定且高效擴展的系統(tǒng)。
眾多開發(fā)者和架構(gòu)師的實踐證明，系統(tǒng)可擴展性的提升往往伴隨著獨特的挑戰(zhàn)。即使是微小的效率問題，在放大到百萬倍的負載下，也可能導致系統(tǒng)陷入癱瘓。那么，怎樣才能確保你的應(yīng)用程序在任何負載下都能快速響應(yīng)呢？
本文將詳細介紹構(gòu)建可擴展系統(tǒng)時的性能優(yōu)化策略。我們會探討一些適用于各種代碼庫的通用策略，無論是前端還是后端，也不論使用何種編程語言。這些策略不僅限于理論層面；它們已在全球一些最具挑戰(zhàn)性的技術(shù)環(huán)境中經(jīng)過實際應(yīng)用和驗證。作為 Facebook 團隊的一員，我親自參與了將這些優(yōu)化技術(shù)應(yīng)用于多個項目中，包括 Facebook 的輕量級廣告創(chuàng)建體驗和 Meta 商務(wù)套件。
因此，無論你是在打造下一個大型社交網(wǎng)絡(luò)、企業(yè)級軟件套件，還是僅僅想要優(yōu)化個人項目，我們在此討論的策略都將成為你工具箱中的寶貴資產(chǎn)。現(xiàn)在，讓我們開始探索吧。
預取是一種基于預測用戶行為的性能優(yōu)化技術(shù)。設(shè)想用戶正在與應(yīng)用程序交互，系統(tǒng)能夠預測用戶的下一步操作，并提前獲取相關(guān)數(shù)據(jù)。這種方法能夠創(chuàng)造一種無縫體驗：當數(shù)據(jù)被需要時，它幾乎能夠即刻被獲取，從而使應(yīng)用程序顯得更加迅速和響應(yīng)靈敏。主動在需求出現(xiàn)之前獲取數(shù)據(jù)能夠顯著提升用戶體驗，但如果過度使用，可能會導致資源浪費，如帶寬、內(nèi)存甚至處理能力的浪費。Facebook 在其需要依賴機器學習的復雜操作中大量使用預取，例如在“好友建議”功能中。
預取涉及在用戶明確表達需求之前，主動向服務(wù)器發(fā)送請求以檢索數(shù)據(jù)。盡管這看起來很有吸引力，但開發(fā)者必須確保在效率和資源使用之間取得平衡。
在實施預取之前，首先應(yīng)確保服務(wù)器響應(yīng)時間已經(jīng)得到優(yōu)化。后端代碼優(yōu)化可以通過以下方式實現(xiàn)更佳的服務(wù)器響應(yīng)時間：
預取的核心是對用戶下一步操作的預測。然而，預測有時可能不準確。如果系統(tǒng)為用戶從未訪問的頁面或功能預獲取數(shù)據(jù)，就會造成資源的浪費。因此，開發(fā)者應(yīng)采用機制來評估用戶意圖，例如跟蹤用戶行為模式或檢查用戶的活躍參與度，以確保數(shù)據(jù)僅在有高概率被使用的情況下被獲取。
預取可以在任何編程語言或框架中實現(xiàn)。以 React 為例，來展示預取的實現(xiàn)方法。
考慮一個簡單的 React 組件。該組件一旦完成渲染，就會觸發(fā)一個 AJAX 調(diào)用來預先獲取數(shù)據(jù)。當用戶點擊該組件中的按鈕時，第二個組件會使用這些預先獲取的數(shù)據(jù)：
import React, { useState, useEffect } from 'react';import axios from 'axios';function PrefetchComponent() { const [data, setData] = useState(null); const [showSecondComponent, setShowSecondComponent] = useState(false); // 組件渲染完成后立即預取數(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 }) { // 在這個組件中使用預取的數(shù)據(jù) return ( <div> {data ? <div>Here is the prefetched data: {data}</div> : <div>Loading...</div>}</div>);}export default PrefetchComponent;在上述代碼示例中，PrefetchComponent組件在渲染之后立刻進行數(shù)據(jù)獲取。當用戶點擊按鈕時，SecondComponent組件會展示，使用的是之前預先獲取的數(shù)據(jù)。
在計算機科學中，“不要重復自己”原則是優(yōu)秀編碼習慣的核心。此原則也是性能優(yōu)化的有效手段，正是記憶化技術(shù)的基礎(chǔ)。記憶化建立在這樣一個觀點上：重復執(zhí)行某些操作可能會消耗大量資源，尤其是當這些操作的結(jié)果不經(jīng)常發(fā)生變化時。那么，為什么要重復執(zhí)行已經(jīng)完成的工作呢？
記憶化通過緩存計算結(jié)果來提升應(yīng)用程序的性能。當同一計算再次被請求時，系統(tǒng)會先檢查結(jié)果是否已在緩存中。如果已緩存，就直接從緩存中提取結(jié)果，省去了實際計算的步驟。從本質(zhì)上講，記憶化涉及到對之前結(jié)果的存儲（由此得名）。這對于計算成本高且經(jīng)常被同樣的輸入調(diào)用的函數(shù)來說尤為有效。這就好比一個學生解決了一個復雜的數(shù)學問題，并在書的邊緣記下了答案。如果未來的考試中出現(xiàn)了同樣的問題，學生可以簡單地查看書邊的筆記，而不必重新解決這個問題。
記憶化并非適用于所有情況。在某些場景下，記憶化可能會導致更多的內(nèi)存消耗。因此，正確識別何時使用這種技術(shù)至關(guān)重要：
在 React 中，我們可以利用 useCallback 和useMemo等鉤子來實現(xiàn)記憶化。讓我們來看一個簡單的例子：
import React, { useState, useCallback, useMemo } from 'react';function ExpensiveOperationComponent() { const [input, setInput] = useState(0); const [count, setCount] = useState(0); // 模擬一個計算開銷很大的操作 const expensiveOperation = useCallback((num) => { console.log('Computing...'); // 模擬耗時長的計算 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;在這個示例中，expensiveOperation函數(shù)模擬了一個計算密集型任務(wù)。我們使用useCallback鉤子來確保在每次組件渲染時，這個函數(shù)不會被重新定義。此外，useMemo鉤子被用來存儲expensiveOperation的結(jié)果，這樣，即使組件重新渲染，如果輸入沒有變化，就不會重復執(zhí)行這個計算。
并行數(shù)據(jù)獲取是指同時獲取多個數(shù)據(jù)集，而非逐個獲取。這就好比在超市結(jié)賬時，有多個收銀員同時服務(wù)，而不僅僅是一個：顧客能更快得到服務(wù)，排隊時間縮短，整體效率得到提升。在數(shù)據(jù)處理領(lǐng)域，鑒于很多數(shù)據(jù)集之間互不相關(guān)，因此并行獲取能顯著加快頁面加載速度，尤其適用于檢索復雜數(shù)據(jù)所需時間較長的場景。
在 PHP 中，隨著現(xiàn)代擴展和工具的發(fā)展，實現(xiàn)并行處理變得更為簡便。以下是一個使用concurrent {}代碼塊的基本示例：
<?phpuse Concurrent/TaskScheduler;require 'vendor/autoload.php';// 假設(shè)這些是一些從各種來源獲取數(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 Aecho $result["b"]; // Outputs: Data B?>在此示例中，fetchDataA 和 fetchDataB 分別代表兩個數(shù)據(jù)檢索函數(shù)。通過運用concurrent {}代碼塊，這兩個函數(shù)可同時執(zhí)行，從而縮短了獲取這兩個數(shù)據(jù)集的總耗時。
延遲加載是一種設(shè)計模式，其核心思想是僅在真正需要時才加載數(shù)據(jù)或資源。與預先加載所有內(nèi)容不同，延遲加載只載入初始視圖所需的必要內(nèi)容，隨后根據(jù)需求加載額外資源。這類似于一家餐廳僅在顧客點特定菜品時才開始烹飪，而非預先準備所有菜肴。例如，在網(wǎng)頁中，模態(tài)框的數(shù)據(jù)只有在用戶點擊按鈕打開模態(tài)框時才被加載。通過這種方式，可以將數(shù)據(jù)的獲取推遲到實際需要的時刻。
有效實現(xiàn)延遲加載的關(guān)鍵在于，要確保在數(shù)據(jù)獲取過程中向用戶提供清晰的反饋，以優(yōu)化用戶體驗。常見的做法是在數(shù)據(jù)檢索時展示一個旋轉(zhuǎn)的加載動畫，這樣用戶就能明白他們的請求正在被處理，即便數(shù)據(jù)暫時還不可用。
以下是一個 React 組件中實現(xiàn)延遲加載的示例。此組件只在用戶點擊按鈕以查看模態(tài)框內(nèi)容時獲取數(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)圈或加載動畫 ) : ( <p>{data}</p> )} </div> )} </div> );}export default LazyLoadedModal;在這個例子中，只有當用戶點擊“打開模態(tài)框”按鈕后，才會開始獲取模態(tài)框的數(shù)據(jù)。在此之前，不會發(fā)起不必要的網(wǎng)絡(luò)請求。一旦開始獲取數(shù)據(jù)，便會顯示加載信息（或旋轉(zhuǎn)器），以示用戶請求正在處理。
在當今快速的數(shù)字時代，響應(yīng)時間的每一毫秒都十分重要。用戶尋求快速響應(yīng)，而企業(yè)無法承受讓用戶等待的后果。性能優(yōu)化已成為提供優(yōu)質(zhì)數(shù)字體驗的必要條件，而不僅僅是一種優(yōu)化。
通過預取、記憶化、并行獲取和延遲加載等技術(shù)，開發(fā)者能有效提升應(yīng)用性能。雖然這些策略在應(yīng)用和方法上有所不同，但它們共同的目標是確保應(yīng)用程序能夠盡可能高效和快速地運行。
重要的一點是，不存在一勞永逸的解決方案或“銀彈”。每個應(yīng)用程序都有其獨特之處，性能優(yōu)化應(yīng)結(jié)合對應(yīng)用程序需求的深入理解、對用戶期望的認識，以及正確技術(shù)的有效應(yīng)用。這是一個持續(xù)改進和學習的過程。
劉汪洋，51CTO社區(qū)編輯，昵稱：明明如月，一個擁有 5 年開發(fā)經(jīng)驗的某大廠高級 Java 工程師，擁有多個主流技術(shù)博客平臺博客專家稱號。
原文標題：Performance Optimization Strategies in Highly Scalable Systems，作者：Hemanth Murali
本文鏈接：http://www.www897cc.com/showinfo-26-43323-0.html高度可擴展系統(tǒng)中的性能優(yōu)化策略
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 深入了解Java的GC原理，掌握JVM 性能調(diào)優(yōu)！
下一篇： JS小知識，分享一些讓我迷惑的前端面試題
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號