javascript - 学习网页开发，关于head区域一段脚本的疑惑
问题描述
自学前端不就，查看公司的主页，在head区域有如下代码：
<head>............<script>//疑惑1var _hmt = _hmt || []; //疑惑2(function() { var hm = document.createElement('script'); hm.src = 'https://hm.baidu.com/hm.js?788111edda8b56f4a6c2bdd403891d20'; //这个链接是百度的一些插件功能var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(hm, s); })();</script></head>
疑惑1：短路运算法用在这里，后续是做什么用的？一般都这么做吗？疑惑2：代码的意思是在script前面动态加<script src=’https://hm.baidu.com/hm.js?78...’>语句。可是为什么要这么做呢？我测试了下，直接在head里加上这段代码实现的功能也一样啊。如果是多页面，我每个页面加这段代码字符数也比function里面的字符数少啊。。实在搞不懂？？请达人解惑，感谢！
问题解答
回答1：实现过一个类似的统计库，简单分享下个人对这个机制的理解。
<script>// 这里如果已引入 _hmt 变量，则保留已有值// 仅在未初始化成功的情况下将其初始化// 避免后端模板拼接而成的页面中多处引入百度统计时，重复初始化变量的问题var _hmt = _hmt || []; // 疑惑2(function() { var hm = document.createElement('script'); hm.src = 'https://hm.baidu.com/hm.js?788111edda8b56f4a6c2bdd403891d20';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(hm, s); })();</script>
你的疑问在于，为什么不直接添加 hm.src 中的链接到 script 标签脚本中，而是先初始化 _hmt 变量后才添加该脚本。这应当是和统计库的功能实现有关的。简要介绍：
_hmt 实质是是一个消息队列的缓存。插入该数组的内容均是各类点击、滑动、触摸等用户事件。推入这个消息队列中的事件会被统计库上报到百度统计。
这个缓存是支持在第一方业务代码中通过 JS API 来写入的。例如使用百度统计的开发者，可以在自己的 JS 代码中编写形如 _hmt.push(xxx) 的逻辑，推送自定义的事件到消息队列中。
由于第三方脚本同样能写入该消息队列，这就要求该队列的数组变量不仅必须全局，还必须尽早初始化。而统计库的上报等业务逻辑则可以延迟到页面主要内容加载完成后再执行。
为了实现 3 中的要求，统计脚本的引入方式才设计为【首先初始化一个数组，然后动态加载统计脚本】。这样加载队列数组时直接在页面中内联初始化非常高效，后面的统计脚本延迟加载，减小对页面加载速度的影响。
回答2：疑惑二：这个应该是百度统计吧。。。
回答3：说明1.是判断是否已经定义了_hmt变量,或者定义变量
2.动态载入。节点操作载入的优先级 < 静态资源.这样是为了不影响渲染页面
测试1.第一行你可以自行研究
2.第二行你可以对比2种载入效果。
回答4：这是一段百度统计的代码，至于为什么“我单独创建了一个页面，只加了这个JS代码，弹出的页面内容就咨询窗口那些。”因为跨域了至于什么是跨域就是把别人家的东西拿到自己家用的方法
网公网安备