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

1、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 dont contain detail performance data. Since I have been using SAP UI5 framework

2、in my daily work, I am curious about the performance comparison between SAPUI5 and React regarding the topic of page rendering.Comparison environment setupI 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 h

3、ave typed will be written in all of the TextField as well.The UI5 implementationI 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 mons.TextField(input1); oInput1.setValue(Hello!); oInput1.attachL

4、iveChange(function(event) / console.log(Text changed to :+ oInput1.getValue(); for( var i = 0; i that._NUMBER; i+) that._textAreasi.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 mons.TextArea(text + i); this.oLayout.addContent(oInput); this._textAreas.push(oInput); return this.oLayout;);The React implementationFor those who are not familiar with React, let me briefly intr

5、oduce this source code:When I studied React for the first time, I was confused by the “syntax error” for example in line 28 and 3236. 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, plea

6、se 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 shouldnt this be the same logic as SAPUI5 data binding?When there is live-change event occu

7、rred, 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 performanceI will use the tab “TimeLine” to measure performance. There is already a good article intro

8、ducing how to use this tab by Google.UI5 application resultI 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 Pain

9、ting 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 it

《SAP UI5和React的页面渲染性能比较.docx》由会员A***分享，可在线阅读，更多相关《SAP UI5和React的页面渲染性能比较.docx》请在金锄头文库上搜索。