URL for addressing in page data?

Question

We have a JavaScript widget that loads data from a URL.

To reduce round trips, I would like to avoid a second HTTP request and put the data on an HTML page.

It would be great if I left the JavaScript widget unchanged.

Is there a URL scheme for reading data from the current HTML page?

Example: Instead of https://.... this dom://....

Answer 1

I am also a supporter of dataURI, as they are the most transparent (client) way to implement data embedding on web pages.

However, they were first used to embed small images and other resources that would impede performance due to connectivity issues as well as parallel HTTP / 1 download restrictions . The trade-off is delicate because the encoding data, as dataURI can cause (estimate ball) a 30% increase in data size , but the critical point is where dataURIs stop being useful around the size of small images, which are usually orders of magnitude higher than serialized data.

The critical point here for a single-page application scenario is that to view more than one sample to fetch data.

Embedding data for use by page scripts otherwise static HTML has the following consequences:

• HTML itself cannot be cached (only with a cached copy for each set of embedded data and each version of the page.)
• An entire page (multiple versions) must be generated on a server that also knows how to get data.
• Entered data can block the rendering of pages until the user perceives it (this can be done by embedding the data at the end of the HTML code, but client script execution may have to wait completely, such as displaying the loading indicator, it is more difficult to implement.)

On the other hand, storing data on a separate round trip, despite the journey itself, would be:

• Perhaps your already working implementation, as it is
• Allow clients to use cached HTML and scripts that only need to be updated when the version is actually changed (there was an unsuccessful specification called AppCache for this purpose, now replaced by experimental Service Workers )
• Allow this HTML and scripts to be fully static resources that can be served from dumb CDNs that are faster and closer to the client browser and do not need to query the database or run any server code

All of these are big victories in my opinion, so I recommend seriously considering the need for data implementation, because it can be an early optimization, which can lead to a lot of pain and an actual decrease in performance! Especially because SPDY and now HTTP / 2 are already coming to fix these problems with the return pass and number.

Answer 2

No, but you can use a data URI if this is an acceptable approach for you. This is not the best choice for large amounts of data.

Answer 3

I'm not sure I completely caught your needs, the answer of zeroflagL might be the right answer; perhaps read also http://blog.teamtreehouse.com/using-data-uris-speed-website before discarding the option.

Otherwise, although this may be slightly adaptable to your javascript, consider that HTML5 has a data block function , read about it at https://developer.mozilla.org/en/docs/Using_XML_Data_Islands_in_Mozilla :

Using this function, you can reduce rounding and place one or more data sets in an HTML page, in the case of namespaces, scripts are blocked as follows:

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

or

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

so your javascript can access data reading them from the current HTML page; .... example:

 <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

You can put the data, whatever it is, in the global window object and use it later.

But this requires changing the code.