Question

关于如何在onload之后加载iframe以及不延迟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（我理解这不是一个好习惯）来插入一个irc，其src不是一个URL而是某种Javascript voodoo。我担心如果广告代码硬编码到页面上，它会如何影响页面渲染时间。

我的偏好是异步加载我的自定义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);
});

但是当我这样做时，没有广告呈现。查看“网络”选项卡以检查请求，我可以看到请求了gpt.js，但广告未呈现。

所以我的问题是：如何在不牺牲页面渲染时间的情况下实现此广告代码？我希望用户首先看到内容，然后广告就可以加载并花费自己的甜蜜时间。

Answer 1

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

实际上发生了什么？

第一个是他们所谓的同步标签。他们的建议是，这个＆＃34;不应该是硬编码的。如果放在广告服务器中或作为另一个获利合作伙伴的回传，效果最佳。＆＃34;：

广告服务器（例如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 voodoo。我担心如果广告代码硬编码到网页上，该广告代码会如何影响页面呈现时间。

你是正确的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处获取资源，并在iframe文档中注入该URL的响应。如果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方案返回的字符串文字视为资源的内容：

＆＃13;

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

＆＃13;

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

绩效影响

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

页面渲染时间这可能不是什么大问题。假设您的页面上没有数百个这样的标记，document.write本身不应该明显减慢CSS计算和页面渲染时间。它可能比硬编码标签慢，但它不太可能让人注意不够慢。
执行其他脚本也不是什么大不了的事。 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触发的时间，这意味着主要文档和＆＃39} ＃39; s onload不会被延迟，这意味着你自己的剧本不会被明显延迟。（例如http://jsfiddle.net/Palpatim/0b18vxkz/）。
网络连接池这与加载任何其他网络资源的方式相同。通过线路加载的内容越多，其他页面资源的可用带宽就越少。

结论

总而言之，我不会太担心异步广告代码对您网页的影响。（只是不要错误地对同步标签进行硬编码。）如果你真的很关心它，你可以通过包装在超时中创建广告的函数调用来进一步延迟加载iframe内容。但是，这可能违反了您广告网络的服务条款，因此请务必小心这样做。

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

1 个答案:

实际上发生了什么？

绩效影响

结论