jQuery और डोम IE8

Question

में हेरफेर प्रदर्शन जारी करना

मैं JQuery में अपने काम पर एक मॉड्यूल विकसित किया है, यह मूल रूप से निम्नलिखित कार्यक्षमता

• सेल स्तर संपादित
• पंक्ति स्तर संपादित
• के साथ एक मेज है n पंक्तियों ड्रॉप स्थिति
• दिखाएँ/छुपाएँ कॉलम बदलने के लिए
• स्तंभ का आकार बदलने

हर चीज नवीनतम ब्राउज़र जैसे एफएफ 9.0, आईई 9 और क्रोम, पर ठीक काम करती है लेकिन तालिका में पंक्तियों की संख्या बढ़ने के साथ IE8 और FF3.6 जैसे पुराने ब्राउज़र में पृष्ठ के प्रदर्शन में उल्लेखनीय रूप से कम हो जाता है। मैंने jQuery और DOM मैनिपुलेशन से कई अनुकूलन की कोशिश की है लेकिन अभी भी प्रदर्शन पर कोई प्रभाव नहीं है। कोई विचार अगर मुझे प्रदर्शन को बेहतर बनाने के लिए कुछ या कुछ टिप याद आ रही है यानी स्वीकार्य स्तर पर।

मैंने किसी भी प्लगइन का उपयोग नहीं किया है, सब कुछ मेरा कस्टम कार्यान्वयन है। जावास्क्रिप्ट फ़ाइल काफी बड़ी है और मैं कुछ सामान्य अच्छे प्रथाओं और सुझावों की तलाश में हूं।

Answer 1

बड़े HTML पृष्ठों के साथ प्रदर्शन में सुधार करने के दो प्रमुख तरीके हैं - पृष्ठ की संख्या को कम करने और हैंडलर की संख्या को कम करने के लिए।

1. कम पेज की संख्या reflows

हर बार जब आप डोम में बदलाव करते हैं, यह अपने आप में पुनः बनाने की जरूरत है। यह एक रिफ्लो है। इन्हें अपने सभी डोम मैनिप्लेशंस के साथ स्ट्रिंग या डोम खंड बनाकर न्यूनतम रखें, फिर इसे अपने पृष्ठ में डालें। यह केवल एक रिफ्लो ट्रिगर करेगा। उदाहरण के लिए, यदि आप कोई तालिका जोड़ रहे हैं, तो उस तालिका में टेक्स्ट के साथ पूरी तालिका बनाएं, फिर उसे एक ही ऑपरेशन में डालें।,

var line = $('<tr><td>Some Data</td></tr>'); 
line.css('color','red'); 
table.append(line); 

फिर जब टुकड़ा पूरा हो गया है में जोड़ें:

var table = $('<table></table'); 

आप मानक तरीकों से अपने टुकड़ा में हेरफेर कर सकते हैं:

JQuery आप इस तरह एक डोम टुकड़ा बनाने की अनुमति देता एक ही चरण में डोम:

$('body').append(table); 

आप केवल एक रिफ्लो ट्रिगर करेंगे और प्रक्रिया होगी तीव्रता के आदेश तेजी से हो।

2. संचालकों

की संख्या कम आप प्रत्येक पंक्ति पर नियंत्रण का एक बहुत कुछ है, तो उस संचालकों का एक बहुत है। इसके बजाय केवल एक हैंडलर बनाएं और इसे दस्तावेज़ रूट पर संलग्न करें, फिर जब इसे खोज करने के लिए लक्षित विशेषता का निरीक्षण किया जाए तो क्या करना है। JQuery में आप इसे करने के लिए नए "ऑन" हैंडलर का उपयोग कर सकते हैं, या फिर पुराने "लाइव" स्टाइल हैंडलर का उपयोग कर सकते हैं।

उदाहरण के लिए

:

$('table td').on('click', function() { 
    //do work here 
}); 

केवल एक हैंडलर बनाया जाएगा जो टीडी क्लिक ईवेंट के सभी संभाल लेंगे।

इन दोनों को करें और आपको नाटकीय रूप से बेहतर प्रदर्शन देखना चाहिए।

Answer 2

बुरी खबर यह है कि आप वास्तव में ऐसा नहीं कर सकते हैं क्योंकि यह ब्राउज़र में उपयोग किए जाने वाले जावास्क्रिप्ट इंजन पर निर्भर करता है।

यदि यह आपके लिए एक विकल्प है, तो IE8 के लिए Google के क्रोमफ़्रेम का प्रयास करें, लेकिन ऐसी सार्वजनिक वेबसाइट पर जो संभवतः एक बहुत अच्छा समाधान नहीं है। लेकिन यह कॉर्पोरेट वातावरण में हो सकता है जब उपयोगकर्ता आसानी से सॉफ्टवेयर अपडेट कर सकते हैं।

आप तालिका ऑन-द-मक्खी रेंडर करने के लिए कोशिश कर सकते:

Ao आप अपनी तालिका मिला है और आप (ajax के माध्यम से या pullable) जावास्क्रिप्ट में जानकारी के साथ एक सरणी मिल गया, साथ ही आप आप जहां के बारे में जानकारियां मिल गया तालिका (पंक्ति) में हैं और तालिका कितनी देर तक है (अधिकतम)।

फिर एक तालिका बनाएं जो व्यूपोर्ट जितनी बड़ी हो, शायद थोड़ा बड़ा हो। व्यूपोर्ट के ऊपर और नीचे सबकुछ एक बड़े <div> या शीर्षतम व्यूपोर्ट पंक्ति से पहले पंक्तियों या पंक्तियों की ऊंचाई तक की गई किसी भी चीज से संभाला जाता है।

इस तरह से किसी भी समय केवल बहुत सीमित संख्या में डोम-नोड मौजूद हैं। यह संभवतः प्रदर्शन में सुधार कर सकता है।

जब उपयोगकर्ता स्क्रॉल तालिका कक्षों को हटाता है जो अब व्यूपोर्ट में नहीं होते हैं (और उस ऊंचाई के संबंधित व्हाइटस्पेस ब्लॉक में अपनी ऊंचाई जोड़ते हैं) और तालिका कक्षों को जोड़ते हैं जो ताजा रूप से व्यूपोर्ट में आते हैं (उस तरफ व्हाइटस्पेस से ऊंचाई को हटाते हैं)।