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:
parent
cb8c12c5c6
commit
863b3207c1
1 changed files with 3 additions and 3 deletions
|
@ -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.
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue