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

Limit does not work if value is >= 4 *and* throttle property is set #235

Open
mherchel opened this issue May 22, 2021 · 2 comments
Open
Labels
bug Something isn't working

Comments

@mherchel
Copy link

This was really hard to track down and is kinda weird, so bear with me.

If the following is true, the limit option is not respected

  • the limit option is greater or equal to 4
  • the throttle option is set

I posted a quick 1 minute video of this at https://youtu.be/hb5hBDZqTdY

To Reproduce
Create the following HTML file, and then watch the network tab as all of the links are prefetched.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Prefetch: Basic Usage</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
</head>

<body>

  <a href="link1">Lorem, ipsum.</a>
  <a href="link2">Eligendi, mollitia.</a>
  <a href="link3">Tempore, optio.</a>
  <a href="link4">Perspiciatis, modi!</a>
  <a href="link5">Voluptates, quas!</a>
  <a href="link6">Quibusdam, laborum.</a>
  <a href="link7">Veritatis, aspernatur?</a>
  <a href="link8">Obcaecati, totam!</a>
  <a href="link9">Repellat, ex.</a>
  <a href="link10">Laboriosam, explicabo.</a>
  <a href="link11">Saepe, harum.</a>
  <a href="link12">Aperiam, ad.</a>
  <a href="link13">Ut, quae!</a>
  <a href="link14">Et, sint.</a>
  <a href="link15">Facere, alias!</a>
  <a href="link16">Exercitationem, voluptatem.</a>
  <a href="link17">Sed, odio?</a>
  <a href="link18">Dicta, eum.</a>
  <a href="link19">Commodi, veniam.</a>
  <a href="link20">Quod, similique!</a>

  <script src="https://unpkg.com/quicklink@2.1.0/dist/quicklink.umd.js"></script>
  <script>
    // Limit does not work if it is >=4 *and* throttle property is set.
    quicklink.listen({
      limit: 4,
      throttle: 3
    });
  </script>
</body>

</html>

Expected behavior
I expect only 4 links to be prefetched

Version:

  • OS w/ version: MacOS 11.2.1 Big Sur
  • Browser w/ version: Version 90.0.4430.212 (Official Build) (x86_64)

Additional context, screenshots, screencasts

What's weird is that if the throttle option is not set, it works properly. Also, if the limit option is set to 3 or below, it will work properly even with the throttle option set.

Video showing the problem in action: https://youtu.be/hb5hBDZqTdY

@demianrenzulli
Copy link
Contributor

Hi @mherchel!

Apologies for the delayed response. The video is very clear, thanks for taking the time of doing this.
We have a bug triage session coming soon, where we'll analyze this issue among others, to see if it makes sense to include a fix in the next version of Quicklink.

We are currently exploring the idea of coming up with a good default for the behavior of the library, since, without any limits, it can be very aggressive in platforms like desktop.

I'm curious to understand why you have picked the combination of "4" for the limit and "3" for throttle. Is that the configuration you typically use?

Thanks again for reporting this bug!

@demianrenzulli demianrenzulli added the bug Something isn't working label May 31, 2021
@mherchel
Copy link
Author

No need for apologies :)

I'm curious to understand why you have picked the combination of "4" for the limit and "3" for throttle. Is that the configuration you typically use?

Nope. I was just testing out the options during an integration. I really don't see me using that combo FWIW.

Thanks,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants