javascript - 推迟广告脚本执行

Question

借助以下php函数:

  <?php
  if (!function_exists('wrapAds')) {
    function wrapAds($current_banner_name){
      $STRING_EMPTY = "";
      $openExprResult = array();
      $closeExpreResult = array();
      $openExpr = "/(<div[^>]*>)/";
      $closeExpr = "/(<\/div>)/";

      $banner = tsp_get_banner($current_banner_name);
      $result = '<pre data-script-reference>'
                .htmlspecialchars($banner)
                .'</pre>';

     return $result;
    }
  }
?>

我正在渲染以下标记:

<pre data-script-reference="1">&lt;!--- s: middle-box-sidebar --&gt;
&lt;div class="ads middle-box-sidebar"&gt;&lt;script type="text/javascript"&gt;
var FW_type = "4w";
var FW_code = "18xxxx;95xxx;70xxx;0";
var FW_dimension = "300x250";
var FW_category = "gossip";
&lt;/script&gt;
&lt;script src="//optimized-by.4wnetwork.com/simply_loader.js?4wvideo=true" type="text/javascript"&gt;&lt;/script&gt;&lt;/div&gt;
&lt;!--- e: middle-box-sidebar --&gt;</pre>

现在我尝试使用以下脚本推迟编码脚本的执行:

    <script type="text/javascript">
        [].slice.call(document.querySelectorAll('pre[data-script-reference]'))
   .forEach(function(item){
         var txt = document.createElement("textarea");
         txt.innerHTML = item.innerHTML;
         var parentNode = item.parentNode;
         var p0 = txt.innerText;
        //  parentNode.removeChild(item);
         parentNode.innerHTML += p0;

    </script>

似乎解码的脚本根本没有执行，我做错了什么？

Answer 1

在执行了一万亿次无用的代码之后，我刚刚在一长串警告中注意到了一个奇怪的语句:
“无法对“文档”执行“写入”:除非显式打开，否则无法从异步加载的外部脚本写入文档。”。我用谷歌搜索了这条消息，发现了 nice question .

唯一未接受的答案建议postscribe.js

---

Asynchronously write javascript, even with document.write.

---

Remote scripts, especially ads, block the page from doing anything else while they load. They contribute a large % to load times which affects your bottom line. Asynchronous ads do not block the page and can be delivered after core content - Async FTW.

Why is it so hard to deliver ads asynchronously? Because they may contain calls to document.write, which expects to be handled synchronously. PostScribe lets you deliver a synchronous ad asynchronously without modifying the ad code.

因此，由于我必须管理正文和侧边栏中的广告，因此我进行了一些重构，将 php 函数移至函数中.php:

/**
* redefine and get the legacy ads block from base library by name
* render as encoded plain text inside a *pre* wrapper
*/
function tsp_get_banner($current_banner_name){
  $STRING_EMPTY = "";
  // https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags
  $openExpr = "/(<div[^>]*>)/";
  $closeExpr = "/(<\/div>)/";
  $openExprResult = $closeExpreResult = array();
  $banner = original_tsp_get_banner($current_banner_name);
  preg_match($openExpr, $banner, $openExprResult);
  $banner = preg_replace($openExpr, $STRING_EMPTY, $banner);
  preg_match($closeExpr, $banner, $closeExpreResult);
  $banner = preg_replace($closeExpr, $STRING_EMPTY, $banner);
  return wrapAdsSnippet($banner, $openExprResult[0], $closeExpreResult[0]);
}

function wrapAdsSnippet($source, $prefix, $postfix){
  $result = '<pre data-script-reference style="display:none;">'
                            .htmlspecialchars($source)
                        .'</pre>';
  if(isset($prefix) && isset($postfix)){
        $result = $prefix.$result.$postfix;
    }
  return $result;
}

然后我更改了 block 的包含: 这样我就不需要改变任何东西。

<?php

echo tsp_get_banner("中间框侧边栏");

  echo renderAds("middle-box-sidebar");
?>

我只需更改最终脚本以包含在 footer.php 中:

var MyCompanyLab;
(function (MyCompanyLab) {
    "use strict";
    var Ads;
    (function (Ads) {
        var Optimization;
        (function (Optimization) {
            var PostProcessor = (function () {
                function PostProcessor() {
                }
                PostProcessor.postponeAdsExecution = function () {
                    $("pre[data-script-reference]").each(function (idx, item) {
                        var parentNode = item.parentNode;
                        postscribe(parentNode, $('<textarea />').html(item.innerHTML).text(), {
                            done: function () { },
                            error: function () { },
                            releaseAsync: true,
                        });
                        parentNode.removeChild(item);
                    });
                };
                return PostProcessor;
            }());
            Optimization.PostProcessor = PostProcessor;
        })(Optimization = Ads.Optimization || (Ads.Optimization = {}));
    })(Ads = MyCompanyLab.Ads || (MyCompanyLab.Ads = {}));
})(MyCompanyLab|| (MyCompanyLab= {}));


<script type="text/javascript">
  ...
  MyCompanyLab.Ads.Optimization.PostProcessor.postponeAdsExecution();
  ...
</script>