fix(perf): support fps calculation for js

driver/js/CMakeLists.txt

@@ -149,6 +149,7 @@ set(SOURCE_SET
     src/base/js_value_wrapper.cc
     src/engine.cc
     src/js_driver_utils.cc
+    src/modules/animation_frame_module.cc
     src/modules/animation_module.cc
     src/modules/event_module.cc
     src/modules/scene_builder_module.cc

driver/js/include/driver/modules/animation_frame_module.h

@@ -0,0 +1,52 @@
+/*
+ *
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2019 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+#pragma once
+
+#include "driver/modules/module_base.h"
+#include "driver/napi/callback_info.h"
+
+class Scope;
+
+namespace hippy {
+inline namespace driver {
+inline namespace module {
+
+class AnimationFrameModule : public ModuleBase, public std::enable_shared_from_this<AnimationFrameModule> {
+public:
+  AnimationFrameModule() : frame_id_(0), listener_id_(0), has_event_listener_(false), enable_update_frame_(false) {}
+  void RequestAnimationFrame(hippy::napi::CallbackInfo& info, void* data);
+  void CancelAnimationFrame(hippy::napi::CallbackInfo& info, void* data);
+
+  virtual std::shared_ptr<CtxValue> BindFunction(std::shared_ptr<Scope> scope, std::shared_ptr<CtxValue> rest_args[]) override;
+
+private:
+  void UpdateFrame(const std::shared_ptr<Scope>& scope);
+  int32_t frame_id_;
+  uint64_t listener_id_;
+  bool has_event_listener_;
+  bool enable_update_frame_;
+};
+
+}
+}
+}

driver/js/lib/bridge/android/native2js.js

@@ -44,7 +44,21 @@ global.hippyBridge = (_action, _callObj) => {
 
   switch (action) {
     case 'callBack': {
-      if (__GLOBAL__.moduleCallList[callObj.callId]) {
+      if (callObj.moduleName === 'AnimationFrameModule' && callObj.moduleFunc === 'requestAnimationFrame') {
+        if (callObj.result !== 0) {
+          resp = 'native2js error: native failed to call AnimationFrameModule requestAnimationFrame()';
+          break;
+        }
+        __GLOBAL__.canRequestAnimationFrame = true;
+        if (__GLOBAL__.requestAnimationFrameQueue[callObj.frameId]) {
+          __GLOBAL__.requestAnimationFrameQueue[callObj.frameId].forEach((cb) => {
+            if (typeof cb === 'function') {
+              cb(callObj.params);
+            }
+          });
+          delete __GLOBAL__.requestAnimationFrameQueue[callObj.frameId];
+        }
+      } else if (__GLOBAL__.moduleCallList[callObj.callId]) {
         const callbackObj = __GLOBAL__.moduleCallList[callObj.callId];
         if (callObj.result !== 0 && typeof callbackObj.reject === 'function') {
           callbackObj.reject(callObj.params);

driver/js/lib/bridge/flutter/native2js.js

@@ -46,17 +46,17 @@ global.hippyBridge = (_action, _callObj) => {
     case 'callBack': {
       if (callObj.result === 1) {
         resp = 'error: native no modules';
-      } else if (callObj.callId && callObj.moduleName === 'AnimationFrameModule' && callObj.moduleFunc === 'requestAnimationFrame') {
+      } else if (callObj.frameId && callObj.moduleName === 'AnimationFrameModule' && callObj.moduleFunc === 'requestAnimationFrame') {
         __GLOBAL__.canRequestAnimationFrame = true;
 
-        if (__GLOBAL__.requestAnimationFrameQueue[callObj.callId]) {
-          __GLOBAL__.requestAnimationFrameQueue[callObj.callId].forEach((cb) => {
+        if (__GLOBAL__.requestAnimationFrameQueue[callObj.frameId]) {
+          __GLOBAL__.requestAnimationFrameQueue[callObj.frameId].forEach((cb) => {
             if (typeof cb === 'function') {
               cb(callObj.params);
             }
           });
 
-          delete __GLOBAL__.requestAnimationFrameQueue[callObj.callId];
+          delete __GLOBAL__.requestAnimationFrameQueue[callObj.frameId];
         }
       } else if (callObj.callId && __GLOBAL__.moduleCallList[callObj.callId]) {
         const callbackObj = __GLOBAL__.moduleCallList[callObj.callId];

driver/js/lib/bridge/ios/native2js.js

@@ -21,20 +21,16 @@
 /* eslint-disable no-undef */
 /* eslint-disable no-underscore-dangle */
 
-const { JSTimersExecution } = require('../../modules/ios/jsTimersExecution.js');
-
 global.__hpBatchedBridge = {};
 
 __hpBatchedBridge.flushedQueue = () => {
-  JSTimersExecution.callImmediates();
   const queue = __GLOBAL__._queue;
   __GLOBAL__._queue = [[], [], [], __GLOBAL__._callID];
   return queue[0].length ? queue : null;
 };
 
 __hpBatchedBridge.invokeCallbackAndReturnFlushedQueue = (cbID, args) => {
   __hpBatchedBridge.__invokeCallback(cbID, args);
-  JSTimersExecution.callImmediates();
   return __hpBatchedBridge.flushedQueue();
 };
 
@@ -59,22 +55,19 @@ __hpBatchedBridge.callFunctionReturnFlushedQueue = (module, method, args) => {
     } else {
       targetModule[method].call(targetModule, args[1].params);
     }
-  } else if (module === 'JSTimersExecution') {
-    if (method === 'callTimers') {
-      args[0].forEach((timerId) => {
-        const timerCallFunc = JSTimersExecution.callbacks[
-          JSTimersExecution.timerIDs.indexOf(timerId)
-        ];
-        if (typeof timerCallFunc === 'function') {
-          try {
-            timerCallFunc();
-          } catch (e) {
-            console.reportUncaughtException(e); // eslint-disable-line
+  } else if (module === 'AnimationFrameModule') {
+    if (method === 'requestAnimationFrame') {
+      __GLOBAL__.canRequestAnimationFrame = true;
+      const frameId = args[0];
+      if (__GLOBAL__.requestAnimationFrameQueue[frameId]) {
+        __GLOBAL__.requestAnimationFrameQueue[frameId].forEach((cb) => {
+          if (typeof cb === 'function') {
+            cb();
           }
-        }
-      });
+        });
+        delete __GLOBAL__.requestAnimationFrameQueue[frameId];
+      }
     }
   }
-  JSTimersExecution.callImmediates();
   return __hpBatchedBridge.flushedQueue();
 };

driver/js/lib/entry/android/hippy.js

@@ -35,7 +35,7 @@ require('../../global/UtilsModule.js'); // Hippy.device.vibrate Hippy.device.can
 require('../../global/android/global.js'); // set __GLOBAL__ object
 require('../../bridge/android/native2js.js');
 require('../../global/Event.js'); // register global events callback
-require('../../global/android/requestAnimationFrame.js'); // requestAnimationFrame cancelAnimationFrame
+require('../../global/AnimationFrameModule.js'); // requestAnimationFrame cancelAnimationFrame
 require('../../global/android/Turbo.js'); // turbo
 
 // alias

driver/js/lib/entry/flutter/hippy.js

@@ -35,7 +35,7 @@ require('../../global/UtilsModule.js'); // Hippy.device.vibrate Hippy.device.can
 require('../../global/flutter/global.js'); // __GLOBAL__
 require('../../bridge/flutter/native2js.js');
 require('../../global/Event.js'); // register global events callback
-require('../../global/flutter/requestAnimationFrame.js'); // requestAnimationFrame cancelAnimationFrame
+require('../../global/AnimationFrameModule.js'); // requestAnimationFrame cancelAnimationFrame
 // require('../../global/flutter/Turbo.js'); // turbo
 
 // alias

driver/js/lib/entry/ios/hippy.js

@@ -34,10 +34,9 @@ require('../../global/Storage.js'); // localStorageAsync
 require('../../global/Dimensions.js'); // Hippy.device.window Hippy.device.screen Hippy.device.pixelRatio
 require('../../global/UtilsModule.js'); // Hippy.device.vibrate Hippy.device.cancelVibrate
 require('../../global/ios/global.js'); // set __GLOBAL__ object
-require('../../modules/ios/jsTimersExecution.js'); // ios module for .h build
 require('../../bridge/ios/native2js.js');
 require('../../global/Event.js'); // register global events callback
-require('../../global/ios/requestAnimationFrame.js'); // requestAnimationFrame cancelAnimationFrame
+require('../../global/AnimationFrameModule.js'); // requestAnimationFrame cancelAnimationFrame
 require('../../global/ios/Turbo.js'); // turbo
 // alias
 global.localStorage = Hippy.asyncStorage;

driver/js/lib/global/flutter/requestAnimationFrame.js → driver/js/lib/global/AnimationFrameModule.js

@@ -18,24 +18,29 @@
  * limitations under the License.
  */
 
+/* eslint-disable no-undef */
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable prefer-rest-params */
+/* eslint-disable prefer-spread */
+
+const AnimationFrameModule = internalBinding('AnimationFrameModule');
+
 global.requestAnimationFrame = (cb) => {
   if (cb) {
     if (__GLOBAL__.canRequestAnimationFrame) {
-      __GLOBAL__.requestAnimationFrameId = __GLOBAL__.moduleCallId;
+      __GLOBAL__.canRequestAnimationFrame = false;
+      __GLOBAL__.requestAnimationFrameId += 1;
       __GLOBAL__.requestAnimationFrameQueue[__GLOBAL__.requestAnimationFrameId] = [];
       __GLOBAL__.requestAnimationFrameQueue[__GLOBAL__.requestAnimationFrameId].push(cb);
-
-      __GLOBAL__.canRequestAnimationFrame = false;
-
-      Hippy.bridge.callNativeWithCallbackId('AnimationFrameModule', 'requestAnimationFrame', true);
+      AnimationFrameModule.RequestAnimationFrame(__GLOBAL__.requestAnimationFrameId);
     } else if (__GLOBAL__.requestAnimationFrameQueue[__GLOBAL__.requestAnimationFrameId]) {
       __GLOBAL__.requestAnimationFrameQueue[__GLOBAL__.requestAnimationFrameId].push(cb);
     }
-
     return '';
   }
-
   throw new TypeError('Invalid arguments');
 };
 
-global.cancelAnimationFrame = () => {};
+global.cancelAnimationFrame = () => {
+  AnimationFrameModule.CancelAnimationFrame();
+};