Menu
I am wondering if it is possible to load javascript in a way in which it does not block the user experience. I am not sure how to achieve the same, but I am looking for a cross-browser solution. I am wondering if someone can guide me in the right direction. Placing the js at the bottom of the page does not work too well.
Thank you for your time.
586
Blocking methods execute synchronously and non-blocking methods execute asynchronously. Using the File System module as an example, this is a synchronous file read: const fs = require('fs'); const data = fs. readFileSync('/file.md'); // blocks here until file is read.
There is no way to do this. Javascript is not multi-threaded and can only queue tasks. You can execute long running tasks at a later time, but not at the same time as other tasks.
Blocking refers to operations that block further execution until that operation finishes while non-blocking refers to code that doesn't block execution. Or as Node. js docs puts it, blocking is when the execution of additional JavaScript in the Node. js process must wait until a non-JavaScript operation completes.
Blocking vs non-blockingBlocking call waits for the I/O operation to complete before returning. Its results are returned synchronously. Nothing else in that process takes place during the waiting. In contrast, non-blocking call returns immediately without results and uses alternate means to check for completion.
Javascript runs in a single-thread, so if you have massive Javascript calls, let say with librairies like ExtJS, it's normal that it can be slow. You might however consider the following alternatives:
First and foremost, try to optimize the code as much as you can.
Then, you could use timers in Javascript to simulate asynchronous work. Here is a good example on how to do this : http://ejohn.org/blog/how-javascript-timers-work/
If you want more information, here are some additional tips on how to attempt to reduce Javascript freezing time.
http://debuggable.com/posts/run-intense-js-without-freezing-the-browser:480f4dd6-f864-4f72-ae16-41cccbdd56cb
Good luck !
169
Quoting this answer:
Javascript resource requests are indeed blocking, but there are ways around this (to wit: DOM injected script tags in the head, and AJAX requests) which without seeing the page myself is likely to be what's happening here.
Including multiple copies of the same JS resource is extremely bad but not necessarily fatal, and is typical of larger sites which might have been accreted from the work of separate teams, or just plain old bad coding, planning, or maintenance.
As far as yahoo's recommendation to place scripts at the bottom of the body, this improves percieved response times, and can improve actual loading times to a degree (because all the previous resources are allowed to async first), but it will never be as effective as non-blocking requests (though they come with a high barrier of technical capability).
You can take a look at a YUI blog entry about Non-Blocking Javascript.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
