研究背景介绍：
目前手上有一个Flutter 和原生的混合项目、一个React 项目，那么Flutter2.0发布后其对Web的支持能够带来哪些好处呢，本文将基于项目现状做出一些分析对比🤔
一. 应用场景
a.React则是目前Web开发的一种相对十分成熟的框架 了
b.Flutter在最新Stable版本中支持android、ios、web,而beta版对PC等其他设备也有支持
二.开发语言、工具、调试
React：
语言：JSX,CSS,ES6,TS,JS等
工具：vs code(主要)
调试：Chrome
Flutter:
语言：Dart
工具：vs code/android studio/intellij
调试：DevTools(渲染原理不同，决定了不好用浏览器调试，浏览器只能看页面效果)
三.渲染原理差异
React我理解是通过js静态语言构建出的DOM，比你直接用JS创建DOM 节点有了更多的玩法，
一个项目常常会做出单页面应用
Flutter则是用dart编写的，通过dartjs转换为js语言，但是这个脚本不是去创建那些丰富的DOM
节点，而是直接做屏幕绘制,这是Flutter的核心思想，比如Flutter 原生也是直接绘制。这会带来
两个重要的改变：
1.Flutter Web页面你获取DOM元素的时候发现你获取不到，其实它其实是一个视频贞
2.Flutter Web页面直接跳转或者返回，我、发现和Flutter 原生应用体验一致，也就是说二级页面没有加载过程和返回上一个状态依然保持（这一点我试了React 单页面应用对比感受类似的）
补充：Flutter Web 渲染引擎有两种，分别是HTML renderer 和CanvasKit renderer
如果选择 HTML renderer，是否意味着Flutter控件对应了html标签？但实际上我使用网页浏览器抓取元素，发现没有直接获取到控件元素节点，请问是为什么呢？
HTML renderer
Uses a combination of HTML elements, CSS, Canvas elements, and SVG elements. This renderer has a smaller download size.
CanvasKit renderer
This renderer is fully consistent with Flutter mobile and desktop, has faster performance with higher widget density, but adds about 2MB in download
a
四.建议
目前直接改造 Flutter 混合应用条件还达不到，因为过去的项目的第三方库也没有对应版本
Flutter Web生态还需要时间发展，但是它的体验效果和多端适配确实太诱人了，所以一些
新的页面可以考虑使用Flutter 编译成Web版本发布，
一.是提升用户体验，
二.也解决了热更新的问题了，
三.老得混合项目升级上来之后，可以轻松转换为Flutter Native
五.遗留问题思考
React 会把一个编译出很多chunk.js，避免一个页面的体积太大，
那么Flutter Web在项目很大的时候，是如何管控N个页面资源呢？？
参考资料:
1.https://flutter.dev/docs/get-started/codelab-web
2.https://flutter.dev/docs/development/tools/web-renderers
网友评论