ページデータのアドレスは？

Question

URLからデータを読み込むJavaScriptウィジェットがあります。

往復を減らすために、2回目のHTTPリクエストを避け、HTMLページにデータを入れたいと思います。

JavaScriptウィジェットを変更しないままにしておくといいですね。

現在のHTMLページからデータを読み取るためのURLスキームはありますか？

例：代わりにhttps://....このdom://....

Answer 1

私はdataURIの主張者でもあり、ウェブページにデータを埋め込むための最も透過的な（クライアントコード通りの）方法です。

しかし、接続オーバーヘッドのためにパフォーマンスを低下させる小さな画像やその他のリソースを埋め込むために初めて使用されました。また、parallel download limitations of HTTP/1も含まれていました。 dataURIが30％のincrease in data sizeの（野球場推定）を引き起こす可能性があるので、データのエンコーディングが慎重であるため、このトレードオフは繊細ですが、dataURIが役に立たなくなる重要な点は、通常、

ここで重要なのは、1ページのアプリケーションシナリオでは、考慮する単一のデータフェッチ往復以上があることです。

• HTML自体埋め込まれたデータと、すべてのすべての異なるセットに対してのみキャッシュされたコピーで（キャッシュすることはできません。そうでない場合は、静的なHTMLページ上のスクリプトで使用するためにデータを埋め込む

  は、次のような意味を持っていますページのバージョン。）

• （複数のバージョンの）ページ全体は、データを取得する方法も知っているサーバーで生成する必要があります。
• インライン化されたデータは、ユーザーが知覚可能な時間までページレンダリングをブロックする可能性があります（HTMLの最後にデータを埋め込むことで回避できますが、クライアントスクリプトの実行は完全に待たなければならないため、実施するのは難しいのローディングインジケーターを表示する）一方

、往復自体にもかかわらず、別のラウンドトリップにデータを保持し、なります。

• をおそらくあなたすでに作業の実装を保ちますそれは
• を許可する実際にバージョンを変更するだけでリフレッシュする必要があるキャッシュされたHTMLとスクリプトを使用することができます（この目的のためにAppCacheと呼ばれていた仕様の不具合がありました）。
• HTMLとスクリプトを完全により高速でクライアントブラウザに近く、データベースにクエリを実行する必要もなく、サーバー側のコードを実行する必要もない「ダム（dumb）」CDNから配信できる静的資産。

これらはすべて私の見解では大きな勝利ですデータを埋め込む必要性を真剣に検討することをお勧めします。初期の最適化であるため、多くの痛みやパフォーマンスの低下を招く可能性があります。特に、SPDYと今やHTTP/2がこれらの往復および接続番号の問題に対処するために既に導入されているためです。

Answer 2

のいいえ、それはあなたのために実行可能なアプローチだ場合は、data URIsを使用することができます。しかし、それは大量のデータのための最良の選択ではありません。

Answer 3

私はあなたのニーズを完全に把握しているかどうかはわかりませんが、zeroflagLの答えは正解かもしれません。オプションを破棄する前に http://blog.teamtreehouse.com/using-data-uris-speed-websiteも読んでください。

あなたはラウンドトリップを削減し、一つ以上を置くことができ、この機能を活用する：それはあなたのJavaScriptに少し適応を取るかもしれませんが

そうでない場合は、HTML5がdata blocks がhttps://developer.mozilla.org/en/docs/Using_XML_Data_Islands_in_Mozillaでそれについて読むと呼ばれる機能を持っていることを考えますにケース内のHTMLページへのデータセットは、スクリプトブロックにこのようなを名前空間：

<script id="purchase-order" type="application/xml"> 
<purchaseOrder xmlns="http://entities.your.own.domain/PurchaseOrderML"> 

またはこの

<script id="another-set-of-data" type="application/xml"> 
<dataSet xmlns="http://entities.your.own.domain/DataSetML"> 

したがって、JavaScriptは現在のHTMLページからデータを読み取ることができます。 ....例：

<script> 
function runDemo() { 
    var orderSource = document.getElementById("purchase-order").textContent; 
    var parser = new DOMParser(); 
    var doc = parser.parseFromString(orderSource, "application/xml"); 
    var lineItems = doc.getElementsByTagNameNS("http://entities.your.own.domain/PurchaseOrderML", "lineItem"); 
    var firstPrice = lineItems[0].getElementsByTagNameNS("http://entities.your.own.domain/PurchaseOrderML", "price")[0].textContent; 
    document.body.textContent = "The purchase order contains " + lineItems.length + " line items. The price of the first line item is " + firstPrice + "."; 
} 
</script> 

Answer 4

あなたはグローバルwindowオブジェクトで、それが何であれ、データを入れて、後でそれを使用することができます。

ただし、コードを変更する必要があります。