黑马程序员技术交流社区

标题: 看Facebook是如何优化React Native性能No.2 [打印本页]

作者: Android_Robot 时间: 2017-1-19 11:43
标题: 看Facebook是如何优化React Native性能No.2
启动时发生了什么

当我们设置好自动性能追踪，我们需要一个工具来给我们更多细节来决定启动过程中的那些部分需要优化。我们在我们框架里添加详细的启动/暂停的性能锚点，收集数据，使用 catapult 查看器来定位热点和阻塞线程间交互的。也可以从开发者菜单下触发开始对我们应用的性能分析。

在RN中，代码是在JavaScript线程中执行的。每次你要写数据到磁盘，在一次网络请求，或者取一些其他原生的资源（如摄像机），你的代码都需要调用原生模块。当你要渲染力你的 React 组件，它们会被转发到界面管理器的原生模块中，它在主线程中来执行布局和创建相应的视图。桥协议来转发请求到原生模块和被回调到你的JS代码（如果需要）。在RN中，所有原生的调用必须是异步的来避免阻塞主线程和JS线程。

在下面的事件组件的启动可视化图中，我们可以看到应用在 JS 队列中运行，为了显示事件列表，触发了相关的缓存读取（在本地存储队列中被异步触发）。一旦它取得了缓存数据，应用在 JS 队列用 React 渲染事件单元格，接着又传给栅格队列来布局和最终传给主队列来创建视图显示。这个例子展示了多个缓存读取（组合成单个常用读取操作可以做到更快）和一些React在JS线程上的渲染操作可以被统一合并。

性能提升

下面是那些我们在实施过程中最重要的性能和时序安排的提升做法，同时配有对应代码提交的链接。

启动时少做些

清理 Require/Babel 辅助方法（高优先级）：清理掉那些在require时执行的多余逻辑和代码，那些事为了网站准备而不是 RN
避免在加载打包文件时，复制和解码字符串
去除开发时才需要的模块：不像编译代码，在发布模式下 JS 不需要用来去除debug特性的预处理器。使用 Babel 的转换函数，我们可以剔除那些在 DEV 语句下方的代码，来有效的减少要打包的代码量，从而节省 JavaScript 解析时间。
在服务器端生成事件描述

作者: 1985206835long 时间: 2017-1-19 12:21
学习中！！！！

作者: 喝水喝饱了 时间: 2017-1-19 13:39
不得不服好厉害

作者: 袁志娜 时间: 2017-1-19 22:58

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2