Update article.md

"big text" -> "large amount of text"
"evade problems" -> "avoid problems"
"another 100 lines" -> "for the next 100 lines"
"To demonstrate the approach" -> "To demonstrate this approach"
"instead of syntax-highlighting" -> "instead of text-highlighting,"
This commit is contained in:
Peter Roche 2020-02-13 20:31:29 -07:00 committed by GitHub
parent cb8c12c5c6
commit 863b3207c1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -50,13 +50,13 @@ That was a theory. Now let's see how we can apply that knowledge.
Let's say we have a CPU-hungry task.
For example, syntax-highlighting (used to colorize code examples on this page) is quite CPU-heavy. To highlight the code, it performs the analysis, creates many colored elements, adds them to the document -- for a big text that takes a lot of time.
For example, syntax-highlighting (used to colorize code examples on this page) is quite CPU-heavy. To highlight the code, it performs the analysis, creates many colored elements, adds them to the document -- for a large amount of text that takes a lot of time.
While the engine is busy with syntax highlighting, it can't do other DOM-related stuff, process user events, etc. It may even cause the browser to "hiccup" or even "hang" for a bit, which is unacceptable.
We can evade problems by splitting the big task into pieces. Highlight first 100 lines, then schedule `setTimeout` (with zero-delay) another 100 lines, and so on.
We can avoid problems by splitting the big task into pieces. Highlight first 100 lines, then schedule `setTimeout` (with zero-delay) for the next 100 lines, and so on.
To demonstrate the approach, for the sake of simplicity, instead of syntax-highlighting let's take a function that counts from `1` to `1000000000`.
To demonstrate this approach, for the sake of simplicity, instead of text-highlighting, let's take a function that counts from `1` to `1000000000`.
If you run the code below, the engine will "hang" for some time. For server-side JS that's clearly noticeable, and if you are running it in-browser, then try to click other buttons on the page -- you'll see that no other events get handled until the counting finishes.