Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The selector API has performance issues in miniapps #173

Open
ickg5 opened this issue Oct 25, 2021 · 5 comments
Open

The selector API has performance issues in miniapps #173

ickg5 opened this issue Oct 25, 2021 · 5 comments

Comments

@ickg5
Copy link

ickg5 commented Oct 25, 2021

Although the selector API is provided by miniapps, the performance of the selector API of miniapps is not good.

Getting a rect of an element in a browser takes 0ms each time, but getting a rect of an element in a miniapp takes 30ms+ each time.

This is very bad for developers developing component libraries.

I hope miniapps will pay attention to this problem,

@xfq
Copy link
Member

xfq commented Feb 18, 2022

Thanks for the report. Could you give some specific code examples and performance data? Also, if it's purely a performance issue of a miniapp implementation (rather than an API design issue), it may not be within the scope of this group's work.

@ickg5
Copy link
Author

ickg5 commented Feb 24, 2022

I don't know how to reply.

@ickg5
Copy link
Author

ickg5 commented Feb 24, 2022

@ickg5
Copy link
Author

ickg5 commented Feb 24, 2022

It takes no more than 3ms to get a rect in any browser

<script>
    function stopWatch() {
        return new Promise(resolve => {
            const start = Date.now();
            document.querySelector(".container").getBoundingClientRect()
            const end = Date.now();
            resolve(end - start)
        })
    }

    function queryCounts() {
        return Promise.all(Array.from(Array(100)).map(stopWatch))
    }

    queryCounts().then(console.log)
</script>

But not less than 30ms in any mini program

function stopWatch() {
  return new Promise(resolve => {
    const start = Date.now();
    wx.createSelectorQuery()
      .select(".container")
      .boundingClientRect()
      .exec(() => {
        const end = Date.now();
        resolve(end - start)
      })
  })
}

function queryCounts() {
  return Promise.all( Array.from(Array(100)).map(stopWatch))
}

Page({
  onLoad() {
    queryCounts().then(console.log)
  },
})

@ickg5
Copy link
Author

ickg5 commented Feb 24, 2022

Browser time:

[0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

Miniapp time:

[123,132,130,129,129,128,128,127,126,126,126,124,124,125,124,124,124,123,122,122,122,121,121,121,120,120,120,119,119,119,118,118,115,114,113,112,112,111,111,111,111,111,110,110,110,110,110,109,109,109,109,108,108,103,101,101,100,100,101,101,100,100,100,100,99,99,99,98,98,98,98,98,97,97,97,97,97,96,96,96,96,95,95,95,95,95,94,94,94,94,94,93,93,93,91,90,90,90,90,90]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants