快捷導(dǎo)航

利用JS延遲加載百度分享代碼,提高網(wǎng)頁(yè)速度

更新時(shí)間：2013年07月01日 12:33:22 作者：

相信大家經(jīng)常在一些網(wǎng)站上看到有快捷分享到各大流行網(wǎng)站的按鈕，目前流行的有JiaThis、百度分享、Bshare等，目前用百度分享的居多

發(fā)現(xiàn)很多網(wǎng)站在放置百度分享代碼的時(shí)候，簡(jiǎn)單的將分享代碼放置到固定的網(wǎng)頁(yè)位置就完事了，這是非常致命的方式。因?yàn)?，我?jīng)常打開(kāi)一個(gè)網(wǎng)頁(yè)的時(shí)候，發(fā)現(xiàn)在網(wǎng)頁(yè)加載到分享代碼的時(shí)候，有時(shí)候花上幾秒的時(shí)候來(lái)請(qǐng)求百度的服務(wù)器，最后展示分享按鈕。

其實(shí)，像這樣對(duì)網(wǎng)頁(yè)來(lái)說(shuō)不是非常重要的功能，我們大可以用JS來(lái)延遲加載，從而提高網(wǎng)頁(yè)主要內(nèi)容的快速加載顯示。
這里分享下我的放置方式。
一、copy百度分享代碼，如下：

復(fù)制代碼代碼如下:

<!-- 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 -->

二、放置代碼
認(rèn)真分析上面的分享代碼，我們可以發(fā)現(xiàn)，其中有3個(gè)js腳本標(biāo)簽，這些都是有可能影響網(wǎng)頁(yè)呈現(xiàn)速度的，最后發(fā)現(xiàn)，其實(shí)，只有最后一個(gè)<script>標(biāo)簽的作用是請(qǐng)求百度服務(wù)器，展示分享圖片和鏈接。那么，這條JS我們大可放到最后加載。
下面是我做的一個(gè)demo：

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
        <title>JS延遲加載百度分享代碼，提高網(wǎng)頁(yè)速度</title> 
        <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
        <style type="text/css"> 
            body{margin:0px;padding:0px;font-size:12px;} 
            #copyright{clear:both;} 
        </style> 
    </head> 

    <body> 
        <div id="baidu-share"> 
            <!-- 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> 
            <!-- Baidu Button END -->
        </div> 
        <div id="copyright"> 
            <a >編程圖書(shū)PDF下載【codejia.net】</a> 
        </div> 

        <script type="text/javascript"> 
            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); 
            } 
        </script> 
    </body> 
</html>

分析：通過(guò)上面的demo，可以發(fā)現(xiàn)我只是單純的將最后一個(gè)有src屬性的script標(biāo)簽，放到最后動(dòng)態(tài)加載的，并且是在window.onload之后加載。之前加載的都是純html標(biāo)簽代碼，并不會(huì)有多影響網(wǎng)頁(yè)速度。
百度分享代碼通過(guò)這樣調(diào)整后就算百度的服務(wù)器掛了，也不會(huì)影響自己的網(wǎng)頁(yè)正常顯示。

其實(shí)，這樣的技巧還有很多地方都可以用。想網(wǎng)站統(tǒng)計(jì)代碼、百度谷歌搜索代碼、第三方廣告代碼等，我們都可以放到網(wǎng)頁(yè)底部最后來(lái)加載，這樣即使第三方的服務(wù)器宕機(jī)，我們自己的機(jī)器也不會(huì)受到多少影響。

您可能感興趣的文章: