Speed ​​up loading of pages with JavaScript

(1 ratings Rating: 5 out of 5)
Загрузка ... Loading ...

Javascript is a challenge for modern resources. They simply overwhelmed them and this leads to slow loading and therefore, poor display.

Ускоряем загрузку страниц с JavaScript

If the connection with the network is slow, which is typical for mobile and remote users, load slows down, causing justifiable irritation.

When a browser reads the html-code, it displays the result in series. That is, each line goes to each other, but in a place where javascript is set, the stop - this problem had certainly come across those who use this language for writing resources.

Problem Solving - asynchronous loading. Just put the javascript at the end of html-code of the page. This leads to the fact that none of "Java" is distant time, ensuring correct and rapid mapping page stratum user resource. The asynchronous loading of moving most of the important resources, striving to keep the audience and introduce a useful innovation.

We examine several ways to optimize the load javascript.

Synchronous loading script

This zagruka javascript-file is as follows:

  "http://www.адрес_сайта/script.js" type = "text/javascript" ></ script > <Script src = "http://www.adres_sayta/script.js" type = "text / javascript"> </ script> 

Asynchronous loading of javascript on HTML5

HTML5 prudently attended to the problem loading page "Java." It is possible to install an asynchronous download script, which increases the speed of displaying the resource at times. To do this html-code to add parameters async or defer, as indicated below:

  "http://www.адрес_сайта/script.js" type = "text/javascript" ></ script > <Script async src = "http://www.adres_sayta/script.js" type = "text / javascript"> </ script> 
  "http://www.адрес_сайта/script.js" type = "text/javascript" ></ script > <Script defer src = "http://www.adres_sayta/script.js" type = "text / javascript"> </ script> 

What is the difference between the attributes of async and defer?

Both options work with asynchronous loading of javascript. The difference is in the display time and the beginning of the script.

Async attribute will run it immediately after a full load, but will miss the download window.

When installed in a code page attribute defer - javascript will fall in place between other scripts without breaking their order of execution. He will begin work only after the page is fully loaded, but will miss the event DOMContentLoaded (to document).

However, these attributes do not work in today's browsers. For example, InternetExplorer does not support async attribute and defer. A string document.write no help files script.js

Special script from Google for asynchronous loading of javascript

Google has become a leader in the development of technologies that enable websites to load pages in record time low. In addition, the rating of the Google search engine lowers the sites with low productivity, so pay special attention to the creak of webmasters Google, designed for asynchronous loading of javascript.

To use this script, simply replace
<script src="…">
on
<script extsrc="…">

Then, plug the script file extsrc.js

We get the following code:

  "http://extsrcjs.googlecode.com/svn/trunk/extsrc.js" ></ script > <Script src = "http://extsrcjs.googlecode.com/svn/trunk/extsrc.js"> </ script>
 "...." ></ script > <Script extsrc = "...."> </ script> 

Unfortunately, this method is also not suitable for files with document.write

Optimal asynchronous loading of javascript

This method is suitable for all browsers, without exception, and even works with document.write

In the html-code of the page create an empty div-block:

  "script_block" class = "script_block" >< / div > <Div id = "script_block" class = "script_block"> </ div> 

And at the end of the html-code before </ body>, insert script for asynchronous loading:

  "script_ad" class = "script_ad" style = "display:none;" > <Div id = "script_ad" class = "script_ad" style = "display: none;">
 Here, any file or script you want to load. </ Div>

 "text/javascript" > <Script type = "text / javascript">
    / / Move it to the real position of the display
    document.getElementById ('script_block'). appendChild (document.getElementById ('script_ad'));
    / / Show
    document.getElementById ('script_ad'). style.display = 'block';
 </ Script> 

Note that in versions of IE below the second, inclusive, this download does not work. But I'm not sure that such users remain - they are a minority. Other browsers and services use this optimization for javascript, which is reflected in the best way the download speed of resources.

Hosting and VPS that will never slow down

I recommend the fastest VPS on German servers for a reasonable price - FastVPS

Last modified: 10/08/2013 at 08:12
Published: Sunday, July 31, 2011 at 23:59
Choose the language:

Comments: 2

Average bar: 4.96 out of 5
  1. Alexander
    August 3, 2013 at 07:41

    Here, any file or script you want to load.

    One set to work.
    How else can one put it?

    Reply

    Ai Pi Mani

    Try this design.

    Create a container to display the content in the right place:

      "script_block1" class = "script_block1" >< / div > <Div id = "script_block1" class = "script_block1"> </ div> 

    and second

      "script_block2" class = "script_block2" >< / div > <Div id = "script_block2" class = "script_block2"> </ div> 

    And then the script for asynchronous loading of two containers:

      "script_ad1" class = "script_ad1" style = "display:none;" > Контент для 1-го контейнера. < / div > <Div id = "script_ad1" class = "script_ad1" style = "display: none;"> Content for 1st container. </ Div>
    
     "script_ad2" class = "script_ad2" style = "display:none;" > Контент для 2-го контейнера. < / div > <Div id = "script_ad2" class = "script_ad2" style = "display: none;"> Content for 2nd container. </ Div>
    
     "text/javascript" > <Script type = "text / javascript">
     document.getElementById ('script_block1'). appendChild (document.getElementById ('script_ad1'));
     document.getElementById ('script_ad1'). style.display = 'block';
     document.getElementById ('script_block2'). appendChild (document.getElementById ('script_ad2'));
     document.getElementById ('script_ad2'). style.display = 'block';
     div > </ Script> </ div> 

    Reply

Have something to say? Do not be silent!


Your comment will appear after being moderated.
Spam and off-topic posts are deleted.

To insert php-code, use the tag:
<pre lang="php"> php-code </ pre>


I'm not a spammer!