JS を使用して Baidu 共有コードの読み込みを遅らせ、Web ページの速度_JavaScript スキルを向上させる-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JS を使用して Baidu 共有コードの読み込みを遅らせ、Web ページの速度_JavaScript スキルを向上させる

May 16, 2016 pm 05:30 PM

js 遅延読み込み

多くの Web サイトが Baidu 共有コードを配置する場合、Web ページの固定位置に共有コードを配置するだけであることがわかりました。これは非常に致命的な方法です。というのも、Web ページを頻繁に開くと、Web ページが共有コードを読み込むときに、Baidu のサーバーにリクエストして、最終的に共有ボタンを表示するまでに数秒かかることがあります。

実際には、このような関数は Web ページにとってはあまり重要ではありません。JS を使用して読み込みを遅らせることで、Web ページのメインコンテンツの読み込みと表示を高速化できます。
ここで私の配置方法を共有します。
1. 次のように、Baidu が共有するコードをコピーします。

コードをコピーします

<!-- 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">
<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 ボタン END -->

2. コードを配置します。 🎜>上記の共有コードを注意深く分析すると、Web ページのレンダリング速度に影響を与える可能性のある 3 つの js script タグがあることがわかります。最後に、実際には最後の <script> タグのみが使用されていることがわかりました。 Baidu サーバーに共有画像とリンクを表示するようリクエストします。次に、この JS を最後にロードできます。
以下は私が作成したデモです:

コードをコピーしますコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
 
 <頭> 
 <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 ボタン 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 ボタン終了 -->
 </div> 
 <div id="著作権"> 
 <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(新しい日付()/3600000); 
 } 
 </script> 
 </body> 
</html>