[GitHub] [incubator-echarts] pissang opened a new pull request #13314: [5.0] [Performance] Improve large line performance. Improve line smoothing.

[GitBox]

pissang opened a new pull request #13314:
URL: https://github.com/apache/incubator-echarts/pull/13314


   This pull request include two improvements to line series.
   
   1. Reduce initial render time(and memory cost) up to 10x in the line series 
with millions of time series data.
   2. Improve smooth result in some cases. 
   
   ### Details about performance improvement.
   
   ##### 1. Use TypedArray.
   
   The most important thing did to improve the performance is to use TypedArray 
instead of normal array as much as possible. It will reduce the heap memory and 
GC cost significantly.
   
   In this PR we use TypedArray to store the points of polyline and polygons. 
Also no `setItemLayout` anymore.
   
   ##### 2. Bake the transform of dataToPoint to matrix in Cartesian2D
   
   It will simplify the transform to a very fast 6x2 multiply and add 
operations. But it only works for affine transform when axis type is `time` or 
`value`. So it's mainly for boosting the time series data.
   
   ##### 3. Remove unnecessary date parsing when it's a timestamp.
   
   It can avoid creating millions of temporary `Date` object when parsing the 
time series data.
   
   ##### 5. Speed up storage access in List component.
   
   It's a trick did for modern JS engine. I found the access of `storage` is 
slow when initializing millions of data in 
https://github.com/apache/incubator-echarts/blob/99ab1d7a2f1413ce38dd55d3808c4e434fe49ba8/src/data/List.ts#L628
   I profiled it and saw `KeyedLoadIC_Megamorphic` in the profiling result, 
which means it's not a fast property access.
   
   So we simplify the case to the following code.
   ```js
   const obj = {};
   obj.x = 1;
   obj.y = 1;
   function slowObjectAccess() {
       let sum = 0;
       for (let i = 0; i < 1e6; i++) {
           for (let k = 0; k < 2; k++) {
               const val = obj[k === 0 ? 'x' : 'y'];
               sum += val;
           }
       }
       return sum;
   }
   
   function fastObjectAccess() {
       let sum = 0;
       for (let i = 0; i < 1e6; i++) {
           for (let k = 0; k < 2; k++) {
               sum += k === 0 ? obj.x : obj.y;
           }
       }
       return sum;
   }
   ```
   
   And the test result shows `fastObjectAccess`can be 10x faster than 
`slowObjectAccess`. I can't find out why and how to avoid it because of limited 
knowledge of JS engine.  So I add an extra `_storageArr` array and get from 
this array in the hotspot code like `List#_initDataFromProvider`. It works well 
and the cost of `_initDataFromProvider ` reduced to half.
   
   ### Details about smooth improvement.
   
   ### Result
   
   #### Render time comparison between 4.x and 5.0
   
   <img width="976" alt="infoflow 2020-09-20 12-01-40" 
src="https://user-images.githubusercontent.com/841551/93694107-73efed00-fb3a-11ea-97aa-6ed35c5bc6d9.png";>
   
   #### Heap memory comparison between 4.x and 5.0
   
   <img width="998" alt="infoflow 2020-09-20 12-01-02" 
src="https://user-images.githubusercontent.com/841551/93694118-8ff38e80-fb3a-11ea-9733-bfa21f074f5c.png";>
   
   #### Smooth algorithm comparision
   
   ##### Before
   
   <img width="1211" alt="infoflow 2020-09-18 22-43-12" 
src="https://user-images.githubusercontent.com/841551/93694129-bb767900-fb3a-11ea-8978-4c899f2759a9.png";>
   
   ##### After
   <img width="1198" alt="infoflow 2020-09-18 22-42-06" 
src="https://user-images.githubusercontent.com/841551/93694130-c0d3c380-fb3a-11ea-94d6-2fe54d65bff1.png";>
   
   
   
   
   ### Fixed issues
   
   https://github.com/apache/incubator-echarts/issues/12249
   https://github.com/apache/incubator-echarts/issues/10200
   https://github.com/apache/incubator-echarts/issues/4556
   
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org