在加载后或firstRender之后加载第三方广告

Question

关于如何在加载后加载iframes，以避免延迟onload事件，这方面存在大量的问题。这个问题有点不同。我们与一个广告网络合作，它为我们提供了两个选项来实现他们的广告标签：

第一个是他们所称的同步标记。他们的建议是，这“不应该是硬编码。如果放置在广告服务器或作为另一个货币化合作伙伴的回传，效果最好：”

<div>
<script src='http://www.googletagservices.com/tag/js/gpt.js'>
    googletag.pubads().definePassback('/80840/10.example.com_desktop_160x600', [160, 600]).display();
</script>    
</div>

​

另一个选项是他们所称的异步标记：

​

<div>
<script type="text/javascript">
(function() {
var html = "javascript:\"<body style='margin: 0;'><script src='http://www.googletagservices.com/tag/js/gpt.js'>googletag.pubads().set('page_url','"+window.location.href+"').definePassback('/80840/10.example.com_desktop_160x600', [160, 600]).display();<\/script></body>\"";
document.write('<iframe width="160" height="600" frameBorder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+encodeURI(html)+'"></iframe>');
})();
</script>
</div>

​

我有点不好意思说我不懂这段代码。它使用document.write (我理解这不是一个好的实践)来插入一个iFrame，它的src不是一个URL，而是某种Javascript巫毒。我担心，如果广告代码硬编码到页面上，它将如何影响页面呈现时间。

我的首选是异步加载我的自定义Javascript文件，在我的JS中，我希望这样做：

​

$(document).ready(function(){
  //Use the ad network's "synchronous" tag
  var html = '<div><script src='http://www.googletagservices.com/tag/js/gpt.js'>googletag.pubads().definePassback('/80840/10.example.com_desktop_160x600', [160, 600]).display();</script></div>';
  $('#ad-div').append(html);
});

​

但是当我这样做的时候，没有广告渲染。通过查看Network来检查请求，我可以看到gpt.js是被请求的，但是广告没有呈现。

因此，我的问题是:如何在不牺牲页面呈现时间的情况下实现这个广告标记？我希望用户首先看到内容，然后广告可以加载和采取自己的甜蜜时间这样做。

Answer 1

你的问题有几个有趣的部分，所以让我们把它分解。

到底是怎么回事？

第一个是他们所称的同步标记。他们的建议是，这“不应该是硬编码。如果放置在广告服务器或作为另一个货币化合作伙伴的回传，效果最好：”

广告服务器(如Google Ads/Doubleclick)通常异步地呈现它们的标记，这意味着上面的同步标记适合插入到您的广告服务器中，因为当它被发送到页面时，它已经从异步加载中启动。也就是说，页面呈现的其余部分不会因为广告标签呈现而被阻止。

另一个选项是他们所称的异步标记：

<div>
<script type="text/javascript">
(function() {
var html = "javascript:\"<body style='margin: 0;'><script src='http://www.googletagservices.com/tag/js/gpt.js'>googletag.pubads().set('page_url','"+window.location.href+"').definePassback('/80840/10.example.com_desktop_160x600', [160, 600]).display();<\/script></body>\"";
document.write('<iframe width="160" height="600" frameBorder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+encodeURI(html)+'"></iframe>');
})();
</script>
</div>

我有点不好意思说我不懂这段代码。它使用document.write (我理解这不是一个好的实践)来插入一个iFrame，它的src不是一个URL，而是某种Javascript巫毒。我担心，如果广告代码硬编码到页面上，它将如何影响页面呈现时间。

您是正确的，document.write通常不是很好的实践。在这种情况下，尽管使用document.write生成iframe是必要的，因为唯一的选择是使用html变量污染全局命名空间。让我们深入研究伏都教到底在做什么：

document.write('<iframe width="160" height="600" frameBorder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+encodeURI(html)+'"></iframe>');

document.write在执行时正在更改呈现的文档。它写入一个指定宽度和高度的iframe，其中包含变量html的源，编码为URI。html变量定义为字符串文本：

var html = "javascript:\"<body style='margin: 0;'><script src='http://www.googletagservices.com/tag/js/gpt.js'>googletag.pubads().set('page_url','"+window.location.href+"').definePassback('/80840/10.example.com_desktop_160x600', [160, 600]).display();<\/script></body>\"";

重要的是，html变量是一个字符串。

iframe的src属性指示浏览器使用包含在该属性中的URI指定的资源填充iframe。如果src属性使用http或https方案，浏览器将知道从该URL外部URL获取资源，并将该URL的响应注入iframe文档中。如果src属性是一个简单的JavaScript表达式，浏览器将计算该表达式并将结果注入到iframe中：

<p>iframe starts</p>
<iframe src="javascript:document.write(1+1)"></iframe>
<p>iframe ends</p>

(注意: StackOverflow防止在其代码段中执行iframe，因此在这里这是行不通的。)将其复制到JSFiddle以实时查看它。)

上面的JavaScript工作的原因是浏览器将从javascript: URI方案返回的字符串文本作为资源的内容。

​

<a href="javascript:'foo'">Page with content='foo'</a>

​

因此，html变量，即字符串，实际上是您的iframe的内容。您可以看到它包括一个body标记，它本身包含一个从广告服务器加载广告的script标记。

性能影响

需要关注的主要有三点:页面呈现时间、依赖于文档就绪状态的脚本的执行以及网络连接池。

1. 页面呈现时间这可能不是什么大事。假设您的页面上没有数百个这些标记，document.write本身不应该明显地减慢您的CSS计算和页面呈现时间。它可能比硬编码的标签慢，但它不太可能慢到足以让人注意到。
2. 执行其他脚本也没什么大不了的。iframe的内容与主页面的内容并行加载，类似于单独的浏览器选项卡单独加载的方式。如果iframe的src花了很长时间才加载(请参阅http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance和http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/)，以进一步讨论对onload时代的影响，这可能是个问题。但是，由于我们使用JavaScript字符串文字作为iframe的源，它不会显著影响iframe的onload触发时间，这意味着主文档的onload不会被延迟，这意味着您自己的脚本不会明显延迟。(例如http://jsfiddle.net/Palpatim/0b18vxkz/)。
3. 网络连接池--这与加载任何其他网络资源的方式是一样的。通过连线加载的东西越多，其他页面资源可用的带宽就越少。

结论

总之，我不会太担心异步广告标签会对您的页面产生什么影响。(只是不要错误地硬编码同步标记。)如果您真的很关心它，您可能会进一步延迟iframe内容的加载，方法是包装在超时中创建广告的函数调用。然而，这可能会违反你的广告网络的服务条款，所以要小心做类似的事情。