化實(shí)戰(zhàn))
1. 從一次真實(shí)的“等待”說起為什么draw.io的首次加載如此磨人如果你和我一樣經(jīng)常需要畫流程圖、架構(gòu)圖或者UML圖那么draw.io現(xiàn)在也叫diagrams.net大概率是你的工具箱里的常客。它免費(fèi)、開源、功能強(qiáng)大支持本地部署幾乎成了技術(shù)文檔的標(biāo)配。但不知道你有沒有遇到過這樣的場景項(xiàng)目評(píng)審會(huì)前5分鐘你匆匆點(diǎn)開一個(gè)draw.io鏈接或者打開一個(gè)包含復(fù)雜圖表的新頁面然后……瀏覽器標(biāo)簽頁就卡在了那個(gè)旋轉(zhuǎn)的加載圖標(biāo)上。會(huì)議室里大家的目光開始聚焦而你只能尷尬地笑笑“稍等圖還在加載?！边@種“第一次加載慢”的體驗(yàn)幾乎每個(gè)深度用戶都遭遇過。它不像一個(gè)持續(xù)的卡頓更像是一個(gè)“啟動(dòng)稅”——你必須為第一次使用付出時(shí)間代價(jià)。今天我們就來徹底拆解這個(gè)現(xiàn)象。這不僅僅是一個(gè)簡單的“網(wǎng)絡(luò)慢”的問題其背后涉及前端工程化、資源加載策略、瀏覽器機(jī)制以及我們使用習(xí)慣的多個(gè)層面。理解它不僅能讓你在下次等待時(shí)心里有數(shù)更能幫助你優(yōu)化自己的使用環(huán)境甚至如果你負(fù)責(zé)的項(xiàng)目也在用draw.io這些思路同樣具有借鑒意義。2. 慢在哪里一次完整的首次加載鏈路拆解要解決問題先要定位問題。draw.io的“第一次加載慢”是一個(gè)籠統(tǒng)的感受我們需要把它拆解成具體的時(shí)間都花在了哪些環(huán)節(jié)上。從一個(gè)用戶點(diǎn)擊鏈接或打開頁面到可以流暢地拖動(dòng)第一個(gè)圖形這中間到底發(fā)生了什么2.1 核心瓶頸靜態(tài)資源的分量與下載draw.io是一個(gè)功能極其豐富的單頁應(yīng)用SPA。這意味著絕大部分的代碼JavaScript、樣式CSS、字體、圖標(biāo)甚至一部分圖形模板都需要在用戶首次訪問時(shí)一次性或分批下載到瀏覽器中。主應(yīng)用包main app bundle這是最核心的部分包含了繪圖編輯器的主體框架、工具條邏輯、圖形渲染引擎、事件處理系統(tǒng)等。這個(gè)JavaScript文件通常體積不小尤其在功能迭代后。圖形庫文件draw.io支持?jǐn)?shù)十種圖表類型流程圖、時(shí)序圖、實(shí)體關(guān)系圖等每種類型都對(duì)應(yīng)一套圖形定義文件。這些文件同樣需要加載。字體文件為了確保圖表在不同設(shè)備上顯示一致draw.io會(huì)加載特定的網(wǎng)絡(luò)字體。這里就關(guān)聯(lián)到一個(gè)近期的高頻詞——“draw.io宋體”。很多用戶發(fā)現(xiàn)在涉及中文時(shí)加載會(huì)額外卡頓正是因?yàn)樗趪L試加載或回退到特定的中文字體資源這個(gè)過程如果網(wǎng)絡(luò)不暢就會(huì)成為明顯的阻塞點(diǎn)。圖標(biāo)與圖片資源工具欄上密密麻麻的圖標(biāo)、側(cè)邊欄的形狀庫預(yù)覽圖這些都是一個(gè)個(gè)的圖片資源或SVG Sprite。當(dāng)瀏覽器發(fā)起請(qǐng)求時(shí)它會(huì)解析HTML然后依次發(fā)現(xiàn)這些資源的引用并創(chuàng)建多個(gè)HTTP連接去下載它們。在現(xiàn)代瀏覽器對(duì)同一域名有連接數(shù)限制通常為6個(gè)的情況下這些資源需要排隊(duì)下載。任何一個(gè)資源特別是那些體積大或服務(wù)器響應(yīng)慢的都會(huì)拖累整個(gè)頁面的可交互時(shí)間。2.2 被忽略的環(huán)節(jié)第三方依賴與初始化除了看得見的資源還有一些隱藏的耗時(shí)點(diǎn)第三方CDNdraw.io的一些庫如某些前端框架、圖形處理庫可能托管在公共CDN上。如果這個(gè)CDN的節(jié)點(diǎn)對(duì)你當(dāng)前網(wǎng)絡(luò)不友好或者發(fā)生了短暫的故障就會(huì)導(dǎo)致腳本加載超時(shí)進(jìn)而觸發(fā)瀏覽器的長等待或回退機(jī)制。本地存儲(chǔ)檢查與初始化draw.io加載后會(huì)立即檢查瀏覽器的本地存儲(chǔ)LocalStorage、IndexedDB用于讀取你的主題設(shè)置、最近打開的文檔、自定義圖形庫等。這個(gè)檢查操作是同步的雖然通常很快但如果用戶瀏覽器存儲(chǔ)已滿或存在異常也可能導(dǎo)致卡頓。圖形渲染引擎初始化下載完代碼還不夠?yàn)g覽器需要解析并執(zhí)行JavaScript。draw.io的渲染引擎基于mxGraph需要初始化畫布Canvas、計(jì)算布局、綁定事件。對(duì)于配置較低的機(jī)器或同時(shí)打開過多標(biāo)簽頁的瀏覽器這個(gè)執(zhí)行階段也會(huì)消耗可觀的時(shí)間。2.3 一個(gè)具體的場景模擬假設(shè)你通過https://app.diagrams.net/訪問。你的瀏覽器會(huì)獲取并解析初始HTML。加載主CSS文件頁面開始有基本樣式。加載主JavaScript文件體積最大關(guān)鍵路徑阻塞。執(zhí)行主JS期間JS會(huì)動(dòng)態(tài)插入更多script標(biāo)簽來加載圖形庫、字體等。加載字體文件如遇到“宋體”回退邏輯可能在此處等待或超時(shí)。所有資源加載完畢后JS引擎初始化應(yīng)用從存儲(chǔ)加載配置最后渲染出完整的UI。這個(gè)過程在網(wǎng)絡(luò)良好、設(shè)備強(qiáng)勁的情況下可能只需2-3秒但在網(wǎng)絡(luò)波動(dòng)、使用老舊設(shè)備或?yàn)g覽器插件沖突時(shí)延長到10秒以上也不稀奇。3. 深入“字體加載”之坑為什么“draw.io宋體”成了熱議焦點(diǎn)近期“draw.io宋體”成為了一個(gè)關(guān)聯(lián)熱詞這絕非偶然。它精準(zhǔn)地戳中了一個(gè)影響中文用戶首次加載體驗(yàn)的典型痛點(diǎn)。讓我們深入看看這個(gè)具體問題。3.1 問題的本質(zhì)字體回退與FOIT/FOUT在Web開發(fā)中字體加載有一個(gè)經(jīng)典問題Flash of Invisible Text (FOIT) 和 Flash of Unstyled Text (FOUT)。簡單說就是瀏覽器在加載指定字體時(shí)如何處理尚未加載完成的文本。FOIT不可見文本閃爍瀏覽器先隱藏文本等待自定義字體加載完成后再顯示。如果字體加載慢用戶會(huì)看到長時(shí)間空白。FOUT無樣式文本閃爍瀏覽器先用備用字體如系統(tǒng)默認(rèn)字體顯示文本等自定義字體加載完成后再替換。用戶會(huì)看到文字樣式突然變化。draw.io為了確保繪圖界面尤其是工具欄、菜單的字體顯示一致性很可能在CSS中聲明了特定的字體棧font stack。當(dāng)其中包含某些中文字體或字體族名稱如SimSun即宋體而該字體并非用戶系統(tǒng)自帶時(shí)瀏覽器就會(huì)嘗試去加載它。3.2 draw.io的字體加載策略推測根據(jù)社區(qū)反饋和觀察draw.io可能采用了類似以下的策略優(yōu)先使用某些英文字體如Helvetica, Arial, sans-serif。對(duì)于需要更好中文支持的情況可能會(huì)引用一個(gè)網(wǎng)絡(luò)字體或者依賴系統(tǒng)中存在的“宋體”SimSun。問題就出在第2點(diǎn)如果CSS中直接或間接地包含了font-family: ..., “SimSun”, ...這樣的聲明而用戶的系統(tǒng)如macOS、較新的Windows版本或Linux并沒有安裝“宋體”這個(gè)確切名稱的字體瀏覽器就會(huì)陷入一個(gè)尋找和匹配的過程。在某些瀏覽器實(shí)現(xiàn)中這個(gè)過程可能導(dǎo)致渲染阻塞或延遲。更糟糕的情況是如果draw.io的某些樣式或依賴庫錯(cuò)誤地、不必要地請(qǐng)求了一個(gè)不存在的網(wǎng)絡(luò)字體資源就會(huì)產(chǎn)生一個(gè)網(wǎng)絡(luò)請(qǐng)求這個(gè)請(qǐng)求最終會(huì)失敗404但失敗前的超時(shí)等待可能長達(dá)數(shù)秒會(huì)直接拖慢頁面加載。注意這里的“draw.io宋體”不一定指draw.io主動(dòng)提供了一個(gè)宋體文件更多可能是指其字體回退鏈中包含了“宋體”這個(gè)字體族名稱從而在跨平臺(tái)環(huán)境下觸發(fā)了瀏覽器的非最優(yōu)加載行為。3.3 如何驗(yàn)證和緩解字體問題作為用戶你可以通過瀏覽器開發(fā)者工具進(jìn)行初步診斷打開開發(fā)者工具F12切換到Network網(wǎng)絡(luò)選項(xiàng)卡。勾選Disable cache禁用緩存以模擬首次加載。刷新draw.io頁面。在篩選器中選擇Font字體查看是否有字體請(qǐng)求特別是那些狀態(tài)碼為失敗紅色或耗時(shí)很長的請(qǐng)求。同時(shí)觀察Console控制臺(tái)選項(xiàng)卡看是否有關(guān)于字體加載的警告或錯(cuò)誤信息。如果確認(rèn)字體是瓶頸一個(gè)臨時(shí)解決方案是使用瀏覽器插件強(qiáng)制指定網(wǎng)頁字體或者嘗試使用draw.io的桌面客戶端完全離線無此問題。4. 實(shí)戰(zhàn)優(yōu)化從用戶角度的提速指南理解了慢的原因我們就可以采取針對(duì)性的措施。以下是一些經(jīng)過驗(yàn)證的、能顯著提升draw.io首次加載速度的方法。4.1 利用瀏覽器緩存變“首次”為“非首次”這是最根本、最有效的方法。draw.io的慢特指“第一次”。一旦資源被瀏覽器緩存后續(xù)加載就是秒開。主動(dòng)預(yù)熱在需要高頻使用draw.io的工作日開始前或者項(xiàng)目啟動(dòng)初期主動(dòng)打開一次draw.io官網(wǎng)讓它完成完整的加載。之后即使關(guān)閉標(biāo)簽頁大部分靜態(tài)資源在緩存有效期內(nèi)都會(huì)存在。避免頻繁使用“無痕模式”或“隱私窗口”這些模式通常會(huì)在會(huì)話結(jié)束后清除緩存導(dǎo)致每次都是“首次”加載。謹(jǐn)慎使用“清除瀏覽數(shù)據(jù)”如果非要清除請(qǐng)避免勾選“緩存的圖片和文件”?；蛘呤褂酶?xì)的清除選項(xiàng)只清除Cookie和站點(diǎn)數(shù)據(jù)保留緩存。4.2 環(huán)境優(yōu)化網(wǎng)絡(luò)與瀏覽器網(wǎng)絡(luò)質(zhì)量確保穩(wěn)定的網(wǎng)絡(luò)連接。對(duì)于企業(yè)用戶如果draw.io被部署在內(nèi)網(wǎng)或特定的云服務(wù)上請(qǐng)確保該服務(wù)有良好的網(wǎng)絡(luò)帶寬和低延遲。瀏覽器選擇與狀態(tài)更新瀏覽器使用最新版本的Chrome、Edge或Firefox。新版瀏覽器在解析、編譯JavaScript和網(wǎng)絡(luò)協(xié)議棧上通常有優(yōu)化。管理瀏覽器擴(kuò)展某些廣告攔截器、安全插件或腳本管理器可能會(huì)錯(cuò)誤地?cái)r截、延遲draw.io的部分資源加載。嘗試在無痕模式下擴(kuò)展默認(rèn)禁用打開draw.io對(duì)比速度。如果速度正常則可以逐一禁用擴(kuò)展來排查元兇。減少同時(shí)打開的標(biāo)簽頁過多的標(biāo)簽頁會(huì)占用大量內(nèi)存和CPU影響新頁面腳本的執(zhí)行效率。4.3 終極方案使用桌面客戶端或離線部署如果你受困于網(wǎng)絡(luò)環(huán)境或者對(duì)加載速度有極致要求那么脫離瀏覽器是最好的選擇。官方桌面客戶端draw.io提供了Windows、macOS和Linux的桌面客戶端。它本質(zhì)是一個(gè)打包了本地Web服務(wù)器的Electron應(yīng)用。第一次安裝后所有資源都在本地加載速度極快且支持完全離線工作。這是對(duì)普通用戶最友好的提速方案。自行離線部署對(duì)于企業(yè)或團(tuán)隊(duì)可以考慮將draw.io的完整開源版本部署在自己的服務(wù)器或內(nèi)網(wǎng)環(huán)境中。這樣所有用戶訪問的都是內(nèi)網(wǎng)資源速度有保障且數(shù)據(jù)可控。部署方式可以參考其GitHub倉庫的說明通常需要一臺(tái)能運(yùn)行Node.js或Docker的服務(wù)器。5. 給開發(fā)者的啟示從draw.io的加載看Web應(yīng)用性能優(yōu)化如果你是一名Web應(yīng)用開發(fā)者draw.io的加載體驗(yàn)其實(shí)是一個(gè)絕佳的性能分析案例。我們可以從中提煉出一些普適的優(yōu)化思路。5.1 資源加載策略的權(quán)衡draw.io作為一個(gè)功能龐雜的應(yīng)用面臨一個(gè)經(jīng)典困境功能完整性 vs. 首次加載速度。它選擇的是“功能完整性優(yōu)先”這導(dǎo)致了較大的初始包體積。更優(yōu)解代碼分割與動(dòng)態(tài)導(dǎo)入現(xiàn)代前端框架如React、Vue都支持基于路由或組件的代碼分割。可以將繪圖編輯器核心、各種圖形庫、高級(jí)工具如插件拆分成獨(dú)立的塊chunk僅當(dāng)用戶需要用到某個(gè)圖表類型或功能時(shí)才動(dòng)態(tài)加載對(duì)應(yīng)的代碼。這能大幅降低初始負(fù)載。圖形庫的按需加載draw.io或許可以改造為初始只加載最通用的流程圖基礎(chǔ)圖形當(dāng)用戶從側(cè)邊欄選擇“實(shí)體關(guān)系圖”時(shí)再動(dòng)態(tài)加載ER圖特有的圖形定義。這需要更精細(xì)的工程架構(gòu)設(shè)計(jì)。5.2 字體與靜態(tài)資源的優(yōu)化字體策略使用font-display: swapCSS屬性。這告訴瀏覽器使用備用字體立即顯示文本FOUT待自定義字體加載完成后再替換。雖然會(huì)有一次字體切換但避免了文本長時(shí)間空白用戶體驗(yàn)更流暢。資源預(yù)加載與預(yù)連接在HTML的head中合理使用link relpreload和link relpreconnect提示瀏覽器提前建立連接或加載關(guān)鍵資源如主JS、核心CSS、關(guān)鍵字體。利用HTTP/2和CDNHTTP/2的多路復(fù)用特性可以緩解同一域名連接數(shù)限制的問題。將靜態(tài)資源部署在全球分布的CDN上能讓用戶從最近的節(jié)點(diǎn)獲取資源。5.3 應(yīng)用初始化與渲染優(yōu)化非關(guān)鍵渲染路徑異步化檢查本地存儲(chǔ)、加載用戶配置等操作是否可以在應(yīng)用主界面渲染完成后異步進(jìn)行是否可以增加一個(gè)加載骨架屏讓用戶感知到進(jìn)度而非白屏Worker的運(yùn)用將一些計(jì)算密集型任務(wù)如圖形布局計(jì)算、復(fù)雜導(dǎo)出放到Web Worker中避免阻塞主線程的渲染和交互。draw.io作為一個(gè)成熟項(xiàng)目其技術(shù)債務(wù)和兼容性考慮可能使得實(shí)施上述優(yōu)化并非易事。但對(duì)我們自己的項(xiàng)目而言在架構(gòu)初期就考慮這些點(diǎn)能有效避免未來遭遇類似的“首次加載慢”的投訴。6. 當(dāng)加載依然緩慢問題排查與故障樹即使采取了上述措施在某些極端環(huán)境下加載可能依然緩慢。這時(shí)我們需要一套系統(tǒng)性的排查方法。6.1 構(gòu)建排查故障樹你可以按照以下步驟像排查系統(tǒng)故障一樣定位問題是普遍問題還是個(gè)案用你的手機(jī)熱點(diǎn)連接測試排除公司/家庭網(wǎng)絡(luò)問題。讓同事在同一網(wǎng)絡(luò)下訪問看是否同樣慢。問題出在哪個(gè)階段打開瀏覽器開發(fā)者工具Network面板記錄加載全過程。觀察DOMContentLoaded和Load事件的時(shí)間如果兩者都很長說明是資源下載慢。觀察單個(gè)資源找出耗時(shí)最長的幾個(gè)請(qǐng)求通常是.js、.woff2字體文件?？雌鋀aterfall瀑布流是卡在Stalled排隊(duì)、TTFB首字節(jié)時(shí)間服務(wù)器響應(yīng)慢還是Content Download下載時(shí)間長是資源問題還是執(zhí)行問題如果資源很快下載完但頁面仍然長時(shí)間空白或卡頓切換到Performance面板錄制一段時(shí)間。查看主線程Main的活動(dòng)是否被某個(gè)長時(shí)間的JavaScript任務(wù)Long Task阻塞。這可能是初始化腳本執(zhí)行過慢。是否存在沖突如前所述在無痕模式下測試排除瀏覽器插件干擾。檢查瀏覽器是否安裝了某些“字體管理”或“網(wǎng)頁腳本注入”類插件。6.2 針對(duì)性的解決方案根據(jù)排查結(jié)果采取對(duì)應(yīng)措施網(wǎng)絡(luò)問題嘗試更換DNS如8.8.8.8或使用網(wǎng)絡(luò)加速工具注意合規(guī)性。如果是企業(yè)內(nèi)網(wǎng)部署聯(lián)系運(yùn)維檢查服務(wù)器狀態(tài)和帶寬。特定資源慢如果發(fā)現(xiàn)某個(gè)來自特定CDN的JS或字體文件慢可以嘗試使用瀏覽器插件如Resource Override將其重定向到另一個(gè)可用的公共CDN地址需謹(jǐn)慎可能引發(fā)兼容性問題。瀏覽器問題嘗試重置瀏覽器設(shè)置或創(chuàng)建一個(gè)全新的用戶配置文件進(jìn)行測試。硬件瓶頸對(duì)于老舊電腦關(guān)閉不必要的后臺(tái)程序確保內(nèi)存充足。draw.io作為富交互應(yīng)用對(duì)CPU和內(nèi)存有一定要求。我自己在幫助團(tuán)隊(duì)排查一個(gè)類似問題時(shí)最終發(fā)現(xiàn)罪魁禍?zhǔn)资且粋€(gè)用于語法高亮的瀏覽器擴(kuò)展它試圖解析和修改頁面上的所有svg元素而draw.io的繪圖區(qū)域正是SVG導(dǎo)致了嚴(yán)重的性能沖突。禁用該擴(kuò)展后加載時(shí)間從10秒以上降到了2秒以內(nèi)。draw.io第一次加載慢是一個(gè)由資源體積、網(wǎng)絡(luò)條件、瀏覽器狀態(tài)、字體策略等多因素共同作用的典型前端性能問題。對(duì)于用戶理解其原理后可以通過緩存預(yù)熱、使用桌面版、優(yōu)化瀏覽器環(huán)境來有效規(guī)避。對(duì)于開發(fā)者這是一個(gè)關(guān)于代碼分割、資源加載、渲染優(yōu)化的重要案例。下次當(dāng)你再面對(duì)那個(gè)旋轉(zhuǎn)的加載圖標(biāo)時(shí)希望你能清晰地知道時(shí)間花在了哪里并且有辦法讓它轉(zhuǎn)得更快一些。 拆解draw.io首次加載慢：從字體阻塞到前端性能優(yōu)化實(shí)戰(zhàn)
1. 從一次真實(shí)的“等待”說起為什么draw.io的首次加載如此磨人如果你和我一樣經(jīng)常需要畫流程圖、架構(gòu)圖或者UML圖那么draw.io現(xiàn)在也叫diagrams.net大概率是你的工具箱里的常客。它免費(fèi)、開源、功能強(qiáng)大支持本地部署幾乎成了技術(shù)文檔的標(biāo)配。但不知道你有沒有遇到過這樣的場景項(xiàng)目評(píng)審會(huì)前5分鐘你匆匆點(diǎn)開一個(gè)draw.io鏈接或者打開一個(gè)包含復(fù)雜圖表的新頁面然后……瀏覽器標(biāo)簽頁就卡在了那個(gè)旋轉(zhuǎn)的加載圖標(biāo)上。會(huì)議室里大家的目光開始聚焦而你只能尷尬地笑笑“稍等圖還在加載?！边@種“第一次加載慢”的體驗(yàn)幾乎每個(gè)深度用戶都遭遇過。它不像一個(gè)持續(xù)的卡頓更像是一個(gè)“啟動(dòng)稅”——你必須為第一次使用付出時(shí)間代價(jià)。今天我們就來徹底拆解這個(gè)現(xiàn)象。這不僅僅是一個(gè)簡單的“網(wǎng)絡(luò)慢”的問題其背后涉及前端工程化、資源加載策略、瀏覽器機(jī)制以及我們使用習(xí)慣的多個(gè)層面。理解它不僅能讓你在下次等待時(shí)心里有數(shù)更能幫助你優(yōu)化自己的使用環(huán)境甚至如果你負(fù)責(zé)的項(xiàng)目也在用draw.io這些思路同樣具有借鑒意義。2. 慢在哪里一次完整的首次加載鏈路拆解要解決問題先要定位問題。draw.io的“第一次加載慢”是一個(gè)籠統(tǒng)的感受我們需要把它拆解成具體的時(shí)間都花在了哪些環(huán)節(jié)上。從一個(gè)用戶點(diǎn)擊鏈接或打開頁面到可以流暢地拖動(dòng)第一個(gè)圖形這中間到底發(fā)生了什么2.1 核心瓶頸靜態(tài)資源的分量與下載draw.io是一個(gè)功能極其豐富的單頁應(yīng)用SPA。這意味著絕大部分的代碼JavaScript、樣式CSS、字體、圖標(biāo)甚至一部分圖形模板都需要在用戶首次訪問時(shí)一次性或分批下載到瀏覽器中。主應(yīng)用包main app bundle這是最核心的部分包含了繪圖編輯器的主體框架、工具條邏輯、圖形渲染引擎、事件處理系統(tǒng)等。這個(gè)JavaScript文件通常體積不小尤其在功能迭代后。圖形庫文件draw.io支持?jǐn)?shù)十種圖表類型流程圖、時(shí)序圖、實(shí)體關(guān)系圖等每種類型都對(duì)應(yīng)一套圖形定義文件。這些文件同樣需要加載。字體文件為了確保圖表在不同設(shè)備上顯示一致draw.io會(huì)加載特定的網(wǎng)絡(luò)字體。這里就關(guān)聯(lián)到一個(gè)近期的高頻詞——“draw.io宋體”。很多用戶發(fā)現(xiàn)在涉及中文時(shí)加載會(huì)額外卡頓正是因?yàn)樗趪L試加載或回退到特定的中文字體資源這個(gè)過程如果網(wǎng)絡(luò)不暢就會(huì)成為明顯的阻塞點(diǎn)。圖標(biāo)與圖片資源工具欄上密密麻麻的圖標(biāo)、側(cè)邊欄的形狀庫預(yù)覽圖這些都是一個(gè)個(gè)的圖片資源或SVG Sprite。當(dāng)瀏覽器發(fā)起請(qǐng)求時(shí)它會(huì)解析HTML然后依次發(fā)現(xiàn)這些資源的引用并創(chuàng)建多個(gè)HTTP連接去下載它們。在現(xiàn)代瀏覽器對(duì)同一域名有連接數(shù)限制通常為6個(gè)的情況下這些資源需要排隊(duì)下載。任何一個(gè)資源特別是那些體積大或服務(wù)器響應(yīng)慢的都會(huì)拖累整個(gè)頁面的可交互時(shí)間。2.2 被忽略的環(huán)節(jié)第三方依賴與初始化除了看得見的資源還有一些隱藏的耗時(shí)點(diǎn)第三方CDNdraw.io的一些庫如某些前端框架、圖形處理庫可能托管在公共CDN上。如果這個(gè)CDN的節(jié)點(diǎn)對(duì)你當(dāng)前網(wǎng)絡(luò)不友好或者發(fā)生了短暫的故障就會(huì)導(dǎo)致腳本加載超時(shí)進(jìn)而觸發(fā)瀏覽器的長等待或回退機(jī)制。本地存儲(chǔ)檢查與初始化draw.io加載后會(huì)立即檢查瀏覽器的本地存儲(chǔ)LocalStorage、IndexedDB用于讀取你的主題設(shè)置、最近打開的文檔、自定義圖形庫等。這個(gè)檢查操作是同步的雖然通常很快但如果用戶瀏覽器存儲(chǔ)已滿或存在異常也可能導(dǎo)致卡頓。圖形渲染引擎初始化下載完代碼還不夠?yàn)g覽器需要解析并執(zhí)行JavaScript。draw.io的渲染引擎基于mxGraph需要初始化畫布Canvas、計(jì)算布局、綁定事件。對(duì)于配置較低的機(jī)器或同時(shí)打開過多標(biāo)簽頁的瀏覽器這個(gè)執(zhí)行階段也會(huì)消耗可觀的時(shí)間。2.3 一個(gè)具體的場景模擬假設(shè)你通過https://app.diagrams.net/訪問。你的瀏覽器會(huì)獲取并解析初始HTML。加載主CSS文件頁面開始有基本樣式。加載主JavaScript文件體積最大關(guān)鍵路徑阻塞。執(zhí)行主JS期間JS會(huì)動(dòng)態(tài)插入更多script標(biāo)簽來加載圖形庫、字體等。加載字體文件如遇到“宋體”回退邏輯可能在此處等待或超時(shí)。所有資源加載完畢后JS引擎初始化應(yīng)用從存儲(chǔ)加載配置最后渲染出完整的UI。這個(gè)過程在網(wǎng)絡(luò)良好、設(shè)備強(qiáng)勁的情況下可能只需2-3秒但在網(wǎng)絡(luò)波動(dòng)、使用老舊設(shè)備或?yàn)g覽器插件沖突時(shí)延長到10秒以上也不稀奇。3. 深入“字體加載”之坑為什么“draw.io宋體”成了熱議焦點(diǎn)近期“draw.io宋體”成為了一個(gè)關(guān)聯(lián)熱詞這絕非偶然。它精準(zhǔn)地戳中了一個(gè)影響中文用戶首次加載體驗(yàn)的典型痛點(diǎn)。讓我們深入看看這個(gè)具體問題。3.1 問題的本質(zhì)字體回退與FOIT/FOUT在Web開發(fā)中字體加載有一個(gè)經(jīng)典問題Flash of Invisible Text (FOIT) 和 Flash of Unstyled Text (FOUT)。簡單說就是瀏覽器在加載指定字體時(shí)如何處理尚未加載完成的文本。FOIT不可見文本閃爍瀏覽器先隱藏文本等待自定義字體加載完成后再顯示。如果字體加載慢用戶會(huì)看到長時(shí)間空白。FOUT無樣式文本閃爍瀏覽器先用備用字體如系統(tǒng)默認(rèn)字體顯示文本等自定義字體加載完成后再替換。用戶會(huì)看到文字樣式突然變化。draw.io為了確保繪圖界面尤其是工具欄、菜單的字體顯示一致性很可能在CSS中聲明了特定的字體棧font stack。當(dāng)其中包含某些中文字體或字體族名稱如SimSun即宋體而該字體并非用戶系統(tǒng)自帶時(shí)瀏覽器就會(huì)嘗試去加載它。3.2 draw.io的字體加載策略推測根據(jù)社區(qū)反饋和觀察draw.io可能采用了類似以下的策略優(yōu)先使用某些英文字體如Helvetica, Arial, sans-serif。對(duì)于需要更好中文支持的情況可能會(huì)引用一個(gè)網(wǎng)絡(luò)字體或者依賴系統(tǒng)中存在的“宋體”SimSun。問題就出在第2點(diǎn)如果CSS中直接或間接地包含了font-family: ..., “SimSun”, ...這樣的聲明而用戶的系統(tǒng)如macOS、較新的Windows版本或Linux并沒有安裝“宋體”這個(gè)確切名稱的字體瀏覽器就會(huì)陷入一個(gè)尋找和匹配的過程。在某些瀏覽器實(shí)現(xiàn)中這個(gè)過程可能導(dǎo)致渲染阻塞或延遲。更糟糕的情況是如果draw.io的某些樣式或依賴庫錯(cuò)誤地、不必要地請(qǐng)求了一個(gè)不存在的網(wǎng)絡(luò)字體資源就會(huì)產(chǎn)生一個(gè)網(wǎng)絡(luò)請(qǐng)求這個(gè)請(qǐng)求最終會(huì)失敗404但失敗前的超時(shí)等待可能長達(dá)數(shù)秒會(huì)直接拖慢頁面加載。注意這里的“draw.io宋體”不一定指draw.io主動(dòng)提供了一個(gè)宋體文件更多可能是指其字體回退鏈中包含了“宋體”這個(gè)字體族名稱從而在跨平臺(tái)環(huán)境下觸發(fā)了瀏覽器的非最優(yōu)加載行為。3.3 如何驗(yàn)證和緩解字體問題作為用戶你可以通過瀏覽器開發(fā)者工具進(jìn)行初步診斷打開開發(fā)者工具F12切換到Network網(wǎng)絡(luò)選項(xiàng)卡。勾選Disable cache禁用緩存以模擬首次加載。刷新draw.io頁面。在篩選器中選擇Font字體查看是否有字體請(qǐng)求特別是那些狀態(tài)碼為失敗紅色或耗時(shí)很長的請(qǐng)求。同時(shí)觀察Console控制臺(tái)選項(xiàng)卡看是否有關(guān)于字體加載的警告或錯(cuò)誤信息。如果確認(rèn)字體是瓶頸一個(gè)臨時(shí)解決方案是使用瀏覽器插件強(qiáng)制指定網(wǎng)頁字體或者嘗試使用draw.io的桌面客戶端完全離線無此問題。4. 實(shí)戰(zhàn)優(yōu)化從用戶角度的提速指南理解了慢的原因我們就可以采取針對(duì)性的措施。以下是一些經(jīng)過驗(yàn)證的、能顯著提升draw.io首次加載速度的方法。4.1 利用瀏覽器緩存變“首次”為“非首次”這是最根本、最有效的方法。draw.io的慢特指“第一次”。一旦資源被瀏覽器緩存后續(xù)加載就是秒開。主動(dòng)預(yù)熱在需要高頻使用draw.io的工作日開始前或者項(xiàng)目啟動(dòng)初期主動(dòng)打開一次draw.io官網(wǎng)讓它完成完整的加載。之后即使關(guān)閉標(biāo)簽頁大部分靜態(tài)資源在緩存有效期內(nèi)都會(huì)存在。避免頻繁使用“無痕模式”或“隱私窗口”這些模式通常會(huì)在會(huì)話結(jié)束后清除緩存導(dǎo)致每次都是“首次”加載。謹(jǐn)慎使用“清除瀏覽數(shù)據(jù)”如果非要清除請(qǐng)避免勾選“緩存的圖片和文件”?；蛘呤褂酶?xì)的清除選項(xiàng)只清除Cookie和站點(diǎn)數(shù)據(jù)保留緩存。4.2 環(huán)境優(yōu)化網(wǎng)絡(luò)與瀏覽器網(wǎng)絡(luò)質(zhì)量確保穩(wěn)定的網(wǎng)絡(luò)連接。對(duì)于企業(yè)用戶如果draw.io被部署在內(nèi)網(wǎng)或特定的云服務(wù)上請(qǐng)確保該服務(wù)有良好的網(wǎng)絡(luò)帶寬和低延遲。瀏覽器選擇與狀態(tài)更新瀏覽器使用最新版本的Chrome、Edge或Firefox。新版瀏覽器在解析、編譯JavaScript和網(wǎng)絡(luò)協(xié)議棧上通常有優(yōu)化。管理瀏覽器擴(kuò)展某些廣告攔截器、安全插件或腳本管理器可能會(huì)錯(cuò)誤地?cái)r截、延遲draw.io的部分資源加載。嘗試在無痕模式下擴(kuò)展默認(rèn)禁用打開draw.io對(duì)比速度。如果速度正常則可以逐一禁用擴(kuò)展來排查元兇。減少同時(shí)打開的標(biāo)簽頁過多的標(biāo)簽頁會(huì)占用大量內(nèi)存和CPU影響新頁面腳本的執(zhí)行效率。4.3 終極方案使用桌面客戶端或離線部署如果你受困于網(wǎng)絡(luò)環(huán)境或者對(duì)加載速度有極致要求那么脫離瀏覽器是最好的選擇。官方桌面客戶端draw.io提供了Windows、macOS和Linux的桌面客戶端。它本質(zhì)是一個(gè)打包了本地Web服務(wù)器的Electron應(yīng)用。第一次安裝后所有資源都在本地加載速度極快且支持完全離線工作。這是對(duì)普通用戶最友好的提速方案。自行離線部署對(duì)于企業(yè)或團(tuán)隊(duì)可以考慮將draw.io的完整開源版本部署在自己的服務(wù)器或內(nèi)網(wǎng)環(huán)境中。這樣所有用戶訪問的都是內(nèi)網(wǎng)資源速度有保障且數(shù)據(jù)可控。部署方式可以參考其GitHub倉庫的說明通常需要一臺(tái)能運(yùn)行Node.js或Docker的服務(wù)器。5. 給開發(fā)者的啟示從draw.io的加載看Web應(yīng)用性能優(yōu)化如果你是一名Web應(yīng)用開發(fā)者draw.io的加載體驗(yàn)其實(shí)是一個(gè)絕佳的性能分析案例。我們可以從中提煉出一些普適的優(yōu)化思路。5.1 資源加載策略的權(quán)衡draw.io作為一個(gè)功能龐雜的應(yīng)用面臨一個(gè)經(jīng)典困境功能完整性 vs. 首次加載速度。它選擇的是“功能完整性優(yōu)先”這導(dǎo)致了較大的初始包體積。更優(yōu)解代碼分割與動(dòng)態(tài)導(dǎo)入現(xiàn)代前端框架如React、Vue都支持基于路由或組件的代碼分割。可以將繪圖編輯器核心、各種圖形庫、高級(jí)工具如插件拆分成獨(dú)立的塊chunk僅當(dāng)用戶需要用到某個(gè)圖表類型或功能時(shí)才動(dòng)態(tài)加載對(duì)應(yīng)的代碼。這能大幅降低初始負(fù)載。圖形庫的按需加載draw.io或許可以改造為初始只加載最通用的流程圖基礎(chǔ)圖形當(dāng)用戶從側(cè)邊欄選擇“實(shí)體關(guān)系圖”時(shí)再動(dòng)態(tài)加載ER圖特有的圖形定義。這需要更精細(xì)的工程架構(gòu)設(shè)計(jì)。5.2 字體與靜態(tài)資源的優(yōu)化字體策略使用font-display: swapCSS屬性。這告訴瀏覽器使用備用字體立即顯示文本FOUT待自定義字體加載完成后再替換。雖然會(huì)有一次字體切換但避免了文本長時(shí)間空白用戶體驗(yàn)更流暢。資源預(yù)加載與預(yù)連接在HTML的head中合理使用link relpreload和link relpreconnect提示瀏覽器提前建立連接或加載關(guān)鍵資源如主JS、核心CSS、關(guān)鍵字體。利用HTTP/2和CDNHTTP/2的多路復(fù)用特性可以緩解同一域名連接數(shù)限制的問題。將靜態(tài)資源部署在全球分布的CDN上能讓用戶從最近的節(jié)點(diǎn)獲取資源。5.3 應(yīng)用初始化與渲染優(yōu)化非關(guān)鍵渲染路徑異步化檢查本地存儲(chǔ)、加載用戶配置等操作是否可以在應(yīng)用主界面渲染完成后異步進(jìn)行是否可以增加一個(gè)加載骨架屏讓用戶感知到進(jìn)度而非白屏Worker的運(yùn)用將一些計(jì)算密集型任務(wù)如圖形布局計(jì)算、復(fù)雜導(dǎo)出放到Web Worker中避免阻塞主線程的渲染和交互。draw.io作為一個(gè)成熟項(xiàng)目其技術(shù)債務(wù)和兼容性考慮可能使得實(shí)施上述優(yōu)化并非易事。但對(duì)我們自己的項(xiàng)目而言在架構(gòu)初期就考慮這些點(diǎn)能有效避免未來遭遇類似的“首次加載慢”的投訴。6. 當(dāng)加載依然緩慢問題排查與故障樹即使采取了上述措施在某些極端環(huán)境下加載可能依然緩慢。這時(shí)我們需要一套系統(tǒng)性的排查方法。6.1 構(gòu)建排查故障樹你可以按照以下步驟像排查系統(tǒng)故障一樣定位問題是普遍問題還是個(gè)案用你的手機(jī)熱點(diǎn)連接測試排除公司/家庭網(wǎng)絡(luò)問題。讓同事在同一網(wǎng)絡(luò)下訪問看是否同樣慢。問題出在哪個(gè)階段打開瀏覽器開發(fā)者工具Network面板記錄加載全過程。觀察DOMContentLoaded和Load事件的時(shí)間如果兩者都很長說明是資源下載慢。觀察單個(gè)資源找出耗時(shí)最長的幾個(gè)請(qǐng)求通常是.js、.woff2字體文件?？雌鋀aterfall瀑布流是卡在Stalled排隊(duì)、TTFB首字節(jié)時(shí)間服務(wù)器響應(yīng)慢還是Content Download下載時(shí)間長是資源問題還是執(zhí)行問題如果資源很快下載完但頁面仍然長時(shí)間空白或卡頓切換到Performance面板錄制一段時(shí)間。查看主線程Main的活動(dòng)是否被某個(gè)長時(shí)間的JavaScript任務(wù)Long Task阻塞。這可能是初始化腳本執(zhí)行過慢。是否存在沖突如前所述在無痕模式下測試排除瀏覽器插件干擾。檢查瀏覽器是否安裝了某些“字體管理”或“網(wǎng)頁腳本注入”類插件。6.2 針對(duì)性的解決方案根據(jù)排查結(jié)果采取對(duì)應(yīng)措施網(wǎng)絡(luò)問題嘗試更換DNS如8.8.8.8或使用網(wǎng)絡(luò)加速工具注意合規(guī)性。如果是企業(yè)內(nèi)網(wǎng)部署聯(lián)系運(yùn)維檢查服務(wù)器狀態(tài)和帶寬。特定資源慢如果發(fā)現(xiàn)某個(gè)來自特定CDN的JS或字體文件慢可以嘗試使用瀏覽器插件如Resource Override將其重定向到另一個(gè)可用的公共CDN地址需謹(jǐn)慎可能引發(fā)兼容性問題。瀏覽器問題嘗試重置瀏覽器設(shè)置或創(chuàng)建一個(gè)全新的用戶配置文件進(jìn)行測試。硬件瓶頸對(duì)于老舊電腦關(guān)閉不必要的后臺(tái)程序確保內(nèi)存充足。draw.io作為富交互應(yīng)用對(duì)CPU和內(nèi)存有一定要求。我自己在幫助團(tuán)隊(duì)排查一個(gè)類似問題時(shí)最終發(fā)現(xiàn)罪魁禍?zhǔn)资且粋€(gè)用于語法高亮的瀏覽器擴(kuò)展它試圖解析和修改頁面上的所有svg元素而draw.io的繪圖區(qū)域正是SVG導(dǎo)致了嚴(yán)重的性能沖突。禁用該擴(kuò)展后加載時(shí)間從10秒以上降到了2秒以內(nèi)。draw.io第一次加載慢是一個(gè)由資源體積、網(wǎng)絡(luò)條件、瀏覽器狀態(tài)、字體策略等多因素共同作用的典型前端性能問題。對(duì)于用戶理解其原理后可以通過緩存預(yù)熱、使用桌面版、優(yōu)化瀏覽器環(huán)境來有效規(guī)避。對(duì)于開發(fā)者這是一個(gè)關(guān)于代碼分割、資源加載、渲染優(yōu)化的重要案例。下次當(dāng)你再面對(duì)那個(gè)旋轉(zhuǎn)的加載圖標(biāo)時(shí)希望你能清晰地知道時(shí)間花在了哪里并且有辦法讓它轉(zhuǎn)得更快一些。