javascript - 學習網(wǎng)頁開發(fā)，關于head區(qū)域一段腳本的疑惑
問題描述
自學前端不就，查看公司的主頁，在head區(qū)域有如下代碼：
<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：短路運算法用在這里，后續(xù)是做什么用的？一般都這么做嗎？疑惑2：代碼的意思是在script前面動態(tài)加<script src=’https://hm.baidu.com/hm.js?78...’>語句。可是為什么要這么做呢？我測試了下，直接在head里加上這段代碼實現(xiàn)的功能也一樣啊。如果是多頁面，我每個頁面加這段代碼字符數(shù)也比function里面的字符數(shù)少啊。。實在搞不懂？？請達人解惑，感謝！
問題解答
回答1：實現(xiàn)過一個類似的統(tǒng)計庫，簡單分享下個人對這個機制的理解。
<script>// 這里如果已引入 _hmt 變量，則保留已有值// 僅在未初始化成功的情況下將其初始化// 避免后端模板拼接而成的頁面中多處引入百度統(tǒng)計時，重復初始化變量的問題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 變量后才添加該腳本。這應當是和統(tǒng)計庫的功能實現(xiàn)有關的。簡要介紹：
_hmt 實質(zhì)是是一個消息隊列的緩存。插入該數(shù)組的內(nèi)容均是各類點擊、滑動、觸摸等用戶事件。推入這個消息隊列中的事件會被統(tǒng)計庫上報到百度統(tǒng)計。
這個緩存是支持在第一方業(yè)務代碼中通過 JS API 來寫入的。例如使用百度統(tǒng)計的開發(fā)者，可以在自己的 JS 代碼中編寫形如 _hmt.push(xxx) 的邏輯，推送自定義的事件到消息隊列中。
由于第三方腳本同樣能寫入該消息隊列，這就要求該隊列的數(shù)組變量不僅必須全局，還必須盡早初始化。而統(tǒng)計庫的上報等業(yè)務邏輯則可以延遲到頁面主要內(nèi)容加載完成后再執(zhí)行。
為了實現(xiàn) 3 中的要求，統(tǒng)計腳本的引入方式才設計為【首先初始化一個數(shù)組，然后動態(tài)加載統(tǒng)計腳本】。這樣加載隊列數(shù)組時直接在頁面中內(nèi)聯(lián)初始化非常高效，后面的統(tǒng)計腳本延遲加載，減小對頁面加載速度的影響。
回答2：疑惑二：這個應該是百度統(tǒng)計吧。。。
回答3：說明1.是判斷是否已經(jīng)定義了_hmt變量,或者定義變量
2.動態(tài)載入。節(jié)點操作載入的優(yōu)先級 < 靜態(tài)資源.這樣是為了不影響渲染頁面
測試1.第一行你可以自行研究
2.第二行你可以對比2種載入效果。
回答4：這是一段百度統(tǒng)計的代碼，至于為什么“我單獨創(chuàng)建了一個頁面，只加了這個JS代碼，彈出的頁面內(nèi)容就咨詢窗口那些。”因為跨域了至于什么是跨域就是把別人家的東西拿到自己家用的方法
網(wǎng)公網(wǎng)安備