统计代码陷阱之无形中影响了网速
阅: - 评:0 - 积分:0
摘要：
很多站长都会使用百度统计、51.la统计、友盟等统计代码查看自己的网站数据，而对于这些统计代码，如果处理不当，会影响网站打开的速度哦......
说起网站统计代码，稍微有过了解的看官肯定会想起一堆统计平台，例如：百度统计、51.la统计、友盟统计等等。而这些统计代码中也是存在陷阱的哦！
一、回顾优化网页常识
通常来说，我们会将js代码置于闭合的</body>前，因为这样做的好处就是：网页是从上往下进行加载的，js放最下面是最后加载，这样可以提升打开网页的速度。
虽然道理看官都懂，不就是将js放最下面嘛，有什么好说的。可看官真的懂？？？
二、陷阱一：统计代码放页尾但还是出现在head中
如果看官是一个站长，可以检查下您的网站，看看统计代码有没有出现在head中。好了，艺灵也不卖关子了，直接用代码说话吧！毕竟语言不太好表达，各位看官可要看仔细看图了！
2.1、百度统计代码
下面是百度最新统计代码，如果看官需要百度统计，可从百度官网获取，登录地址：sitecenter.baidu.com/sc-web/ 。
2.1.1、示例代码
- <script>
- var _hmt = _hmt || [];
- (function() {
- var hm = document.createElement("script");
- hm.src = "//hm.baidu.com/hm.js?......";
- var s = document.getElementsByTagName("script")[0];
- s.parentNode.insertBefore(hm, s);
- })();
- </script>
看官生成代码后会看到一个安装说明，配图：
可以看到百度是提倡将代码放到</head>中的。如果看官愿意，就照百度说的操作吧。下面还是来看艺灵这篇的教程吧！
如果看官将生成的代码放到了</body>前，按常理来说，统计代码会在我们的意料中，而事实并非如此！为何？？？
2.2、原因分析
不知道看官有没有注意艺灵代码中黄色高亮部分，一共有两行：
第一行是寻找节点；
第二行是节点前插入内容。
那么问题就来了！如果看官在<head>中写有<script>标签的话，百度的统计代码就会蹭的一下跑到这个<script>标签前。配图一张： 明白？？？
2.3、解决方案
既然我们知道了原因，那解决就很简单了。解决也分两步：
第一步：更换节点，
第二步：追加内容。
2.3.1、修改代码
- var s = document.getElementsByTagName("body")[0];
- s.appendChild(hm);
- })();
- </script>
上面黄色高亮为修改部分，我们再来刷新下页面看下效果吧，配图： 怎么样，这样乖了吧！
对于其它平台的统计代码，修改方法可参考上面的2.3.1。
下面再说下统计代码中的第二个陷阱。
三、陷阱二：统计代码图片拖慢了网速
下面以51.la为例。
使用过统计代码的站长应该知道统计代码有很多种样式，比如说：图片、文字形式等。来一张51.la的吧！登录地址：www.51.la配图： 怎么样，看着很多吧，总有一款适合自己的。
前段时间，艺灵的网站因各种因素问题，总是打不开或打开很慢，后来看到除了一些因素外，统计代码也有份！
我们来看下正常情况下加载图标的速度吧，配图： 可以看到，图标加载时间在1min以上，尽管这些还只是一个小小小图标.....
那段时间，51.la这样的一个图标，有时加载了几分钟还没加载完，这也就导航了页面内容无法正常展示。后来换成文字，速度立马快了些，但还是有问题。而这个问题就是各统计代码本身的，比如说51.la的：web.51.la:82/go.asp?这个请求比较花费时间，但这些是统计平台的问题，我们是无法解决的。
四、最后
好了，关于统计代码，普遍存在的两个陷阱艺灵已经进行了演示和提供了解决的方法，各位站长可查看下自己的网站，如果觉得艺灵说的不靠谱，自己运用测试下时间就知道了，毕竟干这行是要靠数据说话的！
除了统计代码外，各种平台的分享代码、推送代码等等或多或少都存在上面提供的陷阱现象。最明显的又是百度家的百度推送！至于怎么解决，想必看官应该学会了吧！
----------完----------
转载声明：
若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2016-08-30/435.html若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。
亲，扫个码支持一下艺灵呗~
Tag: 统计代码 百度统计 51.la统计 友盟统计 优化网站 网速测试 web前端优化 网站数据 分享代码 百度推送 javascript
上一篇: minify实战之合并css和js减少网站http请求数 下一篇: 血的教训之更新阿里iconfont矢量图标基线后的坑