One 、js Blocking characteristics

JS There's a very wordless blocking feature , It's when the browser is executing JS Code , You can't do anything else at the same time , Whether the code is embedded or external .  namely <script> Every time it appears, it makes the page wait for the script to parse and execute ( Regardless of JS Is it embedded or out of the chain ),JS After the code is executed , To continue rendering the page .

Two 、 Optimization plan

1、 Although the script download process does not affect each other , But the page still has to wait for all JS Download and execute to continue . So put as much as possible <script> Label placed at bottom of page , Next to close tag </body> On top of . This method ensures that the page is parsed before the script runs .

Be careful :CSS The file itself is downloaded in parallel , Does not block other processes on the page . however , If you put an embedded script in the reference chain CSS Of <link> After that, it will cause the page to block and wait CSS The download . This is to ensure that the embedded script gets the correct style information when it is executed . therefore , It's best not to put embedded scripts in CSS Of <link> after .

2、 Reduce the number of external links , Reduce requests . You can package scripts in groups , Now the build tools have done a good job . Page <script> The fewer Tags , The faster the page loads , More responsive . This is true for both external script files and inline code .

3、 There are several ways to download using non blocking Javascript:

1 ) . by <script> add defer attribute ( only IE and Firefox3.5 above )
2). Dynamically create <script> Elements , Use it to download and execute code

3) .  Load after the page is loaded JS, That is to say window Object's load After the event is triggered, download the script .

4) . Use as common.js etc. js Module management tools to dynamically load js, For example, loading a js modular .
5). use XHR Object download code , And inject into the page

web Performance optimization ---JavaScript More related articles about the non blocking loading performance optimization scheme in

  1. True non blocking loading javascript Script technology , We'll find a lot of unexpected secrets

    The picture below is what I use firefox and chrome Recorded when browsing Baidu Homepage http request Here is firefox: Here is chrome: Before browsing Baidu home page, I clean up all the cache of the browser , Make this scene closest to the first visit ...

  2. Non blocking loading and defer、async

    Non blocking loading hold js Put it in head in , How does the browser execute it , Whether to load in sequence or in parallel ? In the old browser , All are loaded in order of priority , This guarantees the loading of js Dependency doesn't matter . But a few new browsers are starting to allow ...

  3. Non blocking loading js, Preventive cause js Loading does not affect the page display

    The browser loads static resources and js It's all linear loading , So in general, you can js Put it in </body> front , prevent UI Thread blocking . And sometimes we both want to js Load it in the head of the whole page , And worried js Blocking causes the site to load slowly ...

  4. js Sync 、 asynchronous 、 Time delay 、 Non blocking loading

    One . Synchronous loading Usually, synchronous loading is used by default . Such as :<script src="http://yourdomain.com/script.js"></script> ...

  5. High performance js -- No blocking loading script

    Reference resources : << High performance JavaScript>> Nicbolas C. Zakas Writing javascript The download and execution of the code will block other processes in the browser , For example, page drawing , encounter &l ...

  6. jQuery Pjax – Page no refresh load , Optimize the user experience

    pjax yes HTML5 pushState as well as Ajax Short for two technologies , Combining these two technologies, you can download without refreshing the page HTML Go to the current page , Bring you super fast browser experience , And there are fixed links . Title and after ...

  7. High performance Javascript-- Non blocking loading strategy for scripts

    Javascript Performance in browser , It can be said that the most important usability problem for front-end developers . stay Yahoo Of Yslow23 Among the rules , One of them is to JS Placed on the bottom  . as a result of , in fact , Most browsers use single process processing U ...

  8. 【 turn 】 High performance Javascript-- Non blocking loading strategy for scripts

    The original is translated from :http://blog.jobbole.com/78191/ Javascript Performance in browser , It can be said that the most important usability problem for front-end developers . stay Yahoo Of Yslow23 Among the rules , ...

  9. JavaScript The specific way of non blocking loading

    Put the script at the bottom .\ Or put it in head in , To ensure that in js Before loading , Can load the normal display page .\<script> The label on the \ front Group scripts : Because each \<script> Tag download blocked page parsing ...

Random recommendation

  1. linux Some tips for system maintenance , Including the system mount new disk method ! Can collect !

    Here are some common tips , Not much , But it will keep updating .... 1. Need to put history Create a hard link ln The whole disk needs to be backed up with hard links ln /etc/xxx /home/xxx 2.root Users can't remotely /et ...

  2. HDU 4671 Partition( Theorem problem )

    Topic link This question , Obviously the search ability ... The formula is found in the Chinese version of Wikipedia . #include <cstdio> #include <cstring> #include <st ...

  3. Welcome to join iOS Develop a group of beginners :180080550

    I am now studying by myself iOS Development , Hope to have like-minded brothers and sisters can exchange and study together , Welcome to join iOS Develop a group of beginners :180080550, Looking forward to progress with you , Take off together !

  4. php and .net Encryption and decryption of

    PHP edition : $key = 335ff'; /* * Encryption method * @param string $input, String to be encrypted * @param string $key, Encrypted password ( Only for 8 Bit length ) * @ ...

  5. poj 3176 Cow Bowling(dp Basics )

    Description The cows don't use actual bowling balls when they go bowling. They each take a number (i ...

  6. Fair use size_t It can improve the portability of the program and the readability of the code , Make your program more efficient .

    Recently, I have studied STL Source code , I found that there were a lot of ptrdiff_t Data of type , This is related to size_t Has a similar effect . Here is an article about size_t And so on , It's very clear . I want to record it . http://blog.cs ...

  7. Garbage

    Garbage collection http://journal.stuffwithstuff.com/2013/12/08/babys-first-garbage-collector/ http://blog.jobbole ...

  8. python Multithreading , Understanding of process

    python Of threading.Thread Class has one. run Method , Function used to define thread , You can override this method in your own thread class . And after you create your own thread instance , adopt Thread Class start Method , The thread can be started , hand over ...

  9. 【ASP.NET MVC Learning notes 】- 02 Attribute

    In this paper, the reference :http://www.cnblogs.com/willick/p/3208427.html 1. characteristic (Attribute) Labeling elements in a program , Such as class . Field . Method . Properties, etc . 2. stay .NET ...

  10. [java Basics ] java Move left and right

    Today I found a better online compiler , Hope to share with you . except java also c++...., The address is http://www.tutorialspoint.com/compile_java_online.php another ...