HTML UI rendering performance of the UXP plug-in on Windows and Mac

[hideo]

Hello,

I’m looking for a solution to a problem I’m having with the UXP plugin.

I am currently working on upgrading my Photoshop plugin by publishing it to the marketplace.

The UI has become a bit more complex, but I have a concern about the HTML rendering of the UI.
*The UI does not use Spectram components, only native HTML tags.

Is there any difference in rendering speed between Spectram components and native HTML?

I have no problem using the plug-in, but I notice a difference in HTML update speed between Mac and Windows.

Photoshop on Windows causes a slow display, and I have no problem with it on the Mac.
I have a MacBookAir that is 10 years old now, but I feel the UI rendering is more sluggish on my one year old Windows machine.

As for switching tabs, I have created a sample [ui-kitchen-sink] as a reference.
Even in this sample, the display on Windows seems to have a little bit of a drawing faltering when switching tabs.

GitHub - AdobeDocs/uxp-photoshop-plugin-samples: UXP Plugin samples for...

I am attaching a video for reference.

※The video is slowed down a bit for clarity.

If you have any suggestions, please let me know.

Thank you in advance.

[photonic]

I don’t have a detailed explanation but I found this as well with old CEP panels, everything works faster on Mac, I don’t know if it is because Photoshop in the beginning was made for Mac computers, probably, but who knows. I have Mac and Windows users and Mac users always have a better performance with my plugins and CEP panels.

[hideo]

@photonic

Hello.

Thank you for your comment.

I’m sure the internal program specifications are affecting the performance, but it’s a bit sad to hear that the drawing performance is worse than on a 10 year old Mac…

Fortunately, it is not fatally slow, so I hope it will improve.

[photonic]

Is your plugin creating each HTML element each time you choose a new label (Rename, aset, import)?

I mean if when you click on each label you run a code?

Seems somehow it is drawing your UI each time you click on those buttons.

If you draw your entire plugin once at the beginning it should not load like this with that kind of processors.

[hideo]

@photonic

Seems somehow it is drawing your UI each time you click on those buttons.

Thanks for the reply.

I see!

I had appropriated Adobe’s sample code for the tabs part and did not check the internal processing carefully.

It sure looks like you are redrawing the inside of the tabs each time.

I will check once to see how it is processed.

Thanks for your advice, it is much appreciated.

[hideo]

As I mentioned at the time of posting I used the following sample code for switching tabs.
[ui-kitchen-sink]

Array.from(document.querySelectorAll(".sp-tab")).forEach(theTab => {
  theTab.onclick = () => {
    localStorage.setItem("currentTab", theTab.getAttribute("id"));
    Array.from(document.querySelectorAll(".sp-tab")).forEach(aTab => {
      if (aTab.getAttribute("id") === theTab.getAttribute("id")) {
        aTab.classList.add("selected");
      } else {
        aTab.classList.remove("selected");
      }
    });
    Array.from(document.querySelectorAll(".sp-tab-page")).forEach(tabPage => {
      if (tabPage.getAttribute("id").startsWith(theTab.getAttribute("id"))) {
        tabPage.classList.add("visible");
      } else {
        tabPage.classList.remove("visible");
      }
    });
  }
});

However, from this code, it doesn’t look like it is redrawing the inside of the tab every time.
It seems to me that all the HTML DOM is also being executed first.

[hideo]

I changed the code of the above switching section to the following simple one as a trial,
but the result was the same.

const event_tab = document.querySelectorAll('.event_tab');
event_tab.forEach(function(evt) {
  evt.addEventListener('click',function() {//change event
    switch(evt.id) {
      case 'rename-tab':
        document.getElementById('rename-tab-page').style.display = "flex";
        document.getElementById('aset-tab-page').style.display = "none";
        document.getElementById('import-tab-page').style.display = "none";
        document.getElementById('help-tab-page').style.display = "none";
        break;
      case 'aset-tab':
        document.getElementById('rename-tab-page').style.display = "none";
        document.getElementById('aset-tab-page').style.display = "flex";
        document.getElementById('import-tab-page').style.display = "none";
        document.getElementById('help-tab-page').style.display = "none";
        break;
      case 'import-tab':
        document.getElementById('rename-tab-page').style.display = "none";
        document.getElementById('aset-tab-page').style.display = "none";
        document.getElementById('import-tab-page').style.display = "flex";
        document.getElementById('help-tab-page').style.display = "none";
        break;
      case 'help-tab':
        document.getElementById('rename-tab-page').style.display = "none";
        document.getElementById('aset-tab-page').style.display = "none";
        document.getElementById('import-tab-page').style.display = "none";
        document.getElementById('help-tab-page').style.display = "flex";
        break;
    }
  });
});

[photonic]

Seems your code is well written, I don’t understand why it draws it with a lag like the one in your video

[hideo]

Thank you for your comment.

I wish I could ask Adobe about this since it is an internal Photoshop specification, but I will take a look at it for now. I will check with support once if possible.

Thank you for your valuable input.

[Maher]

from the official communication I understand that the UI engine is a work in progress and is pretty much incomplete.

I’m not saying that it is guaranteed to improve but it is likely that once it’s finalised it’ll be ironed out, improved and optimised.

one guaranteed thing from the docs is that Adobe is planning on streamlining elements and supporting spectrum element only. I guess that should improve performance on the long run.

[hideo]

@Maher

Thank you for your comment.

I think the situation still has room for improvement and I hope it will work more comfortably.

I hope that UXP will be able to be used quickly outside of Photoshop as well.