利用JS延迟加载百度分享代码,提高网页速度


Posted in Javascript onJuly 01, 2013

发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固定的网页位置就完事了,这是非常致命的方式。因为,我经常打开一个网页的时候,发现在网页加载到分享代码的时候,有时候花上几秒的时候来请求百度的服务器,最后展示分享按钮。

其实,像这样对网页来说不是非常重要的功能,我们大可以用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标签代码,并不会有多影响网页速度。
百度分享代码通过这样调整后就算百度的服务器挂了,也不会影响自己的网页正常显示。

其实,这样的技巧还有很多地方都可以用。想网站统计代码、百度谷歌搜索代码、第三方广告代码等,我们都可以放到网页底部最后来加载,这样即使第三方的服务器宕机,我们自己的机器也不会受到多少影响。

Javascript 相关文章推荐
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 Javascript
jQuery提交多个表单的小例子
Jun 30 #Javascript
用jquery存取照片的具体实现方法
Jun 30 #Javascript
js正文内容高亮效果的实现方法
Jun 30 #Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 #Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 #Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 #Javascript
JS Replace()的高级使用方法介绍
Jun 29 #Javascript
You might like
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
php实现的简单日志写入函数
2015/03/31 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
python list中append()与extend()用法分享
2013/03/24 Python
Python中的集合类型知识讲解
2015/08/19 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
python tkinter基本属性详解
2019/09/16 Python
python创建学生管理系统
2019/11/22 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
小学体育教学反思
2014/01/31 职场文书
求职信范文大全
2014/05/26 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android