首頁 > 開發者 > JavaScript
發現很多網站在放置百度分享代碼的時候，簡單的將分享代碼放置到固定的網頁位置就完事了，這是非常致命的方式。因為，我經常開啟一個網頁的時候，發現在網頁載入到分享代碼的時候，有時候花上幾秒的時候來請求百度的伺服器，最後展示分享按鈕。
其實，像這樣對網頁來說不是非常重要的功能，我們大可以用JS來消極式載入，從而提高網頁主要內容的快速載入顯示。
這裡分享下我的放置方式。
一、copy百度分享代碼，如下：
複製代碼 代碼如下:
<!-- 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 -->
二、放置代碼
認真分析上面的分享代碼，我們可以發現，其中有3個js指令碼標籤，這些都是有可能影響網頁呈現速度的，最後發現，其實，只有最後一個<script>標籤的作用是請求百度伺服器，展示分享圖片和連結。那麼，這條JS我們大可放到最後載入。
下面是我做的一個demo：
複製代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JS消極式載入百度分享代碼，提高網頁速度</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 href="http://codejia.net">編程圖書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>
分析：通過上面的demo，可以發現我只是單純的將最後一個有src屬性的script標籤，放到最後動態載入的，並且是在window.onload之後載入。之前載入的都是純html標籤代碼，並不會有多影響網頁速度。
百度分享代碼通過這樣調整後就算百度的伺服器掛了，也不會影響自己的網頁正常顯示。
其實，這樣的技巧還有很多地方都可以用。想網站統計代碼、百度Google搜尋代碼、第三方廣告代碼等，我們都可以放到網頁底部最後來載入，這樣即使第三方的伺服器宕機，我們自己的機器也不會受到多少影響。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
