Encounters problems updating data using the restyle() function of plotly.js

Question

var trace1 = {
  type: 'surface',
  z: [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ],
  colorscale: 'Viridis'
};

var trace2 = {
  type: 'scatter',
  mode: 'markers',
  x: [1, 2, 3],
  y: [10, 11, 12],
  name: 'Trace 2'
};

var data = [trace1, trace2];

var layout = {
  title: 'Updating Scatter Traces Only'
};

Plotly.newPlot('myDiv', data, layout);

//just update the scatter trace using Plotly.restyle
var updateData = {
  x: [[4, 5, 6]],
  y: [[20, 21, 22]]
};

Plotly.restyle('myDiv', updateData, [1]); 

In this case, the data of trace1 is a 500X500 matrix, which is rendered as a surface object. Trace2 is curve data, with about 50 points, rendered as a scatter3d object.

I want to update only trace2 through the Plotly.restyle() function, but the execution efficiency is very low and takes about 700ms. Does this mean that trace1 is also updated at the same time?

How do I need to solve this problem?

Thank you in advance.