专栏首页Jerry的SAP技术分享SAP UI5和React的页面渲染性能比较

SAP UI5和React的页面渲染性能比较

I have been working as a Fiori application developer and nowadays I have read quite a lot of blogs which introduce how to build web application using React. React is an open-source JavaScript library providing a view for data rendered as HTML. You can find more information from Wikipedia and its source code from github.

Most of those blogs have mentioned that React has quite good performance but don’t contain detail performance data. Since I have been using SAP UI5 framework in my daily work, I am curious about the performance comparison between SAPUI5 and React regarding the topic of page rendering.

Comparison environment setup

I have implemented a most simple application separately via UI5 and React to measure their page rendering performance difference. The application has the following appearance: it consists of a TextField with a given numbers of TextArea. The number of TextArea is controlled via code. Every time you type something in the TextField, the text you have typed will be written in all of the TextField as well.

The UI5 implementation

I use Json view to implement this application. The source code of “sample.view.js” has been listed below. The variable “_NUMBER” controls the number of TextAreas.

sap.ui.jsview("compareReact.sample", {
_NUMBER: 100,
_textAreas: [],
getControllerName : function() {
  return "compareReact.sample";
},
createContent : function(oController) {
  var that = this;
  var oInput1 = new sap.ui.commons.TextField('input1');
  oInput1.setValue("Hello!");
  oInput1.attachLiveChange(function(event){
   // console.log('Text changed to :'+ oInput1.getValue());
   for( var i = 0; i < that._NUMBER; i++){
     that._textAreas[i].setValue(event.getParameter("liveValue"));
   }
   }
  );
  this.oLayout = new sap.ui.layout.VerticalLayout("Layout1", {
          content:[oInput1]
        });
  for( var i = 0; i < this._NUMBER; i++){
   var oInput = new sap.ui.commons.TextArea('text' + i);
   this.oLayout.addContent(oInput);
   this._textAreas.push(oInput);
  }
  return this.oLayout;
}
});

The React implementation

For those who are not familiar with React, let me briefly introduce this source code: When I studied React for the first time, I was confused by the “syntax error” for example in line 28 and 32~36. Actually this is the supported syntax on script tag with type “text/babel” ( in line 10 ). Using this JSX grammar, it is allowed to insert native HTML markup into JavaScript code.

And keep in mind, such JSX code will be translated to native JavaScript when the page is rendered, by browser.min.js. For steps how to get and debug converted JavaScript source code, please refer to my blog How to get and debug converted source code in React.

In line 12, a customized ReactComponent is created which encapsulates the logic how the view should be rendered and what is the data source of this view. For me, I would like to treat the function render() as createContent() in SAPUI5 Json view, andsetState() as the ClientModel handling in SAPUI5. You see the line 33 “value={value}” and shouldn’t this be the same logic as SAPUI5 data binding?

When there is live-change event occurred, the callback function “this.handleChange” specified in line 33 will be called, which will then trigger ReactComponent.setState and finally render() will be called to refresh the page.

The created ReactComponent could be used the same way as native HTML tag to insert into the page.

The code above has exactly the same logic as what we do in every UI5 application:

Use Chrome timeline to measure performance

I will use the tab “TimeLine” to measure performance. There is already a good article introducing how to use this tab by Google.

UI5 application result

I start comparison by specifying the number of TextArea as 100. First start UI5 application. I type “3” for six times and I get the following measurement result:

(1) The six areas marked with black bold underline represent the performance data for each of the six “3” type action. As I only focus on rendering stuff, I can ignore the orange color for “Scripting”. So the total rendering time for scenario with 100 TextArea are 36.3ms and Painting time is 6.9ms.

You might be confused by the terms “layouting”, “rendering” and “painting”? Read this awesome blog How browsers work-Behind the scenes of modern web browsers to understand their exactly meaning.

And have you noticed the small red icon for “Long frame”?

You can click the hyperlink “jank” to know more detail about “Long frame“.

By clicking the corresponding rectangle with different color, you can get a detail view under tab “Event Log”.

For example, below detail view shows that the code in line 416 of TextField.js:formatted has triggered the style recalculation which consumes 1.8ms.

Click the hyperlink and we are eable to see the exact line with its context. In this case, we first get the native HTML DOM node in line 399 and fill its attribute value in line 416 with the character we have typed.

And how is this 36 FPS ( frame per second ) calculated? 36 FPS = 1 / 27.7ms * 1000, means 36 frames per second.

According to Google documentation, “Each of those frames has a budget of just over 16 ms (1 second / 60 = 16.66 ms). In reality, however, the browser has housekeeping work to do, so all of your work needs to be completed inside 10 ms. When you fail to meet this budget the frame rate drops, and the content judders on screen. This is often referred to as jank, and it negatively impacts the user’s experience.“, this is the reason why this frame with duration 27.7 ms is marked with red indicator for “Long frame”.

React application result

We can easily find that there is no Long frame for the six frames rendered in React, total rendering time is 19.5 ms ( while UI5 is 36.3 ms ) and painting time 5.4 ms ( UI5 6.9 ms ).

React has much better performance than UI5 ( 63 FPS vs 36 FPS ).

Actually there is no apparent difference between UI5 and React on Layouting; The bottleneck for UI5 lays in the T.setValue which consumes the 46.2% of total time.

In React, the code to change the native HTML node value, setTextContent in react.js:16904, only consumes 0.6ms.

The pixel pipeline

As documented by Google, “Most devices today refresh their screens 60 times a second. If there’s an animation or transition running, or the user is scrolling the pages, the browser needs to match the device’s refresh rate and put up 1 new picture, or frame, for each of those screen refreshes. Each of those frames has a budget of just over 16 ms (1 second / 60 = 16.66 ms). In reality, however, the browser has housekeeping work to do, so all of your work needs to be completed inside 10 ms. “

That is to say, for any frame, it is better to avoid the total duration of the five mentioned steps ( 1. JavaScript 2. Style calculation 3. Layout 4. Paint 5. Composite ) not exceed 10 ms.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何快速定位SAP CRM订单应用(Order Application)错误消息抛出的准确位置

    In my blog Six kinds of debugging tips Fabian Geyer raised a very good point abo...

    Jerry Wang
  • SAP UI5自学教程一:button.js的加载逻辑

    As a Fiori developer it is essential to not only learn how to use a given Fiori ...

    Jerry Wang
  • 什么是SAP UI5的Component-preload.js

    First of all, the Component-preload.js works as expected. In your design time, (...

    Jerry Wang
  • CentOS下redis集群安装

    环境: 一台CentOS虚拟机上部署六个节点,创建3个master,3个slave节点

    肖哥哥
  • Docker常用软件安装之Redis

      我们首先需要在root/myredis/conf/redis.conf目录下创建redis.conf配置文件。

    用户4919348
  • V-Rep随手笔记

    论坛是宝,要善于使用:http://www.forum.coppeliarobotics.com/

    zhangrelay
  • 通俗易懂 empowered RL

    Inspired by examples from the animal kingdom, social sciences and games the ...

    用户1908973
  • CentOS下redis集群安装

    环境: 一台CentOS虚拟机上部署六个节点,创建3个master,3个slave节点

    肖哥哥
  • kafka-0.10.0官网翻译(一)入门指南

    1.1 Introduction Kafka is a distributed streaming platform. What exactly does th...

    intsmaze-刘洋
  • HashMap探索01-源码注解翻译

    当时好奇HashMap与ConcurrentHashMap,在网上找资料时发现基本都是相关的源码分析,想自己看看JDK里面具体有些什么,于是有了这个系列,信马由...

    汐楓

扫码关注云+社区

领取腾讯云代金券