Use JS delay load Baidu Share code, improve Web page speed

Source: Internet
Author: User
Tags script tag

Found that a lot of sites in the place Baidu share code, simply put the share code to the fixed page location on the finished, this is a very lethal way. Because, I often open a Web page, found in the Web page load to share code, sometimes spend a few seconds to request the Baidu server, the last Show Sharing button.

In fact, like this on the Web page is not very important function, we can use JS to delay loading, so as to improve the main content of the page quickly load display.
Here to share the way I put it.
A, copy Baidu share code, as follows:

Copy Code code as follows:


<!--Baidu Button BEGIN-->


<div id= "Bdshare" class= "bdshare_t bds_tools_32 get-codes-bdshare" >


<a class= "Bds_tsina" ></a>


<a class= "Bds_qzone" ></a>


<a class= "BDS_TQQ" ></a>


<a class= "Bds_renren" ></a>


<a class= "Bds_douban" ></a>


<span class= "Bds_more" ></span>


<a class= "Sharecount" ></a>


</div>


<script type= "Text/javascript" id= "Bdshare_js" Data= "type=tools&uid=0" ></script>


<script type= "Text/javascript" id= "Bdshell_js" ></script>


<script type= "Text/javascript" >


document.getElementById ("Bdshell_js"). src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil (new Date ()/3600000)


</script>


<!--Baidu Button end-->


Second, place the code
careful analysis of the above sharing code, we can find that there are 3 JS script tags, these are likely to affect the speed of the Web page rendering, and finally found that, in fact, only the last <script> tag role is to request Baidu Server, display share pictures and links. So, this JS we can put to the last load.
Here is a demo I made:

Copy Code code as follows:


&lt;! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "&gt;


&lt;html&gt;


&lt;head&gt;


&lt;title&gt;js Delay load Baidu Share code, improve page speed &lt;/title&gt;


&lt;meta http-equiv= "Content-type" content= text/html;charset=gb2312 "/&gt;"


&lt;style type= "Text/css" &gt;


body{margin:0px;padding:0px;font-size:12px;}


#copyright {clear:both;}


&lt;/style&gt;


&lt;/head&gt;





&lt;body&gt;


&lt;div id= "Baidu-share" &gt;


&lt;!--Baidu Button BEGIN--&gt;


&lt;div id= "Bdshare" class= "bdshare_t bds_tools_32 get-codes-bdshare" &gt;


&lt;a class= "Bds_tsina" &gt;&lt;/a&gt;


&lt;a class= "Bds_qzone" &gt;&lt;/a&gt;


&lt;a class= "BDS_TQQ" &gt;&lt;/a&gt;


&lt;a class= "Bds_renren" &gt;&lt;/a&gt;


&lt;a class= "Bds_douban" &gt;&lt;/a&gt;


&lt;span class= "Bds_more" &gt;&lt;/span&gt;


&lt;a class= "Sharecount" &gt;&lt;/a&gt;


&lt;/div&gt;


&lt;script type= "Text/javascript" id= "Bdshare_js" Data= "type=tools&amp;uid=0" &gt;&lt;/script&gt;


&lt;script type= "Text/javascript" id= "Bdshell_js" &gt;&lt;/script&gt;


&lt;!--Baidu Button end--&gt;


&lt;/div&gt;


&lt;div id= "Copyright" &gt;


&lt;a href= "Http://codejia.net" &gt; Programming book PDF Download "codejia.net" &lt;/a&gt;


&lt;/div&gt;





&lt;script type= "Text/javascript" &gt;


window.onload = Sharecode;





function Sharecode () {


document.getElementById ("Bdshell_js"). src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil (new Date ()/3600000);


}


&lt;/script&gt;


&lt;/body&gt;


&lt;/html&gt;


Analysis: by using the demo above, I can find that I simply put the last script tag with SRC attribute to the last dynamic load, and is loaded after the window.onload. Previously loaded with pure HTML tag code, and will not have much impact on the speed of the Web page.
Baidu Share code through this adjustment even if Baidu's server hangs, will not affect their own web page normal display.

In fact, there are plenty of places to use this technique. Want to site statistics code, Baidu Google search code, third-party advertising code, etc., we can put to the bottom of the page to load the final, so even if the third party server downtime, our own machine will not be affected much.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.