我正在参加「启航方案」

前言

H5 和 FlutterWeb 是两种不同的技术，它们在不同的场景下有不同的优势和适用范围。H5 通常具有更高的功能和更好的用户体会，适用于构建大型、复杂的使用程序，例如游戏、电商网站等。而FlutterWeb最初并不是想作为一个 HTML 的替代品，而是想依据 Flutter 能够快速构建出全渠道的所支撑的使用。

但随着FlutterWeb技术日渐老练，现已能流畅的在PC端运行。在某些场景下，FlutterWeb是否具备了替换手机端H5页面的能力呢？

测验

用Flutter开发一个Demo页面进行测验，以展现信息为主，逻辑交互不复杂的页面，包含了一个动画、一个100条数据的列表和与Native通讯功用。

显现与交互

  1. 以Android为例，在Android的WebView中能正常显现出Demo的网页，如图所示。

    FlutterWeb能在Native端的WebView中使用么？

  2. 在测验根本动画，没有明显卡顿，帧数监测如下。动画时，帧数能够保持在60帧左右。

    FlutterWeb能在Native端的WebView中使用么？

  3. 列表快速滑动，能看到在某些瞬间帧数低至20 ~ 30帧，大多数仍是保持在60帧左右。

    FlutterWeb能在Native端的WebView中使用么？

页面加载时间

网页加载速度是用户体会中的要害点。得益于之前在PC端进行的FlutterWeb启动优化，在手机端也能用上，Demo页面的测验结果是500毫秒到800毫秒左右，当然加载速度有网络状态有关。如图所示。

FlutterWeb能在Native端的WebView中使用么？
页面越复杂所需求下载的时长就越多，除了目前的优化方案，还能够采用预下载的办法，在Native页面运行时，提早将页面数据下载至本地，进步加载功率。

通讯

JS交互对错常常用的功用，那FlutterWeb能够与手机端进行通讯么？ 答案是能够。

办法是在index.html中写好bridge办法协助传递信息。Flutter端经过html.window完成发送与接纳，Android端经过地址重定向回调办法监听。

index.html：
    // 接纳Flutter宣布的音讯
    window.addEventListener('reciveMessage4Flutter', function () {
          console.log("reciveMessage4Flutter");
         sendMessage2Native();
    })
    // 发送音讯给Native
    function sendMessage2Native() {
      console.log("sendMessage2Native");
        window.location.href = "sendMessage2Native"
    }
    // 接纳Native宣布的音讯
    function reciveMessage4Native() {
      console.log("reciveMessage4Native");
      sendMessage2Flutter();
    }
    // 发送音讯给Flutter
    function sendMessage2Flutter() {
      console.log("sendMessage2Flutter");
      window.dispatchEvent(new Event("sendMessage2Flutter"))
    }

长处与缺陷

长处

  1. 节约资源，在资源不足时用Flutter开发能够生成三端页面，节省时间和人力。
  2. 间接完成Flutter热更新，由于是Web办法布置，所以能突破原生封锁，完成热更新。这也是目前Flutter端需求的功用。

缺陷

  1. 相较于H5开发，功能、兼容性和生态FlutterWeb都是比不了的，目前并不能满足所有场景。
  2. FlutterWeb页面加载是依据Native的WebView，而WebView本身功能上就有局限，没有Native好。

CanvasKit形式

上文所说的场景都是依据html形式，FlutterWeb除了支撑html还支撑CanvasKit形式， 该形式是将 Skia 编译成 WebAssembly 格式，并运用 WebGL 渲染绘制页面，所以页面会更流畅，兼容性会更好，但是有个弊端包体积会增大8M左右（引擎和字体）。目前html也有很好的表现，所以CanvasKit形式的性价比偏低。

定论

目前FlutterWeb 能够在Native中的WebView中使用，在功能方面表现杰出，有较高的页面刷新帧率。然而，在实际使用中，功能表现还受到许多其他要素的影响，因此详细情况需求依据详细的使用场景来评估。

尽管不能完全替代H5页面在手机端的使用，但它能够作为一个弥补，协助开发人员更好地开发业务，进步灵活性，开发人员能够依据详细的需求和场景，选择适宜的技术来构建使用程序。

点赞、保藏mark一下✨✨万一用届时找不到了呢