熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

利用JS延遲加載百度分享代碼,提高網頁速度

2022-06-13   來源: JSP教程 

  發現很多網站在放置百度分享代碼的時候簡單的將分享代碼放置到固定的網頁位置就完事了這是非常致命的方式因為我經常打開一個網頁的時候發現在網頁加載到分享代碼的時候有時候花上幾秒的時候來請求百度的服務器最後展示分享按鈕

其實像這樣對網頁來說不是非常重要的功能我們大可以用JS來延遲加載從而提高網頁主要內容的快速加載顯示
這裡分享下我的放置方式
copy百度分享代碼如下

復制代碼 代碼如下:
<! Baidu Button BEGIN >
<div id="bdshare" class="bdshare_t bds_tools_ getcodesbdshare">
<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=" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
documentgetElementById("bdshell_js")src = "+ Mathceil(new Date()/)
</script>
<! Baidu Button END >

  
放置代碼
認真分析上面的分享代碼我們可以發現其中有個js腳本標簽這些都是有可能影響網頁呈現速度的最後發現其實只有最後一個<script>標簽的作用是請求百度服務器展示分享圖片和鏈接那麼這條JS我們大可放到最後加載
下面是我做的一個demo

復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html>
<head>
<title>JS延遲加載百度分享代碼提高網頁速度</title>
<meta httpequiv="ContentType" content="text/html;charset=gb" />
<style type="text/css">
body{margin:px;padding:px;fontsize:px;}
#copyright{clear:both;}
</style>
</head>

<body>
<div id="baidushare">
<! Baidu Button BEGIN >
<div id="bdshare" class="bdshare_t bds_tools_ getcodesbdshare">
<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=" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<! Baidu Button END >
</div>
<div id="copyright">
<a href="編程圖書PDF下載【codejianet】</a>
</div>

<script type="text/javascript">
windowonload = shareCode;

function shareCode(){
documentgetElementById("bdshell_js")src = "+ Mathceil(new Date()/);
}
</script>
</body>
</html>

  
分析通過上面的demo可以發現我只是單純的將最後一個有src屬性的script標簽放到最後動態加載的並且是在windowonload之後加載之前加載的都是純html標簽代碼並不會有多影響網頁速度
百度分享代碼通過這樣調整後就算百度的服務器掛了也不會影響自己的網頁正常顯示

其實這樣的技巧還有很多地方都可以用想網站統計代碼百度谷歌搜索代碼第三方廣告代碼等我們都可以放到網頁底部最後來加載這樣即使第三方的服務器宕機我們自己的機器也不會受到多少影響


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20015.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.