iframe 非同期読み込み技術とパフォーマンス分析_JavaScript スキル
これはオリジナルの翻訳記事です。 元のアドレス。
私たちはサードパーティのコンテンツ、広告、プラグインを読み込むために 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
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
jQuery .val() が機能しない状況に効果的に対処する
Feb 20, 2024 pm 09:36 PM
タイトル: jQuery.val() が動作しない問題を解決する方法とコード例 フロントエンド開発では、ページ要素の操作に jQuery がよく使われます。その中でも、フォーム要素の値の取得または設定は、一般的な操作の 1 つです。通常、フォーム要素の値を操作するには jQuery の .val() メソッドを使用します。ただし、jQuery.val() が機能しない状況が発生し、問題が発生する可能性があります。この記事では、jQuery.val() を効果的に扱う方法を紹介します。
iframe のスクロール動作を監視する
Feb 18, 2024 pm 08:40 PM
iframe のスクロールを監視する方法には、特定のコード サンプルが必要です。iframe タグを使用して Web ページに他の Web ページを埋め込む場合、場合によっては、iframe 内のコンテンツに対して特定の操作を実行する必要があります。一般的なニーズの 1 つは、スクロールが発生したときに対応するコードを実行できるように、iframe のスクロール イベントをリッスンすることです。以下では、JavaScript を使用して iframe のスクロールを監視する方法を紹介し、参考として具体的なコード例を示します。 iframe 要素を取得する まず、必要なものがあります。
htmlの読み方
Apr 05, 2024 am 08:36 AM
HTML 自体はファイルを読み取ることができませんが、JavaScript を使用する (XMLHttpRequest、fetch())、サーバーサイド言語を使用する (PHP、Node.js)、サードパーティのライブラリを使用する (jQuery. get() 、axios、fs-extra)。
C# 委任とは何ですか? それによってどのような問題が解決されますか?
Apr 04, 2024 pm 12:42 PM
委任は、非同期プログラミングとイベント処理の問題を解決するために、オブジェクト間でメソッド ポインターを渡すために使用されるタイプセーフな参照型です。 非同期プログラミング: 委任により、メソッドを異なるスレッドまたはプロセスで実行できるようになり、アプリケーションの応答性が向上します。イベント処理: デリゲートはイベント処理を簡素化し、クリックやマウスの動きなどのイベントを作成して処理できるようにします。
WordPress でページのリダイレクトを防ぐにはどうすればよいですか?
Mar 05, 2024 am 09:33 AM
WordPress でページのリダイレクトを防ぐにはどうすればよいですか? Web サイト開発では、WordPress でページ非ジャンプ設定を実装したい場合があります。つまり、特定の操作中に、ページ全体を更新せずにページ コンテンツを更新できます。これにより、ユーザー エクスペリエンスが向上し、Web サイトがよりスムーズになります。次に、WordPress でページ非ジャンプ設定を実装する方法と具体的なコード例を紹介します。まず、Ajax を使用してページのジャンプを防ぐことができます。アヤックス
ウェブサイトの速度を向上させるための主要な最適化モードは、すべてのフロントエンド開発者がマスターする必要があります。
Feb 02, 2024 pm 05:36 PM
フロントエンド開発者の必需品: これらの最適化モードをマスターして、Web サイトをスムーズに作成しましょう。インターネットの急速な発展に伴い、Web サイトは企業のプロモーションとコミュニケーションのための重要なチャネルの 1 つになりました。パフォーマンスが良く、読み込みが速い Web サイトは、ユーザー エクスペリエンスを向上させるだけでなく、より多くの訪問者を惹きつけます。フロントエンド開発者として、いくつかの最適化パターンをマスターすることが不可欠です。この記事では、開発者が Web サイトをより適切に最適化できるように、一般的に使用されるフロントエンド最適化テクニックをいくつか紹介します。圧縮ファイル Web サイト開発で一般的に使用されるファイルの種類には、HTML、CSS、J などがあります。
HTMLに外部jsを導入する方法
Apr 11, 2024 am 06:18 AM
外部 JS ファイルを HTML に含めるには、<script> タグを使用して、読み込むファイルの URL を指定します。 type、defer、または async 属性を指定して、読み込みと実行の発生方法を制御することもできます。通常、<script> タグは、ページのレンダリングをブロックしないように、<body> セクションの最後に配置する必要があります。
PHP検索機能最適化ヒントの共有
Mar 06, 2024 am 11:12 AM
ユーザーは必要な情報を見つけるために検索ボックスをよく使用するため、PHP 検索機能は常に Web サイト開発において非常に重要な部分です。しかし、多くのWebサイトでは検索機能を実装する際に、効率の低さや検索結果が不正確になるなどの問題を抱えています。 PHP 検索機能の最適化に役立つように、この記事ではいくつかのヒントを共有し、具体的なコード例を示します。 1. 全文検索エンジンを使用します。従来の SQL データベースは、大量のテキスト コンテンツを処理する場合の効率が低下するため、Elasticsearch、Solr などの全文検索エンジンを使用することをお勧めします。
