利用JS延迟加载百度分享代码优化网页速度

百度分享代码对网页速度的影响

许多网站在集成百度分享功能时，往往只是简单地将分享代码嵌入固定位置，这种做法存在明显缺陷。在实际浏览中，经常遇到网页加载至分享模块时，需要花费数秒请求百度服务器，最终才渲染出分享按钮，严重影响用户体验。

对于此类非核心功能，采用JavaScript进行延迟加载是更优的选择，这能确保网页主要内容优先快速展示。

以下介绍一种具体的实施方法。

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

分析上述代码可知，其中包含三个script标签，均可能影响页面渲染速度。经排查，仅最后一个script标签负责请求百度服务器并展示分享图标及链接，因此该部分代码适合延后加载。

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

优化效果与适用场景分析

通过上述示例可见，核心优化点在于将带有src属性的最后一个script标签移至页面底部，并在window.onload事件触发后动态加载。此前加载的部分仅为纯HTML结构，对页面加载速度影响极小。

经过此调整，即便百度服务器出现故障，也不会影响用户正常浏览网页内容。

此类延迟加载技巧同样适用于网站统计代码、搜索框代码及第三方广告代码等场景。将这些非核心资源置于页面底部最后加载，可有效降低第三方服务宕机对主站体验的影响。