利用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 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
JS面向对象编程浅析
Aug 28 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 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集成百度Ueditor 1.4.3
2014/11/23 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
Python 正则表达式(转义问题)
2014/12/15 Python
Python函数参数类型*、**的区别
2015/04/11 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
python实现简单flappy bird
2018/12/24 Python
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
运输服务质量承诺书
2014/03/27 职场文书
优秀学生评语大全
2014/04/25 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
自强之星事迹材料
2014/05/12 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
财务负责人岗位职责
2015/02/03 职场文书
人生感悟经典句子
2019/08/20 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang