从统计代码来谈JS加载的优化

我有这么一个职业病，每次发现页面很卡，不管谁的网站，都会F12调出Chrome控制台来调试，看看是什么原因导致。

原因其实不外乎这几种：

1、页面文档的加载

2、css/js 的加载

这边就 js 说说前端的加载优化，以统计代码加载为例。

<!-- 最原始的，腾讯分析、cnzz精简版就是这种 -->
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=xxx" charset="UTF-8"></script><script type="text/javascript">// 用js 在当前位置插件统计代码。cnzz、百度统计旧版就是用这个
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fxxx' type='text/javascript'%3E%3C/script%3E"));
</script>

非异步加载，会影响 DOMContentLoaded，比如 $(document).ready() 延迟，它绑定一些事件，页面效果，都等这些统计代码加载完才生效。

而且这种情况下，如果这些被加载的代码又以同样的方法加载其他js，则 DOMContentLoaded 会更延后。

所以最好不要用这种方法。

<script type="text/javascript">
// 百度统计，创建 script 元素，插入第一个 script 元素前面
(function() {var hm = document.createElement("script");hm.src = "//hm.baidu.com/hm.js?xxx";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);
})();///
// 谷歌分析（ga），其中部分代码跟百度统计一样
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-xxx-1', 'auto');ga('send', 'pageview');
</script>

百度统计跟ga是异步加载，则不会影响 DOMContentLoaded 。但在Chrome、Firefox、Opera、IE11+ 会影响onload，像Chrome的favicon就一直在转圈圈。

这样还不易接受的话，可以用 setTimeout 来解决，让浏览器当成是要延迟加载的。

<script type="text/javascript">var _hmt = _hmt || [];setTimeout(function(){(function() {var hm = document.createElement("script");hm.src = "//hm.baidu.com/hm.js?xxx";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();},0);
</script>

不过这里要注意。这样的统计代码最好写在最前，防止之前的代码出错导致统计代码不被执行。

也可以把这些统计代码写到一个 stat.js 再引入进来防止被其他错误代码影响，虽比较绕。

于是，我赶紧把一些统计代码用上面的形式加载。把 hm.src 变量替换掉就OK了。

这里说的是统计代码，实际上可以推广到与业务不相关的一些js都可以这样加载。

原文 http://www.baozy.com/archives/12404.html

转载于:https://www.cnblogs.com/iBaozi/p/4905303.html

从统计代码来谈JS加载的优化相关推荐

node中怎样将css导入到html,CSS无法使用Node.js加载到我的HTML代码中
我想通过Node.js使用express()函数在localhost:3000中将CSS添加到我的HTML中. 不幸的是,有些奇怪.我一步一步按照教程中的步骤,但仍然无法加载我的CSS.我的style ...
React.js加载组件以及JSX脚本处理代码
React.js是一个组件化的JS界面开发库,可以结合XML格式的脚本语法JSX. 如果你的页面中包含了这样的代码,需要将JSX代码预编译为Raw JavaScript,不然会提示有语法错误" ...
three.js 加载显示文字
three.js 加载显示文字代码放到 ./three.js/examples/ 下 <!DOCTYPE html> <html lang="en">&l ...
优化JS加载时间过长的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...
首次使用three.js加载obj模型未成功
接此,https://blog.csdn.net/bcbobo21cn/article/details/110676331 基本代码如下: <!DOCTYPE html> <html ...
python爬取js加载的数据_Python爬虫学习，记一次抓包获取js，从js函数中取数据的过程...
昨天有小伙伴找我,新浪新闻的国内新闻页,其他部分都是静态网页可以抓到,但是在左下方的最新新闻部分,不是静态网页,也没有json数据,让我帮忙抓一下.大概看了下,是js加载的,而且数据在js函数中,很有 ...
[f]动态判断js加载完成
在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...
python爬取js加载的数据_JS动态加载数据不会爬？老司机教你两个方法爬取想要的数据...
学习Python的人绝大部分都是在用Python做爬虫,毕竟对于爬虫而言Python是不二选. 但是一般简单的静态页面网站还是很好爬取的,对于很多动态加载的网站就不知道怎么办了,今天小编就给大家介绍两 ...
three.js加载3d模型_基于WebGL的3D技术在网页中的运用 ThingJS 前端开发
Three.js.ThingJS这些引擎库可以加载3D制作软件的模型,大幅度提高了制作效率,改变WebGL开发困难的局面,让Web开发者享受便捷的3D开发服务.三者的难度对比如下: ThingJS(框 ...

从统计代码来谈JS加载的优化

从统计代码来谈JS加载的优化相关推荐

最新文章

热门文章