ホームページ > 記事 > ウェブフロントエンド > iframe 非同期読み込み技術とパフォーマンス分析_JavaScript スキル
iframe 非同期読み込み技術とパフォーマンス分析_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 18:04:341084ブラウズ
これはオリジナルの翻訳記事です。 元のアドレス。
私たちはサードパーティのコンテンツ、広告、プラグインを読み込むために iframe をよく使用します。 iframe が使用されるのは、メイン ページと並行してロードでき、メイン ページをブロックしないためです。もちろん、iframe の使用には長所と短所があります。Steve Souders は自身のブログで次のように説明しています: Iframe を控えめに使用する:
- iframe はメイン ページの onload イベントをブロックします
- メイン ページと iframe は同じ接続プールを共有します
メイン ページのオンロードのブロックは、これら 2 つの問題の中で最もパフォーマンスに影響を与える側面です。一般的に、オンロード時間はできるだけ早くトリガーされるようにしたいと考えていますが、一方ではユーザーがそれを経験しており、さらに重要なことに、Google は Web サイトの読み込み速度をスコア化しています。ユーザーは IE と FF の Google ツールバーを使用して、次のことを行うことができます。時間を計ります。
では、ページのパフォーマンスを向上させるために、メイン ページの onload イベントをブロックせずに iframe をロードするにはどうすればよいでしょうか?
この記事では、iframe をロードする 4 つの方法について説明します。通常の iframe、onload 後の iframe のロード、setTimeout() iframe、および iframe の非同期ロードです。 IE8 のタイムラインを使用して、各メソッドの読み込み結果を表示します。動的非同期読み込み方法のパフォーマンスが最も優れているため、動的非同期読み込み方法にもっと注意を払うことをお勧めします。さらに、Friendly iframe (フレンドリー iframe) テクノロジーもあります。これは iframe 読み込みテクノロジとはみなされないかもしれませんが、ブロックせずに読み込まれるため、iframe を使用する必要があります。
通常の方法を使用して iframe をロードします。
これはよく知られた通常のロード方法であり、ブラウザの互換性の問題はありません。
<script> <br>function setIframeSrc() { <br>var s = "path/to/file"; <br>var iframe1 = document.getElementById('iframe1'); <br>if ( - 1 == navigator.userAgent.indexOf("MSIE")) { <br>iframe1.src = s; <br>} else { <br>iframe1.location = s; <br>} <br>} <br>setTimeout(setIframeSrc, 5); <br></script>
在除了IE8以外的所有浏览器中会有如下表现：
iframe会在主页面onload之前开始加载
iframe的onload事件会在iframe的内容都加载完毕之后触发
iframe不会阻塞主页面的onload事件(IE8除外)
为什么不会阻塞主页面的onload呢(IE8除外)？因为setTimeout()
当iframe加载的时候，浏览器会显示忙碌状态
下面是时间线图
因为IE8的问题，这种技术就不适合很多网站了。如果有超过10%的用户使用IE8,十分之一的用户体验就会差。你会说那也只是比普通加载差一点点，其实普通加载性能上也不差。onload事件对于10%的用户来说都更长。。。。额，你自己考虑吧。但是最好在看了下面这个很赞的异步加载方法之后再决定吧。
我在参加Velocity 2010的时候，Meebo的两个工程师(@marcuswestin and Martin Hunt)做了一个关于他们的Meebo Bar的演讲。他们使用iframe来加载一些插件，并且真正做到了无阻塞加载。对于有的开发者来说，他们的做法还比较新鲜。很赞，超级赞。但是一些原因导致这种技术没有得到相应的关注，我希望这篇blog能把它发扬光大。
<script> <br>(function(d) { <br>var iframe = d.body.appendChild(d.createElement('iframe')), <br>doc = iframe.contentWindow.document; <br>// style the iframe with some CSS <br>iframe.style.cssText = "position:absolute;width:200px;height:100px;left:0px;"; <br>doc.open().write('<body onload="' + 'var d = document;d.getElementsByTagName(\'head\')[0].' + 'appendChild(d.createElement(\'script\')).src' + '=\'\/path\/to\/file\'">'); <br>doc.close(); //iframe onload event happens <br>})(document); <br></script>
神奇的地方就在:这个iframe一开始没有内容，所以onload会立即触发。然后你创建一个script元素，用他来加载内容、广告、插件什么的，然后再把这个script添加到HEAD中去，这样iframe内容的加载就不会阻塞主页面的onload！你应该看看他在个浏览器中的表现：
iframe会在主页面onload之前开始加载
iframe的onload会立即触发，因为iframe的内容一开始为空
主页面的onload不会被阻塞
为什么这个iframe不会阻塞主页面的onload？因为
如果你不在iframe使用onload监听，那么iframe的加载就会阻塞主页面的onload
当iframe加载的时候，浏览器终于不显示忙碌状态了（非常好）
我的测试页给出下面的时间线：
フレンドリーな iframe 読み込み
- 最初に iframe を作成します。 src を同じドメイン名の静的 HTML ファイルに設定します
- この iframe で、js 変数 inDapIF=true を設定して、広告がこの iframe に読み込まれたことを伝えます。
- この iframe でスクリプト要素を作成し、広告の URL を src として追加し、通常の広告コードと同様に読み込みます。
- 広告が読み込まれたら、広告に合わせて iframe サイズをリセットします
- この方法にはブラウザの互換性の問題もありません。
著者: BeiYuu