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代碼，彈出的頁面內容就咨詢窗口那些。”因為跨域了至于什么是跨域就是把別人家的東西拿到自己家用的方法
網公網安備