flutter 開發web端的性能優化

參考資料

Flutter for Web 首次首屏優化 ——JS 分片優化_main.dart.js-CSDN博客文章瀏覽閱讀1.4k次。本文介紹了如何通過延遲加載組件和js分片優化Flutter for Web應用的加載速度。在實踐中，通過按需加載減少js文件大小，使用并行加載提升加載效率。通過延遲加載組件功能，將各頁面代碼拆分，減少初始加載體積。此外，通過在index.html中預加載分片js實現并行加載，進一步減少加載時間。實測結果顯示，優化措施顯著提升了頁面加載速度。 https://blog.csdn.net/u012181546/article/details/128355930一個編譯問題帶你了解 Flutter Web 的打包構建和分包實現_flutter web js分包-CSDN博客文章瀏覽閱讀1.4k次。Flutter Web 作為 Flutter 框架中最特殊的平臺，由于 Web 平臺的特殊性，它默認就具備了兩種不同的渲染引擎：html ： 通過平臺的 canvas 和 Element 完成布局繪制；canvaskit ： 通過 Webassembly + Skia 繪制控件；雖然都知道 canvavskit 更接近 Flutter 的設計理念，但是由于它構建的 wasm 文件大小和字體加載等問題帶來的成本考慮，業界一般會選用更輕量化的 html 引擎，而今天的問題也是基于 html 引擎來展開。_flutter web js分包 https://blog.csdn.net/qq_39221436/article/details/123802726?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-123802726-blog-128355930.235^v43^pc_blog_bottom_relevance_base2&spm=1001.2101.3001.4242.1&utm_relevant_index=2Flutter for web 首次加載過慢問題優化_flutter web 字體-CSDN博客文章瀏覽閱讀6.8k次。本文針對Flutter for Web應用首次加載出現長時間白屏問題進行優化，主要從兩個方面著手：一是通過更換Canvaskit的加載地址，使用國內CDN加速；二是處理字體加載，避免在線加載Noto字體導致的延遲和亂碼，可選擇自定義字體并精簡資源。此外，刪除不必要的系統資源包和添加加載動畫也能提升用戶體驗。 https://blog.csdn.net/Bright_TY/article/details/120225419?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7EPaidSort-1-120225419-blog-128355930.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7EPaidSort-1-120225419-blog-128355930.235%5Ev43%5Epc_blog_bottom_relevance_base2&utm_relevant_index=1

deferred_helper | Flutter packageA plugin to help manage deferred content of a flutter aphttps://pub.dev/packages/deferred_helper

web性能查看工具

Debug performance for web apps | Flutter 中文文檔 - Flutter 中文開發者網站 - Flutter

官方給的優化方案

https://medium.com/flutter/best-practices-for-optimizing-flutter-web-loading-speed-7cc0df14ce5c

1、聲明 延遲（deferred）?導入包

如：

import 'package:myapp/hello.dart' deferred as hello;Future<void> loadHelloLibrary() async {await hello.loadLibrary();hello.sayHi();
}

2、圖片資源修改為webp格式

一、核心優化方向

1.?關鍵資源體積最小化

  • 啟用 Tree Shaking 和壓縮：聲明html方式官方已不支持

  • Web 渲染器 | Flutter 中文文檔 - Flutter 中文開發者網站 - Flutter

  • canvaskit?和?skwasm

    flutter build web --release --web-renderer skwasm?

  • 僅打包首屏必要代碼：

    • 使用路由懶加載（如?AutoRoute?或手動?import()）。

    • 將非首屏組件（如彈窗、二級頁面）拆分為獨立模塊

  • 移除冗余依賴：

  • 檢查?pubspec.yaml，刪除未使用的包。

  • 使用?dependency_validator?工具掃描未使用的依賴：

  • flutter pub global activate dependency_validator

?使用

dart pub global run dependency_validator
2.?關鍵資源預加載

  • 預加載主 JS 和字體：
    在?web/index.html?的?<head>?中添加：

  • <link rel="preload" href="main.dart.js" as="script">
<link rel="preload" href="fonts/Roboto.woff2" as="font" type="font/woff2" crossorigin>

  • ?預連接 CDN 或域名（如使用 CDN 托管 CanvasKit）：

  • <link rel="preconnect" href="https://unpkg.com">

3.?優化資源加載順序

  • 延遲非關鍵資源：

    • 將統計腳本、廣告 SDK 等移至頁面底部或用?async/defer?加載：

    • <script src="analytics.js" defer></script>

    • 按需加載 CanvasKit（若必須使用）：

    • # 構建時指定 CDN 路徑，避免打包到主資源
flutter build web --web-renderer canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=https://cdn.example.com/canvaskit/

二、渲染優化

1.?優先展示骨架屏

  • 添加 Loading 占位圖：

    • 在 Flutter 初始化完成前，通過 HTML/CSS 顯示一個簡單的骨架屏：

    • <!-- web/index.html -->
<div id="skeleton" style="background: lightgray; width: 100%; height: 100vh;"></div>
<script>window.addEventListener('load', function() {document.getElementById('skeleton').style.display = 'none';});
</script>

2.?優化字體加載

  • 使用?font-display: swap：
    在?web/styles.css?中定義字體：

  • @font-face {font-family: 'CustomFont';src: url('fonts/CustomFont.woff2') format('woff2');font-display: swap;  /* 先顯示備用字體，再替換 */
}

  • 子集化字體（僅保留必要字符）。

免布局抖動

  • 固定圖片尺寸：

    • 為?Image?組件明確指定?width?和?height，避免瀏覽器重排：

  • Image.asset('assets/logo.png', width: 200, height: 100)

三、服務端優化

1.?啟用 HTTP/2 和 Brotli 壓縮

  • Nginx 配置示例：

  • server {listen 443 ssl http2;gzip on;gzip_types text/plain text/css application/json application/javascript;brotli on;  # 需要安裝 Brotli 模塊brotli_types text/plain text/css application/json application/javascript;
}

  • Brotli 比 Gzip 壓縮率提高 20-30%。

2.?CDN 加速靜態資源

  • 將以下內容托管到 CDN：

    • main.dart.js

    • CanvasKit 文件（canvaskit.wasm、canvaskit.js）

    • 字體和圖片

3.?緩存策略

  • 設置強緩存（Cache-Control: max-age=31536000）和哈希文件名：

  • <!-- 在構建流程中為文件名添加哈希 -->
<script src="main.dart.js?hash=abcd1234"></script>

四、深度優化技巧

1.?分析關鍵請求鏈

  • 使用 Chrome DevTools 的?Network?面板：

    • 過濾?initiator?為?parser?的請求（關鍵鏈請求）。

    • 優化最長任務（Long Tasks）和 TTI（Time to Interactive）。

2.?Service Worker 緩存

  • 實現離線緩存和資源預加載：

// web/service-worker.js
self.addEventListener('install', (event) => {event.waitUntil(caches.open('v1').then((cache) => {return cache.addAll(['/', '/main.dart.js', '/styles.css']);}));
});

3.?動態加載渲染引擎

  • 根據設備能力動態選擇渲染器：

  • // 在 web/index.html 中檢測設備性能
if (isLowEndDevice) {window.flutterWebRenderer = "html";
} else {window.flutterWebRenderer = "canvaskit";
}

五、效果驗證

優化項優化前 (3G 網絡)優化后 (3G 網絡)
首屏加載時間4.8s1.2s
LCP (最大內容渲染)5.1s1.5s
JS 總體積 (gzip)2.1MB680KB

操作步驟總結：

  1. 構建優化：啟用 Release 模式，選擇 HTML 渲染器，代碼分割。

  2. 資源預加載：預加載主 JS、字體，預連接 CDN。

  3. 服務端加速：啟用 HTTP/2 + Brotli，CDN 分發。

  4. 渲染策略：骨架屏、字體?swap、固定圖片尺寸。

  5. 深度優化：Service Worker 緩存、動態渲染引擎。

通過以上步驟，首屏加載時間可減少?60-80%。最終效果取決于具體場景，建議使用?Lighthouse?和?WebPageTest?持續跟蹤指標。

調試

看網絡資源請求，按照耗時排序

先將有外網鏈接的資源 下載下來，替換成本地鏈接(不只是字體文件 還有client 文本文件，需要注意類型)

替換步驟是

1、將外網資源下載下來，放入模版web目錄下(會自動拷貝到打包的web目錄下)

2、根據找到的文件名，在打包產物全局搜索，替換為本地路徑

搜索關鍵字

KFOmCnqEu92Fr1Me5WZLCzYlKw

accounts.google.com

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/73003.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/73003.shtml
英文地址，請注明出處：http://en.pswp.cn/web/73003.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

編譯安裝redis，systemtcl配置redis自啟動，系統并發調優

編譯安裝redis，systemtcl配置redis自啟動，系統并發調優

編譯安裝redis&#xff0c;systemtcl配置redis自啟動&#xff0c;系統并發調優 1、編譯安裝redis wget https://download.redis.io/releases/redis-7.4.2.tar.gz tar -zxf redis-7.4.2.tar.gz cd redis-7.4.2/ make make install/usr/local/bin/redis-server -v2、systemtcl配…
閱讀更多...
firefly經典藍牙和QProcess、QFileSystemWatcher記錄

firefly經典藍牙和QProcess、QFileSystemWatcher記錄

QProcess 默認不會啟動一個 shell 來解析命令，而是直接調用操作系統的系統調用來啟動外部程序。也就是通過fork一個子線程或者exec一個子進程來執行命令。 QProcess的參數模式 QProcess 需要明確指定命令的可執行文件路徑或參數列表。 如果命令是一個可執行文件的路徑…
閱讀更多...
Java定時任務的三重境界：從單機心跳到分布式協調

Java定時任務的三重境界：從單機心跳到分布式協調

《Java定時任務的三重境界&#xff1a;從單機心跳到分布式協調》 本文將以生產級代碼標準&#xff0c;揭秘Java定時任務從基礎API到分布式調度的6種實現范式&#xff0c;深入剖析ScheduledThreadPoolExecutor與Quartz Scheduler的線程模型差異&#xff0c;并給出各方案的性能壓…
閱讀更多...
QT QML實現音頻波形圖進度條，可點擊定位或拖動進度

QT QML實現音頻波形圖進度條，可點擊定位或拖動進度

前言 本項目實現了使用QT QML創建一個音頻波形圖進度條的功能。用戶可以在界面上看到音頻波形圖&#xff0c;并且可以點擊進度條上的位置進行定位&#xff0c;也可以拖動進度條來調整播放進度。可以讓用戶更方便地控制音頻的播放進度&#xff0c;并且通過音頻波形圖可以直觀地…
閱讀更多...
高速網絡包處理，基礎網絡協議上內核態直接處理數據包，XDP技術的原理

高速網絡包處理，基礎網絡協議上內核態直接處理數據包，XDP技術的原理

文章目錄 預備知識TCP/IP 網絡模型&#xff08;4層、7層&#xff09;iptables/netfilterlinux網絡為什么慢 DPDKXDPBFPeBPFXDPXDP 程序典型執行流通過網絡協議棧的入包XDP 組成 使用 GO 編寫 XDP 程序明確流程選擇eBPF庫編寫eBPF代碼編寫Go代碼動態更新黑名單 預備知識 TCP/IP…
閱讀更多...
[每周一更]-(第137期)：Go + Gin 實戰：Docker Compose + Apache 反向代理全流程

[每周一更]-(第137期)：Go + Gin 實戰：Docker Compose + Apache 反向代理全流程

文章目錄 **1. Go 代碼示例&#xff08;main.go&#xff09;****2. Dockerfile 多段構建**3.構建 Docker 鏡像**4. docker-compose.yml 直接拉取鏡像****5. 運行容器****6. 測試 API**7、配置域名訪問**DNS解析&#xff1a;將域名轉換為IP地址****DNS尋址示例** 8.錯誤記錄 訪問…
閱讀更多...
SpringMVC基本使用

SpringMVC基本使用

SpringMVC是什么&#xff1f; Spring MVC 是 Spring 框架中的一個模塊&#xff0c;用于構建基于 MVC&#xff08;Model-View-Controller&#xff09;設計模式的 Web 應用程序。它分離了應用程序的業務邏輯、用戶界面和用戶輸入&#xff0c;使開發更加模塊化和易于維護。 核心…
閱讀更多...
Qt之MVC架構MVD

Qt之MVC架構MVD

什么是MVC架構&#xff1a; MVC模式&#xff08;Model–view–controller&#xff09;是軟件工程中的一種軟件架構模式&#xff0c;把軟件系統分為三個基本部分&#xff1a;模型&#xff08;Model&#xff09;、視圖&#xff08;View&#xff09;和控制器&#xff08;Controll…
閱讀更多...
Stream 流中 flatMap 方法詳解

Stream 流中 flatMap 方法詳解

&#x1f3af; 1. flatMap() 到底是啥&#xff1f; flatMap() 是 Stream 里的中間操作&#xff0c;它的作用可以分兩步理解&#xff1a; 第一步&#xff1a;對流里的每個元素&#xff0c;先**映射&#xff08;轉換&#xff09;**成一個 Stream。第二步&#xff1a;把多個子流…
閱讀更多...
(C語言）理解 回調函數 和 qsort函數

(C語言）理解 回調函數 和 qsort函數

一. 回調函數 1. 什么是回調函數&#xff1f; 回調函數&#xff08;Callback Function&#xff09;是通過 函數指針 調用的函數。其本質是&#xff1a; 將函數作為參數傳遞給另一個函數&#xff0c;并在特定條件下被調用&#xff0c;實現 反向控制。 2. 回調函數的使用 回調函…
閱讀更多...
vscode記錄

vscode記錄

vs code 下載安裝&#xff0c;git 配置&#xff0c;插件安裝_vscode安裝git插件-CSDN博客 手把手教你在VS Code中使用 Git_vscode如何輸入git命令-CSDN博客 VS Code | 如何快速重啟VS Code&#xff1f;_vscode 怎么一鍵全部重啟-CSDN博客 1&#xff0c;安裝插件與git集成 2&am…
閱讀更多...
唯品會商品詳情頁架構設計與實現：高并發場景下的技術實踐?

唯品會商品詳情頁架構設計與實現：高并發場景下的技術實踐?

引言 唯品會作為國內領先的電商平臺&#xff0c;其商品詳情頁需要應對海量用戶的高并發訪問&#xff0c;同時保證低延遲和高可用性。本文將從架構設計、數據庫優化、緩存策略、前端渲染等方面&#xff0c;結合代碼示例&#xff0c;深入解析唯品會商品詳情頁的技術實現。 一、…
閱讀更多...
大數據學習（80）-數倉分層

大數據學習（80）-數倉分層

&#x1f34b;&#x1f34b;大數據學習&#x1f34b;&#x1f34b; &#x1f525;系列專欄&#xff1a; &#x1f451;哲學語錄: 用力所能及&#xff0c;改變世界。 &#x1f496;如果覺得博主的文章還不錯的話&#xff0c;請點贊&#x1f44d;收藏??留言&#x1f4dd;支持一…
閱讀更多...
數智讀書筆記系列021《大數據醫療》：探索醫療行業的智能變革

數智讀書筆記系列021《大數據醫療》：探索醫療行業的智能變革

一、書籍介紹 《大數據醫療》由徐曼、沈江、余海燕合著&#xff0c;由機械工業出版社出版 。徐曼是南開大學商學院副教授&#xff0c;在大數據驅動的智能決策研究領域頗有建樹&#xff0c;尤其在大數據驅動的醫療與健康決策方面有著深入研究&#xff0c;曾獲天津優秀博士論文、…
閱讀更多...
SpringSecurity——前后端分離登錄認證

SpringSecurity——前后端分離登錄認證

SpringSecurity——前后端分離登錄認證的整個過程 前端&#xff1a; 使用Axios向后端發送請求 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>登錄</title><script src"https://cdn…
閱讀更多...
qt下載和安裝教程國內源下載地址

qt下載和安裝教程國內源下載地址

qt不斷在更新中&#xff0c;目前qt6日漸成熟&#xff0c;先前我們到官方下載或者國內鏡像直接可以下載到exe文件安裝&#xff0c;但是最近幾年qt官方似乎在逐漸關閉舊版本下載通道&#xff0c;列為不推薦下載。但是qt5以其廣泛使用和穩定性&#xff0c;以及積累大量代碼使得qt5…
閱讀更多...
Mysql架構理論部分

Mysql架構理論部分

Mysql架構是什么&#xff1f;實際可以理解為執行一條sql語句所要經歷的階段有哪些&#xff01; 1.連接層 &#xff08;1&#xff09;客戶端發起連接 客戶端通過TCP/IP、Unix Socket或命名管道等方式向Mysql服務器發起鏈接請求 想要了解tcp與udp的區別&#xff0c;可以參考這…
閱讀更多...
架構師面試（十九）：IM 架構

架構師面試（十九）：IM 架構

問題 IM 系統從架構模式上包括 【介紹人模式】和 【代理人模式】。介紹人模式也叫直連模式&#xff0c;消息收發不需要服務端的參與&#xff0c;即客戶端之間直連的方式&#xff1b;代理人模式也叫中轉模式&#xff0c;消息收發需要服務端進行中轉。 下面關于這兩類模式描述的…
閱讀更多...
【服務器】RAID0、RAID1、RAID5、RAID6、RAID10異同與應用

【服務器】RAID0、RAID1、RAID5、RAID6、RAID10異同與應用

目錄 ?編輯 一、RAID概述 1.1 磁盤陣列簡介 1.2 功能 二、RAID級別 2.1 RAID 0&#xff08;不含校驗與冗余的條帶存儲&#xff09; 2.2 RAID1&#xff08;不含校驗的鏡像存儲&#xff09; 2.3 RAID 5 &#xff08;數據塊級別的分布式校驗條帶存儲&#xff09; 4、RAI…
閱讀更多...
MySQL身份驗證的auth_socket插件

MySQL身份驗證的auth_socket插件

在Ubuntu 20.04 LTS上&#xff0c;MySQL 8.0默認使用auth_socket插件進行身份驗證&#xff0c;可能存在意想不到的情況。 一、auth_socket插件 在使用sudo mysql或通過sudo切換用戶后執行任何MySQL命令時&#xff0c;不需要輸入密碼或錯誤密碼都可以正常登入mysql數據庫&…
閱讀更多...
最新文章

Copyright @ 2022~2023