简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Learning web development, doubts about a script in the head area
漂亮男人
漂亮男人 2017-05-24 11:36:19
0
4
628

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!

漂亮男人
漂亮男人

reply all(4)
大家讲道理
大家讲道理2017-05-24 11:38:19 4 floor

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.

Like +0
Add Reply
给我你的怀抱
给我你的怀抱2017-05-24 11:38:19 3 floor

Doubt 2: This should be Baidu statistics. . .

Like +0
Add Reply
黄舟
黄舟2017-05-24 11:38:19 2 floor

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.

Like +0
Add Reply
Ty80
Ty802017-05-24 11:38:19 1 floor

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

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！