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

WBOY
リリース: 2016-05-16 17:30:45
オリジナル
1490 人が閲覧しました

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

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



🎜>













2. コードを配置します。 🎜>上記の共有コードを注意深く分析すると、Web ページのレンダリング速度に影響を与える可能性のある 3 つの js script タグがあることがわかります。最後に、実際には最後の <script> タグのみが使用されていることがわかりました。 Baidu サーバーに共有画像とリンクを表示するようリクエストします。次に、この JS を最後にロードできます。 <strong><br>以下は私が作成したデモです: </strong><br><strong><br></strong><div class="codetitle">コードをコピーします<span><a style="CURSOR: pointer" data="25629" class="copybut" id="copybut25629" onclick="doCopy('code25629')"><u> コードは次のとおりです。 </u><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> <頭> <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> <!-- Baidu ボタン BEGIN --><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>









分析:上のデモを通過して、公開可能现我只是单纯的将最後の一個有srcプロパティのスクリプト
百分率共有コードは、このように調整されて後で百分率が計算されるため、完全な html コードです。

さらに、このような技術は、多くの場所で使用可能であると考えられています。どれも最後にネットワークの一番下に追加できるので、たとえサードパーティのサーバー機であっても、私自身のマシンは多少の影響を受けることはありません。
関連ラベル:
ソース:php.cn
前の記事:js関数sorting_javascriptスキルのサンプルコード 次の記事:jqueryは、アニメーション効果の非表示と表示/入力ボックスの文字の動的な減少/ナビゲーションボタンswitching_jqueryを実装します。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート