Use JS to delay loading Baidu shared code and improve web page speed

Use JS to delay loading Baidu shared code and improve web page speed_javascript skills

WBOY

Release： 2016-05-16 17:30:45

Original

1489 people have browsed it

I found that when many websites place Baidu sharing code, they simply place the sharing code at a fixed web page location and that's it. This is a very fatal method. Because, when I often open a web page, I find that when the web page loads the sharing code, it sometimes takes a few seconds to request Baidu's server and finally display the sharing button.

Actually, functions like this are not very important for web pages. We can use JS to delay loading, thereby improving the fast loading and display of the main content of the web page.
Here I will share my placement method.
1. Copy the code shared by Baidu, as follows:

Copy the code The code is as follows:

< ;a class="bds_renren">

2. Place the code
Carefully analyze the shared code above , we can find that there are three js script tags, which may affect the rendering speed of the web page. Finally, we found that in fact, only the last <script> tag is used to request the Baidu server to display shared images and links. Then, we can load this JS last. <br><strong>The following is a demo I made: <br></strong><div class="codetitle"> <span><a style="CURSOR: pointer" data="25629" class="copybut" id="copybut25629" onclick="doCopy('code25629')"><u>Copy the code</u></a></span> The code is as follows:</div> <div class="codebody" id="code25629"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html> <br>    <head> <br>        <title>JS延迟加载百度分享代码，提高网页速度</title> <br>        <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <br>        <style type="text/css"> <br>            body{margin:0px;padding:0px;font-size:12px;} <br>            #copyright{clear:both;} <br>        </style> <br>    </head> <br><br>    <body> <br>        <div id="baidu-share"> <br>            <br>            <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare"> <br>            <a class="bds_tsina"></a> <br>            <a class="bds_qzone"></a> <br>            <a class="bds_tqq"></a> <br>            <a class="bds_renren"></a> <br>            <a class="bds_douban"></a> <br>            <span class="bds_more"></span> <br>            <a class="shareCount"></a> <br>            </div> <br>            <script type="text/javascript" id="bdshare_js" data="type=tools&uid=0" ></script>