[译] 测试原生，Flutter 和 React Native 移动开发之间的性能差异

以下是原生 Android 应用的 MainActivity：) {

2401_89285764

865人浏览 · 2025-01-14 13:38:05

2401_89285764 · 2025-01-14 13:38:05 发布

以下是原生 Android 应用的 MainActivity：

class MainActivity : AppCompatActivity() {

val timer by lazy {
findViewById(R.id.timer)
}

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
initTimer()
}

private fun initTimer() {
val startTime = elapsedRealtime()
val handler = Handler()
val runnable: Runnable = object: Runnable {
override fun run() {
val timeDifference = elapsedRealtime() - startTime
val seconds = timeDifference / 1000
val minutes = seconds / 60
val leftoverSeconds = seconds % 60
val leftoverMillis = timeDifference % 1000 / 10
timer.text = String.format(“%02d:%02d:%2d”, minutes, leftoverSeconds, leftoverMillis)
handler.postDelayed(this, 10)
}
}

handler.postDelayed(runnable, 1)
}
}

React Native

这是 React Native 应用程序的 App.js 文件：

export default class App extends Component {

render() {
return (

);
}
}

class Timer extends Component {
constructor(props) {
super(props);
this.state = {
milliseconds: 0,
seconds: 0,
minutes: 0,
}

let startTime = global.nativePerformanceNow();
setInterval(() => {
let timeDifference = global.nativePerformanceNow() - startTime;
let seconds = timeDifference / 1000;
let minutes = seconds / 60;
let leftoverSeconds = seconds % 60;
let leftoverMillis = timeDifference % 1000 / 10;
this.setState({
milliseconds: leftoverMillis,
seconds: leftoverSeconds,
minutes: minutes,
});
}, 10);
}

render() {
let { milliseconds, seconds, minutes } = this.state;
let time = sprintf(“%02d:%02d:%2d”, minutes, seconds, milliseconds);
return (
{time}
)
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
}
});

Flutter

最后这是我们的 Flutter main.dart 文件：

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);

@override
_MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State {
int _startTime = new DateTime.now().millisecondsSinceEpoch;
int _numMilliseconds = 0;
int _numSeconds = 0;
int _numMinutes = 0;

@override
void initState() {
super.initState();
Timer.periodic(new Duration(milliseconds: 10), (Timer timer) {
int timeDifference = new DateTime.now().millisecondsSinceEpoch - _startTime;
double seconds = timeDifference / 1000;
double minutes = seconds / 60;
double leftoverSeconds = seconds % 60;
double leftoverMillis = timeDifference % 1000 / 10;
setState(() {
_numMilliseconds = leftoverMillis.floor();
_numSeconds = leftoverSeconds.floor();
_numMinutes = minutes.floor();
});
});
}

@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Text(
sprintf(“%02d:%02d:%2d”, [_numMinutes, _numSeconds, _numMilliseconds]),
),
)
);
}
}

每个应用程序都遵循相同的基本结构 —— 它们都有一个计时器，每 10 毫秒重复一次，并重新计算自计时器启动以来经过的分钟数、秒和毫秒数。

我们如何测量性能？

对于那些不熟悉 Android 开发的人来说，Android Studio 是构建 Android 应用程序的首选编辑器/环境。它还附带了一系列有用的分析器来分析你的应用程序 —— 具体来说，它有一个 CPU 分析器，一个内存分析器和一个网络分析器。所以我们将使用这些分析器来判断性能。所有测试都在 Thoughtbot 的 Nexus 5X 和我自己的第一代 Google Pixel 上运行。React Native 应用程序将在 --dev 标志设置为 false 的情况下运行，Flutter 应用程序将在 profile 配置中运行，以模拟发布应用程序而不是 JIT 编译的调试应用程序。