Javascript 页面数据中地址的URL?
我们有一个JavaScript小部件,它从URL加载数据 为了减少往返,我希望避免第二个HTTP请求,并将数据放入HTML页面 如果我可以保持JavaScript小部件不变,那就太好了 是否有从当前HTML页面读取数据的URL方案Javascript 页面数据中地址的URL?,javascript,url,dom,Javascript,Url,Dom,我们有一个JavaScript小部件,它从URL加载数据 为了减少往返,我希望避免第二个HTTP请求,并将数据放入HTML页面 如果我可以保持JavaScript小部件不变,那就太好了 是否有从当前HTML页面读取数据的URL方案 示例:而不是https://....此dom://....不,但如果这是一种可行的方法,您可以使用。不过,对于大量数据而言,这并不是最佳选择。我不确定是否完全满足您的需求,zeroflagL答案可能是正确的答案;可能也读过 在放弃该选项之前 否则,尽管对JavaScr
示例:而不是
https://....
此dom://....
不,但如果这是一种可行的方法,您可以使用。不过,对于大量数据而言,这并不是最佳选择。我不确定是否完全满足您的需求,zeroflagL答案可能是正确的答案;可能也读过
在放弃该选项之前
否则,尽管对JavaScript可能会有一点适应,但请考虑HTML5具有一个称为 请阅读:
利用此功能,您可以减少往返,并将一个或多个数据集放入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>
函数runDemo(){
var orderSource=document.getElementById(“采购订单”).textContent;
var parser=新的DOMParser();
var doc=parser.parseFromString(orderSource,“application/xml”);
var lineItems=doc.getelementsbytagnames(“http://entities.your.own.domain/PurchaseOrderML“,”行项目“);
var firstPrice=lineItems[0]。GetElementsByTagnames(“http://entities.your.own.domain/PurchaseOrderML“,”价格“[0]。文本内容;
document.body.textContent=“采购订单包含“+lineItems.length+”行项目。第一行项目的价格为“+firstPrice+”;
}
您可以将数据(无论它是什么)放在全局窗口
对象中,并在以后使用它
但这需要您更改代码。我也是DataURI的拥护者,因为它们是实现在网页中嵌入数据的最透明(客户端代码方面)的方法 但是,它们首先用于嵌入小图像和其他资源,这些资源会由于连接开销和网络开销而影响性能。权衡是微妙的,因为将数据编码为DataURI可能会导致30%的(大致估计),但是DataURI不再有用的关键点是小图像的大小,通常比序列化数据大几个数量级
一个单页应用场景的关键点是,要考虑的不仅仅是单个数据获取往返。 将页面脚本使用的数据嵌入到其他静态HTML中具有以下含义:
- HTML本身不能被缓存(只能为每个不同的嵌入数据集和页面的每个版本缓存一个副本)
- 整个页面的(多个版本)必须在一台也知道如何获取数据的服务器上生成
- 内联数据可能会在用户可感知的时间内阻止页面呈现(这可以通过在HTML末尾嵌入数据来解决,但客户端脚本执行可能需要完全等待,因此也使得显示加载指示器等内容更难实现)
- 可能会保持您已经在工作的实现原样
- 允许客户端使用缓存的HTML和脚本,这些脚本只需要在实际版本更改时进行刷新(为此目的调用了一个失败的规范,现在已被实验版本所取代)
- 允许HTML和脚本成为完全静态的资产,可以从更快、更接近客户端浏览器且不需要查询数据库或运行任何服务器端代码的“哑”CDN提供服务
所有这些都是我认为的大赢家,所以我建议你认真考虑嵌入数据的必要性,因为这可能是一个早期的优化,这会导致很多痛苦和实际的性能下降。特别是因为SPDY和now已经开始解决这些往返和连接号码问题。HTTP的一大优势是大量缓存。这是一个可以缓存的GET吗?如果是这样,就没有必要“避免第二个HTTP请求”,因为它将被浏览器缓存并立即返回。是的,你说得对。我永远都喜欢缓存,因为验证(例如e-Tags)将再次执行第二个http请求。你的评论很好。如果您将哈希和编码到URL中,我可以永远缓存数据。