FlutterWeb渲染模式及提速

背景

在使用Flutter Web开发的网站过程中,常常会遇到不同浏览器之间的兼容性问题。例如,在Google浏览器中动画和交互都非常流畅,但在360浏览器中却会出现卡顿现象;在Google浏览器中动态设置图标颜色正常显示,而在Safari浏览器中颜色会缺失变成黑色;甚至在某些电脑的Google浏览器中也会出现动画卡顿和页面报错的问题。

优化方案

这些问题的根源在于渲染模式的选择。将渲染模式从HTML改为CanvasKit后,大部分问题得以解决,动画变得流畅,画面也变得顺滑,图标显示正常,兼容性也得到了提升。

渲染模式

  • HTML渲染模式:Flutter使用HTML的custom elementCSSCanvasSVG来渲染UI元素。
  • CanvasKit渲染模式:Flutter将Skia编译成WebAssembly格式,并使用WebGL进行渲染。
HTMLCanvasKit
命令行–web-renderer html–web-renderer canvaskit
优点体积更小渲染性能强,多端一致
缺点渲染性能差,跨端兼容差体积相较HTML多2.5M

尽管CanvasKit模式提供了更流畅的体验,但它也带来了一些新的问题。

由CanvasKit引起的问题

图片跨域

报错描述:
Access to XMLHttpRequest at ‘https://…/icon/setting_228.webp’ from origin ‘https://…’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

在CanvasKit模式下,图片请求类型变为xhr,不支持跨域,导致跨域问题。解决方法是将图片放到与服务同域的目录下。

首次打开加载慢

首次加载CanvasKit模式的网站时,会下载大量文件,包括CanvasKit绘制引擎和字体。解决方法是将引擎和字体文件存放到自己的服务器,以加快下载速度。

  1. 引擎本地化:下载引擎文件并放到项目中,然后在运行或打包时指定本地路径。

    --dart-define=FLUTTER_WEB_CANVASKIT_URL=assets/canvaskit/
    
  2. 字体本地化:下载字体文件并放到本地,替换构建后的main.dart.js中的字体路径。

字体需下载

Skia自绘引擎需要字体库支持,导致首次加载时出现字体乱码。解决方法是在pubspec.yaml中设置本地字体包。

main.dart.js 切片化

以上两步只是加快了下载速度,但所需要下载的内容大小没变,好在Flutter 官方提供 deferred as 关键字来实现 Widget 的懒加载,而 dart2js 在编译过程中可以将懒加载的 Widget 进行按需打包,这样的拆包机制叫做 Lazy Loading。借助 Lazy Loading,我们可以在路由表中使用 deferred 引入各个路由(页面),以此来达到业务代码拆离的目的。具体的代码请看这篇文章《JS 分片优化》,很详细。

试验拆分后,main.dart.js由8.5M缩减至5.5M。

加载时提示

为了解决首次加载时白屏的问题,可以在白屏时加个提示。

html复制
<style>body {width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;}
</style>
<div id="text">静态资源加载中...</div>
浏览器刷新后页面加载两次

刷新页面时会加载两次,是由于serviceWorker注册失败导致。解决方法是注释掉注册逻辑,直接调用loadMainDartJs()

路由包装url地址方式失效

在CanvasKit模式下,刷新后不会停留在当前页面。解决方法是在刷新时记录当前页面,并在初始化时还原。

最后

尽管CanvasKit模式在动画和交互体验上优于HTML模式,但其加载速度较慢。在内部使用的网站中,可以优先考虑交互体验。

参考

  1. Flutter web内网网站如何发布?解决外网下canvaskit.js和字体无法加载问题
  2. serviceWorker 服务器与浏览器之间的代理
  3. Flutter 开启web构建以及web的两种渲染模式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/41901.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

8-阿里云服务器 ECS配置R及Studio Server

目录 查看服务器系统 关于linux系统 安装R 1,查看官方教程 2,安装R ①修改sources.list文件 ②安装R:点击Y ③更新最新版R ④安装 RStudio(省略此步骤) ​编辑 ⑤安装 RStudio Server 登录rstudio-server 1,添加账号(root账号不能登录) 2,开启8787端口访…

SpringBoot+OSS实现文件上传

创建spring boot项目 pom依赖 <dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.17.4</version></dependency><dependency><groupId>javax.xml.bind</groupI…

SpringBoot项目练习

文章目录 SpringBootVue后台管理系统所需软件下载、安装、版本查询Vue搭建一个简单的Vue项目 Spring项目1项目架构 SpringBootVue后台管理系统 学习视频&#xff1a; https://www.bilibili.com/video/BV1U44y1W77D/?spm_id_from333.337.search-card.all.click&vd_sourcec…

深入Laravel事件系统:创建与使用事件的指南

Laravel的事件系统是一种强大的机制&#xff0c;它允许你将应用程序的行为封装成事件&#xff0c;然后在适当的时候触发这些事件。这不仅有助于代码的解耦&#xff0c;还提高了应用程序的可维护性和可扩展性。本文将详细介绍如何在Laravel中创建和使用事件&#xff0c;包括事件…

2024年7月6日随笔

期末考试全部结束了&#xff0c;这个月是真累啊&#xff0c;一堆事&#xff0c;好在都熬过来了&#xff0c;上次参加的那个码题杯自己居然进国赛了&#xff0c;我看了一下职业赛道和本科赛道的题&#xff0c;本科赛道的感觉要难上不少&#xff0c;比赛时间是一周后&#xff0c;…

Pytorch(笔记7损失函数类型)

前言 损失函数&#xff08;Loss Function&#xff09;&#xff1a;是定义在单个样本上的&#xff0c;是指一个样本的误差&#xff0c;度量模型一次预测的好坏。 代价函数&#xff08;Cost Function&#xff09;成本函数经验风险&#xff1a;是定义在整个训练集上的&#xff0c…

集成学习(三)GBDT 梯度提升树

前面学习了&#xff1a;集成学习&#xff08;二&#xff09;Boosting-CSDN博客 梯度提升树&#xff1a;GBDT-Gradient Boosting Decision Tree 一、介绍 作为当代众多经典算法的基础&#xff0c;GBDT的求解过程可谓十分精妙&#xff0c;它不仅开创性地舍弃了使用原始标签进行…

virtualbox窗口和win10窗口的切换

1、问题&#xff1a; 从windows切换到虚拟机可以用快捷键 ALTTAB&#xff0c;但是从虚拟机到windows使用 ALTTAB 无法成功切换 2、解决方法&#xff1a; 按下图操作 按上面步骤设置之后&#xff0c;每次要从虚拟机窗口切换到windows窗口 只需要先按 CtrlAlt 跳出虚拟机窗口&…

【已解决】“import ... =“ 只能在 TypeScript 文件中使用

现象 在使用 import 语法的时候&#xff0c;代码报红&#xff0c;提示&#xff1a;“import ... “ 只能在 TypeScript 文件中使用 原因 代码被 VSCode 解析成 TypeScript 语法 解决方案&#xff1a; 关闭 JavaScript 的验证启用即可。 mac 快捷方式&#xff1a;comman s…

微机原理与单片机 知识体系梳理

单片机笔记分享 我个人感觉单片机要记的东西很多&#xff0c;也很琐碎&#xff0c;特别是一些位、寄存器以及相关作用等&#xff0c;非常难以记忆。因此复习时将知识点整理在了一起做成思维导图&#xff0c;希望对大家有所帮助。内容不是很多&#xff0c;可能有些没覆盖全&…

vue-tabs标签页引入其他页面

tabs页面 <template> <div class"app-container"> <el-tabs v-model"activeName" type"card" tab-click"handleClick"> <el-tab-pane label"套餐用户列表" name"first"> <user-list r…

VMware CentOS7 Linux 网络配置

本文主要描述VMware虚拟机的网络配置。 如上所示&#xff0c;在CentOS Linux虚拟机中设置网络连接使用桥接模式&#xff0c;该模式对接主机物理网络&#xff0c;直接由主机的物理网络的DHCP服务器动态分配IP地址&#xff0c;或者在CentOS Linux的操作系统的网络配置中设置静态的…

HACCP体系认证:守护食品安全的黄金标准

在食品生产过程中&#xff0c;食品安全始终是重中之重。为了确保食品的安全性和质量&#xff0c;越来越多的企业开始采用HACCP&#xff08;危害分析关键控制点&#xff09;体系认证。这个体系不仅能帮助企业预防食品安全问题&#xff0c;还能显著提升产品质量和市场竞争力。 HA…

android新闻app(二)

新闻详细页&#xff1a; 历史浏览记录SQList&#xff1a; 分类&#xff1a; 历史浏览记录主体UI和详细&#xff1a; 侧边栏&#xff1a; 参考&#xff1a;浩宇开发

如何给gitlab其他访问者创建账号并增加权限

嗨&#xff0c;今天创建了项目之后&#xff0c;我想把项目链接发送给其他人&#xff0c;让他下载这个项目&#xff0c;结果发现对方打开显示登录的界面&#xff0c;没错&#xff0c;他要想使用这个git下载项目&#xff0c;首先他的有一个git账号 接下来我找有权限的相关人员给他…

网络“ping不通”,如何排查和解决呢?

网络问题往往复杂且难以预测&#xff0c;其中“ping不通”是常见的网络故障之一。 1. 确认问题现象 首先&#xff0c;明确问题是完全无法ping通(无响应)还是ping通但有高延迟或丢包。这有助于缩小问题范围。 2. 本地检查 网络接口状态&#xff1a;使用ifconfig(Linux)或ipc…

认识并理解webSocket

今天逛牛客&#xff0c;看到有大佬分享说前端面试的时候遇到了关于webSocket的问题&#xff0c;一看自己都没见过这个知识点&#xff0c;赶紧学习一下&#xff0c;在此记录&#xff01; WebSocket 是一种网络通信协议&#xff0c;提供了全双工通信渠道&#xff0c;即客户端和服…

策略为王股票软件源代码-----如何修改为自己软件61----资讯菜单修改-----举例---------调用同花顺网页------

http://stock.sina.com.cn 将原来的新浪行情,修改为同花顺, 搜索 stock.sina.com.cn... StkUI\View\InfoView.cpp(58):char

AI防损员的应用:正确率高达90%背后的真相与挑战

1. AI防损员的工作原理 AI防损员利用图像识别技术来判断商超中的行为是否异常。它将所有观察到的行为分为两类&#xff1a;正常行为和异常行为。这是一种二分类问题。 2. 数据不平衡问题 在现实中的商超环境中&#xff0c;正常行为占绝大多数&#xff0c;异常行为&#xff08;…

MySQL——备份

为什么要备份&#xff1f; 保证重要的数据不丢失 方便数据转移 MySQL数据库备份方式&#xff1a; 1. 直接拷贝物理文件 2. 在可视化工具中手动导出 —— 在想要导出的表或者库中&#xff0c;右键选择备份或导出 3. 使用命令行导出 mysqldump ——cmd打开命令行 —…