perf: causes the browser to become unresponsive on pages containing a large number of kanji

[aiktb]

Describe the bug

Vicious bugs extremely seriously affect the user experience and must be fixed.

Reproduction

Example Site

Expected behavior

The browser will not become unresponsive.

Browser

Chrome

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (12) x64 AMD Ryzen 5 5600U with Radeon Graphics
    Memory: 2.61 GB / 13.86 GB
  Binaries:
    Node: 20.6.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.2.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.12.1 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.121)
    Internet Explorer: 11.0.22621.1

Validations

• Check if you're on the latest Furigana Maker version.
• Follow our Code of Conduct
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.
• Read the Contributing Guidelines.
• I would like to fix this BUG via a PR.

[aiktb]

The reason has not yet been determined...
Once this bug is triggered, the developer tools will also be stuck, making it impossible to effectively locate the cause of the bug. It has been determined that it is not caused by frequent calls to the service worker.

However, this issue has been alleviated through the "On-off Auto Mode" option introduced in v1.2.0. When this option is off, Furigana Maker will not automatically add furigana to the web page, that is, it will ignore all selector rules.

A temporary solution is to turn off automatic mode for such large pages, for example switching ja.wikipedia.org to inactive on the Edit Rules page.

[aiktb]

Maybe it can automatically detect when the page is larger than a certain value (such as 500KB) and turn off Auto Mode?
This is a good way to mitigate this error and is not difficult to implement, so consider it.

[aiktb]

This bug is caused by reflow.

[aiktb]

Closed by e1cd662
Not sure if this calculation method and size 500 is correct.

  const encoder = new TextEncoder();
  const utf8Bytes = encoder.encode(document.documentElement.outerHTML);
  const htmlSize = utf8Bytes.length / 1024; // KB
  if (htmlSize > 500) {
    ...
    return
  }

[aiktb]

There is a problem with the current script execution time. The DOM is not loaded completely, which will cause the calculated value of htmlSize to be too small.

Um... this issue is likely to be unresolved, and this solution is easily bypassed because it is not sure what value htmlSize should be set to. 500 has been confirmed to still trigger this bug on this page.

Well, set the selcetor rule corresponding to ja.wikipedia.org to inactive by default.

It is uncommon for websites like Wikipedia to have over 500KB of UTF-8 encoded plain text, and these means should be sufficient.

[aiktb]

The load event is used to increase the calculation accuracy of htmlSize.
Closed by 6fefe92.