React Native与PWA词搜索性能异常：为何PWA运算更快？

我正在撰写本科毕业论文，对比基于React JS构建的渐进式Web应用（PWA）与React Native构建的原生应用。测试功能为词搜索器，统计给定单词在文本字符串中的出现次数。原本预期作为计算密集型任务，移动端原生应用会更快，但实际测试中PWA速度远超原生应用，且未找到相关研究解释该现象。

两款应用使用完全相同的核心代码：

import React, { Component } from 'react';
import TextSearchView from '../view/TextSearchView';

class TextSearchPresenter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchTerm: 'the',
      result: null,
      text: 'The quick brown fox jumps over the lazy dog',
      loading: false,
      error: null,
      filterTime: 0,
    };
  }

  handleSearchTermChange = (event) => {
    const searchTerm = event.target.value;
    this.setState({ searchTerm });
  };
  

  handleTextChange = event => {
    const text = event.target.value;
    this.setState({ text });
  };

  handleSearch = async () => {
    this.setState({ loading: true });
    const filterStart = performance.now();
    const { searchTerm, text } = this.state;
    const regex = new RegExp(`\\b${searchTerm}\\b`, 'gi');
    const count = (text.match(regex) || []).length;
    const filterEnd = performance.now();
    const filterTime = filterEnd - filterStart;
    this.setState({ result: count, loading: false, filterTime });
  };

  handleError = (error) => {
    this.setState({ error, loading: false });
  };

  render() {
    const { searchTerm,text, result, loading, error, filterTime } = this.state;
    return (
      <TextSearchView
        searchTerm={searchTerm}
        text={text}
        result={result}
        loading={loading}
        onSearchTermChange={this.handleSearchTermChange}
        onTextChange={this.handleTextChange}
        onSearch={this.handleSearch}
        onError={this.handleError}
        filterTime={filterTime}
      />
    );
  }
  
}

export default TextSearchPresenter;

可能的原因分析： #

• JavaScript引擎优化差异：PWA运行在移动端浏览器的JS引擎（如Chrome的V8、Safari的JavaScriptCore），这类引擎经过多年迭代，在字符串处理、正则匹配等计算场景上积累了大量极致优化。而React Native默认使用的Hermes引擎（Android）更侧重启动速度和内存占用，在纯计算密集型任务的性能上可能不如V8；iOS上的JavaScriptCore，浏览器版本和React Native集成版本的优化程度也存在差距。
• 正则表达式的底层实现差异：不同JS引擎对正则表达式的优化逻辑不同。你的测试中使用了\b单词边界、全局匹配g和忽略大小写i的组合模式，浏览器引擎针对这类常用场景可能有专门的底层优化，而React Native的JS引擎在该模式下的处理效率更低。
• 测试环境的一致性问题：需确认两款应用是否在同一设备、同一系统版本下测试；React Native应用是否以release包运行——调试模式下React Native会引入大量调试开销，会严重拉低性能，必须用正式发布包测试。
• 代码编译优化级别差异：浏览器环境中的JS引擎会对热点代码（频繁执行的逻辑）进行深度JIT编译优化，比如V8的TurboFan编译器会将高频JS代码编译成更高效的机器码。而React Native的JS引擎可能因为移动设备资源限制或应用运行模式，没有触发相同级别的编译优化。

内容的提问来源于stack exchange，提问作者Sightvision