डोम संशोधनों के लिए कुशल जावास्क्रिप्ट

कहें, मेरे पास एक HTML फ़ाइल है जिसे मैं जावास्क्रिप्ट का उपयोग करके संसाधित करना चाहता हूं। उदाहरण के लिए:डोम संशोधनों के लिए कुशल जावास्क्रिप्ट

span या div रैपर की तरह कुछ डोम तत्वों, जोड़ें।
बिट फ़ॉन्ट आकार, लाइन-ऊंचाई इत्यादि जैसे दस्तावेज़ को थोड़ा सा बदलें,
 इकाइयों को जोड़ने के लिए एक हाइफेंटर का उपयोग करें।

ऐसा करने का सबसे प्रभावी तरीका क्या होगा, यानी मैं इसे न्यूनतम मात्रा में रिफ्लो के साथ करना चाहता हूं।

आदर्श मामले में पहले लेआउट से पहले जेएस-कोड चलाना होगा। क्या यह संभव है? मुझे पता है, पृष्ठ को प्रदर्शित करने से पहले महंगा स्क्रिप्ट निष्पादित करना आम तौर पर एक बुरा विचार है, जिससे पृष्ठ कुछ समय के लिए खाली दिखाई देगा और यह वास्तव में एक बुरा अनुभव है। हालांकि, मुझे ऑफ़लाइन काम करने के लिए इसकी आवश्यकता होगी और यह मेरे प्रोजेक्ट के लिए कोई मुद्दा नहीं होगा।

या, क्या एक गुच्छा में सभी डोम संशोधनों को करने का कोई तरीका है, यानी सभी बदलावों के समाप्त होने के बाद ट्रिगर होने का एक रिफ्लो है?

स्रोत

2012-07-07 Albus Dumbledore

ऐसे कई तरीके हैं। उन सभी के साथ प्राथमिक लक्ष्य यह है कि आप एक एकल - या कम से कम जितना संभव हो सके - रिफ्लो/पेंटेंट्स का कारण बनते हैं।

ऑफ DOM एलीमेंट

आप डोम को जोड़कर बिना तत्वों के साथ काम कर सकते हैं, और फिर बस सब कुछ सेट है सब कुछ एक साथ जोड़ देते हैं।

इसका एकमात्र मुद्दा यह है कि यदि आपके कोड को ऑफ़सेट आयामों को संदर्भित करने की आवश्यकता है, क्योंकि अभी तक डोम में मौजूद तत्वों में कोई तत्व नहीं है।

var container = document.createElement('section'); //not in the DOM yet 
//do some extensive work here to prepare the doc 
document.body.appendChild(container); //now we go to the DOM, causing a single re-paint

डॉक्टर टुकड़ा

एक और अधिक औपचारिक रूप दिया, और संभव सुधार, इस विषय पर भिन्नता document fragments है, जो एक प्रदर्शन लाभ (जाहिरा तौर पर) लाने होगा। वे प्रभावी रूप से एक दूसरे, अलग डोम हैं जिनके पास कोई प्रदर्शन नहीं है।

स्ट्रिंग

शायद इन सब का सबसे तेज एक स्ट्रिंग के रूप में अपने दस्तावेज़ बनाने के लिए किया जाएगा। स्पष्ट निहितार्थ यह है कि आप उस पर डीओएम विधियों का उपयोग नहीं कर सकते हैं, लेकिन यदि आप स्ट्रिंग हैंडलिंग और REGEX'ing (निश्चित रूप से HTML पर आदर्श नहीं) हैं, तो विचार करने योग्य हो सकते हैं।

अंत में, यदि गति सार का है और आपके पास बहुत कम गणना या स्ट्रिंग-हैंडलिंग है, तो आप वेब श्रमिकों का उपयोग करना चाहेंगे। ये सीधे डीओएम से बात नहीं कर सकते हैं, लेकिन आप उन्हें कार्यों को आउटसोर्स कर सकते हैं और, महत्वपूर्ण रूप से, वे अलग थ्रेड पर असीमित रूप से काम करते हैं।

स्रोत

2012-07-07 10:46:09 Utkanos

मेरा मानना है कि यह सामग्री को फिर से शुरू करने के लिए निर्णय लेने के लिए ब्राउज़र पर निर्भर है। और जब तक स्क्रिप्ट निष्पादन समाप्त नहीं हो जाता तब तक वे ऐसा करने की कोशिश नहीं करते हैं। यहां ध्यान रखना महत्वपूर्ण है कि उदाहरण के लिए, जब आप दस्तावेज़ निकाय में div जोड़ते हैं तो यह डीओएम पुनर्मूल्यांकन का कारण बनता है। और इसके लिए आप तत्वों को जोड़ने के लिए दस्तावेज़ फ्रेगमेंट का उपयोग कर सकते हैं और फिर स्वयं को शरीर में विभाजित कर सकते हैं। यद्यपि यदि आपके मामले में ऐसा होता है कि आपको विभिन्न तत्वों में 1 तत्व जोड़ना होगा तो इससे ज्यादा मदद नहीं मिलेगी।

documentFragment पर अतिरिक्त पढ़ने: http://ejohn.org/blog/dom-documentfragments/

स्रोत

2012-07-07 10:42:09

-1

मुझे लगता है कि आप पृष्ठ लोड होने से पहले शैली या डीओएम तत्वों पर काम नहीं कर सकते हैं। सबसे पहले लोड किया गया तो आप पेज को ट्विकिंग शुरू करते हैं। मैं पृष्ठ को छिपकर इसे दिखाऊंगा और दिखाऊंगा। तरीके को छिपाने के लिए:

सब कुछ लोड के बाहर स्क्रीन एक्स/Y निर्देशांक, तो यू यह करने के लिए 0,0
DIV जो सामग्री पेज डेटा शैली है डाल: प्रदर्शन: कोई नहीं या visibility: hidden http://www.w3schools.com/css/css_display_visibility.asp जांच के लिए यहाँ विवरण।
यह आपको 1 पिक्सेल आईफ्रेम के अंदर पृष्ठ लोड कर सकता है, क्योंकि आप मूल पृष्ठ स्वामी के बच्चे पृष्ठ पर नियंत्रण रखते हैं। अपने tweaks आकार बदलने के बाद iframe आकार, इसके फ्रेम छुपाएं।
जेड इंडेक्स का उपयोग करें और गैर-पारदर्शी डीआईवी काला या सफेद पूर्ण आकार डालें जो सब कुछ छुपाता है। इसे तैयार करें जब आप

चुनें कि आपकी शैली के अनुरूप क्या बेहतर है।

स्रोत

2012-07-07 10:46:17

यहां तक कि अगर यह एक सच में वर्ष जवाब मैं अभी भी करने के लिए इस वजह से w3schools.com लिंक नहीं करने की सलाह देते है: http://www.w3fools.com/ :) –

से documentElement हटाएं, इसे संशोधित करें और इसे document पर वापस जोड़ें।

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>...</title>   
    </head> 
    <body> 
     <script type='text/javascript'> 
var docElem = document.documentElement, 
    parentNode = docElem.parentNode, 
    nextSibling = docElem.nextSibling; 
parentNode.removeChild(docElem); // reflow 
// ... 
docElem.lastChild.appendChild(docElem.ownerDocument.createElement('hr')); 
// ... 
parentNode.insertBefore(docElem, nextSibling); // reflow 
     </script> 
    </body> 
</html>

यह दो रिफ्लोज़ और शून्य से दो अतिरिक्त पश्चाताप करता है।

jsFiddle

स्रोत

2012-07-07 11:32:58 Saxoier

डोम संशोधनों के लिए कुशल जावास्क्रिप्ट

उत्तर

संबंधित मुद्दे