पेज डेटा में पते के लिए यूआरएल?

Question

हमारे पास एक जावास्क्रिप्ट विजेट है जो एक यूआरएल से डेटा लोड करता है।

राउंड-ट्रिप को कम करने के लिए मैं एक दूसरे HTTP अनुरोध से बचना चाहता हूं और डेटा को HTML पृष्ठ में रखना चाहता हूं।

यह बहुत अच्छा होगा अगर मैं जावास्क्रिप्ट विजेट को अपरिवर्तित छोड़ सकता हूं।

क्या मौजूदा HTML पृष्ठ से डेटा पढ़ने के लिए कोई URL योजना है?

उदाहरण: https://.... के बजाय इस dom://....

Answer 1

मैं डेटायूआर के लिए भी एक वकील हूं क्योंकि वे वेबपृष्ठों में डेटा एम्बेड करने के लिए सबसे पारदर्शी (क्लाइंट कोड-वार) तरीका हैं।

हालांकि, वे पहले छोटी छवियों और अन्य संसाधनों को एम्बेड करने के लिए उपयोग किए जाते थे जो कनेक्शन ओवरहेड और parallel download limitations of HTTP/1 के कारण प्रदर्शन में बाधा डालते थे। डेटाऑफ डेटा एन्कोडिंग के बाद नाज़ुक है क्योंकि डेटायूआई 30% increase in data size का एक (बॉलपार्क अनुमान) का कारण बन सकता है, हालांकि महत्वपूर्ण बिंदु जहां डेटाुरि मददगार होना बंद कर देता है, छोटी छवियों के आकार के आसपास होता है, जो आमतौर पर धारावाहिक डेटा के ऊपर परिमाण के आदेश होते हैं।

एक पृष्ठ अनुप्रयोग परिदृश्य के लिए यहां महत्वपूर्ण बिंदु यह है कि विचार करने के लिए एकल डेटा-फ़ेच राउंडट्रिप से अधिक है।

• एचटीएमएल ही (एम्बेडेड डेटा और हर के हर अलग सेट के लिए कैश नहीं किया जा सकता है केवल एक कैश की गई प्रतिलिपि के साथ:

  अन्यथा स्थिर HTML पर पेज की स्क्रिप्ट द्वारा उपयोग के लिए डेटा एम्बेड निम्नलिखित प्रभाव पड़ता है पृष्ठ का संस्करण।)

• पूरे पृष्ठ के कई संस्करणों को सर्वर पर जेनरेट किया जाना चाहिए, जिसमें डेटा प्राप्त करने का ज्ञान भी हो।
• रेखांकित डेटा उपयोगकर्ता को समझने योग्य समय तक पृष्ठ प्रतिपादन को अवरुद्ध कर सकता है (यह HTML के अंत में डेटा एम्बेड करके लगभग काम किया जा सकता है, लेकिन क्लाइंट स्क्रिप्ट निष्पादन को शायद पूरी तरह से इंतजार करना होगा, इस प्रकार सामान भी बनाना होगा शायद के रूप में अपने पहले से ही काम कर रहे कार्यान्वयन रखने
  • : एक लोडिंग सूचक कठिन लागू करने के लिए होगा प्रदर्शित)

  दूसरी ओर, राउंड ट्रिप खुद के बावजूद, एक अलग राउंड ट्रिप पर डेटा रखने,। यह

• क्ली के लिए अनुमति दें एनटीएस कैश किए गए एचटीएमएल और स्क्रिप्ट्स का उपयोग करने के लिए जो केवल वास्तविक संस्करण परिवर्तन पर रीफ्रेश की आवश्यकता होगी (इस उद्देश्य के लिए AppCache नामक एक असफल विनिर्देश था, अब प्रयोगात्मक Service Workers)
• उस HTML और स्क्रिप्ट को पूरी तरह से अनुमति दें स्थैतिक संपत्ति जिन्हें 'गूंगा' सीडीएन से सेवा दी जा सकती है जो क्लाइंट ब्राउज़र के तेज़ और करीब हैं और किसी भी सर्वर-साइड कोड

मेरे सभी दृश्यों में बड़ी जीत है , इसलिए मैं आपको डेटा एम्बेड करने की आवश्यकता पर गंभीरता से विचार करने की सलाह देता हूं, क्योंकि यह एक प्रारंभिक अनुकूलन हो सकता है जो बहुत दर्द और प्रदर्शन में वास्तविक कमी का कारण बन सकता है! खासकर क्योंकि एसपीडीवाई और अब HTTP/2 इन राउंड-ट्रिप और कनेक्शन-नंबर मुद्दों को हल करने के लिए पहले ही आ रहे हैं।

Answer 2

नहीं, लेकिन आपको data URIs, उपयोग कर सकते हैं कि अगर आपके लिए अनुकूल तरीका है। हालांकि बड़ी मात्रा में डेटा के लिए यह सबसे अच्छा विकल्प नहीं है।

Answer 3

मुझे यकीन नहीं है कि आपकी ज़रूरतों को पूरी तरह से पकड़ा गया है, zeroflagL उत्तर सही जवाब हो सकता है; विकल्प को छोड़ने से पहले संभवतः http://blog.teamtreehouse.com/using-data-uris-speed-website भी पढ़ें।

अन्यथा, हालांकि यह अपने जावास्क्रिप्ट को एक छोटे से अनुकूलन लग सकता है, विचार है कि एचटीएमएल 5 एक सुविधा बुलाया 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"> 

इसलिए, आपका जावास्क्रिप्ट मौजूदा 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 वस्तु में डेटा है, जो कुछ भी हो, डाल सकता है, और बाद में इसका इस्तेमाल करते हैं।

लेकिन इसके लिए आपको कोड बदलने की आवश्यकता है।