快捷導(dǎo)航

詳解JavaScript發(fā)送埋點(diǎn)請(qǐng)求的兩種方式

更新時(shí)間：2022年06月16日 08:35:36 作者：yuyongyu

對(duì)于發(fā)送埋點(diǎn)請(qǐng)求這種應(yīng)用場(chǎng)景，我們有兩種簡單的處理方式：動(dòng)態(tài)創(chuàng)建<script>和<img>兩種方式。本文就詳細(xì)講講二種方式的實(shí)現(xiàn)，需要的可以參考一下

一、用法

1.動(dòng)態(tài)創(chuàng)建<img>

方式1：通過img標(biāo)簽

function sendByImg(src) {
    var img = document.createElement("img");
    img.src = src;
}

方式2：通過Image對(duì)象

function sendByImage(src) {
    var img = new Image();
    img.src = src;
}

2.動(dòng)態(tài)創(chuàng)建<script>

只有一種方式：通過<script>標(biāo)簽

function sendByScript(src){
    var script = document.createElement("script");
    script.src = src;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
}

二、區(qū)別

區(qū)別1

如果要觸發(fā)請(qǐng)求，動(dòng)態(tài)創(chuàng)建的<script>必須要插入到DOM中，而動(dòng)態(tài)創(chuàng)建的<img>則不需要

演示代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Img VS Script</title>
</head>
<body>
<h3>
    請(qǐng)觀察瀏覽器中的Network和Elements！
</h3>
<script>
    function sendByScript(src){
        var script = document.createElement("script");
        script.src = src;
    }

    function sendByScriptInsertDOM(src){
        var script = document.createElement("script");
        script.src = src;
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    }

    function sendByImage(src) {
        var img = new Image();
        img.src = src;
    }

    function sendByImg(src) {
        var img = document.createElement("img");
        img.src = src;
    }

    function sendRequest(src) {
        //一、通過script：
        //不插入DOM，不會(huì)觸發(fā)請(qǐng)求
        sendByScript(src + '/byScript');

        //插到DOM中，會(huì)觸發(fā)請(qǐng)求
        sendByScriptInsertDOM(src + '/byScriptDOM');


        //二、通過img：
        //不插入DOM，不會(huì)觸發(fā)請(qǐng)求
        sendByImage(src+ '/byImage');

        //不插入DOM，不會(huì)觸發(fā)請(qǐng)求
        sendByImg(src+ '/byImg');
    }

    sendRequest('https://wwww.baidu.com')

</script>
</body>
</html>

用chrome瀏覽器打開此HTML文件，查看network：

圖片描述

可以看到，插入DOM中的<script>觸發(fā)來請(qǐng)求，而未插入DOM中則沒有發(fā)起請(qǐng)求；動(dòng)態(tài)創(chuàng)建的<img>的兩種方式?jīng)]有插入DOM，都觸發(fā)請(qǐng)求。

那么問題來了，為什么動(dòng)態(tài)創(chuàng)建的<script>必須要插入DOM中才會(huì)觸發(fā)請(qǐng)求，而動(dòng)態(tài)創(chuàng)建的<img>則不用？關(guān)于這個(gè)問題，在網(wǎng)上查了很久也沒有找到特別強(qiáng)有力的解釋。有人說是因?yàn)檫@兩種標(biāo)簽本身的特性決定的：<img>作為展示性標(biāo)簽加載的是圖片資源，其對(duì)應(yīng)的地址可以直接訪問就能得到資源；<script>往往加載的是JavaScript代碼，需要網(wǎng)頁這樣的執(zhí)行環(huán)境。個(gè)人覺得此解釋有些牽強(qiáng)，但也沒有找到更權(quán)威的解釋。如果有更好的觀點(diǎn)，歡迎留言。

區(qū)別2

動(dòng)態(tài)創(chuàng)建的<script>可以對(duì)請(qǐng)求結(jié)果進(jìn)行處理，而動(dòng)態(tài)創(chuàng)建的<img>做不到

JSONP的實(shí)現(xiàn)原理就是借助動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽，并對(duì)返回結(jié)果進(jìn)行處理。

至此，我當(dāng)時(shí)在想，那么借助jQuery發(fā)送JSONP請(qǐng)求，豈不是每發(fā)一次就要在頁面上創(chuàng)建一個(gè)<script>標(biāo)簽？觀察結(jié)果顯示并沒有。于是去看了下jQuery的源碼：

圖片描述

如圖所示，在<script>加載完成或出錯(cuò)后將標(biāo)簽移除。所以，我們?cè)谟脛?dòng)態(tài)創(chuàng)建<script>方式發(fā)送請(qǐng)求也可以參考這種方式。

三、選擇哪種方式

單純從發(fā)送請(qǐng)求的角度看，理論上兩者沒有特別大的差異，但有一點(diǎn)一定要注意：動(dòng)態(tài)創(chuàng)建<img>的方式在瀏覽器禁用圖片模式下不會(huì)觸發(fā)請(qǐng)求。

例如，在chrome瀏覽器中設(shè)置禁圖模式（設(shè)置>高級(jí)設(shè)置>隱私設(shè)置和安全性>網(wǎng)站設(shè)置>圖片>顯示全部去掉），結(jié)果：

圖片描述

只有動(dòng)態(tài)創(chuàng)建<script>的方式有請(qǐng)求，動(dòng)態(tài)創(chuàng)建<img>的方式?jīng)]有任何請(qǐng)求記錄。

綜上，從擴(kuò)展性和兼容性上看，動(dòng)態(tài)創(chuàng)建<script>的方式是首選。

四、總結(jié)

對(duì)于發(fā)送埋點(diǎn)請(qǐng)求這種應(yīng)用場(chǎng)景，我們有兩種簡單的處理方式：動(dòng)態(tài)創(chuàng)建<script>和<img>兩種方式，兩者最大的差異是：動(dòng)態(tài)創(chuàng)建的<script>必須插入到DOM中才能觸發(fā)請(qǐng)求，而動(dòng)態(tài)創(chuàng)建<img>的方式則不需要。但動(dòng)態(tài)創(chuàng)建<img>的方式有個(gè)致命缺陷：瀏覽器設(shè)置了禁止圖片顯示時(shí)，無法觸發(fā)請(qǐng)求。所以，對(duì)于封裝埋點(diǎn)庫的時(shí)候，動(dòng)態(tài)創(chuàng)建<script>的方式是首選，而且可以參考jQuery，在請(qǐng)求記載完成后對(duì)<script>進(jìn)行清除。

以上就是詳解JavaScript發(fā)送埋點(diǎn)請(qǐng)求的兩種方式的詳細(xì)內(nèi)容，更多關(guān)于JavaScript發(fā)送埋點(diǎn)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: