简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Q&A  >  body text

javascript - Learning web development, doubts about a script in the head area

If you are not good at learning the front-end by yourself, check the company’s homepage. There is the following code in the head area: 

<head>
......
......
<script>
//疑惑1
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>
</head>

Doubt 1: The short-circuit algorithm is used here, what is it used for later? Is this generally done?
Doubt 2: The code means to dynamically add the <script src='https://hm.baidu.com/hm.js?78...'> statement in front of the script. But why do this? I tested it and added this code directly to the head to achieve the same function. If there are multiple pages, the number of characters I add to each page of this code will be less than the number of characters in the function. . Really don’t understand? ?
Please let me know, thank you!

漂亮男人漂亮男人2729 days ago630

reply all(4)I'll reply

  • 大家讲道理

    大家讲道理2017-05-24 11:38:19

    I have implemented a similar statistical library and would like to briefly share my personal understanding of this mechanism. 

    <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>

    Your question is, why not add the hm.src 中的链接到 script 标签脚本中，而是先初始化 _hmt variable directly and then add the script. This should be related to the function implementation of the statistical library. Brief introduction:

    1. _hmt Essentially it is a message queue cache. The contents inserted into this array are all types of user events such as clicks, slides, touches, etc. Events pushed into this message queue will be reported to Baidu Statistics by the statistics library.

    2. This cache supports writing through JS API in first-party business code. For example, developers who use Baidu Statistics can write logic in the form of _hmt.push(xxx) in their own JS code and push custom events to the message queue.

    3. Since third-party scripts can also write to the message queue, this requires that the array variables of the queue must not only be global, but also must be initialized as early as possible. Business logic such as reporting to the statistical library can be delayed until the main content of the page is loaded before execution.

    4. In order to achieve the requirements in 3, the introduction method of the statistical script is designed as [first initialize an array, and then dynamically load the statistical script]. In this way, inline initialization directly in the page when loading the queue array is very efficient, and the subsequent statistics script is delayed in loading, reducing the impact on the page loading speed.

    reply
    0
  • 给我你的怀抱

    给我你的怀抱2017-05-24 11:38:19

    Doubt 2: This should be Baidu statistics. . .

    reply
    0
  • 黄舟

    黄舟2017-05-24 11:38:19

    Instructions

    1. Determine whether the _hmt variable has been defined, or define the variable

    2. Dynamic loading. The priority of node operation loading < static resources. This is so as not to affect the rendering page

    Test

    1. You can study the first line by yourself

    2. In the second line, you can compare the two loading effects.

    reply
    0
  • PHP中文网

    PHP中文网2017-05-24 11:38:19

    This is a piece of code from Baidu statistics.
    As for why
    "I created a separate page and only added this JS code. The content of the page that pops up is the one in the consultation window."
    Because it is cross-domain
    As for what cross-domain is
    It’s a way to take other people’s things to your own home

    reply
    0
  • Cancelreply