मेरे पास एक सादा वेबपृष्ठ है जो इसकी अधिकांश सामग्री को AJAX कॉल के माध्यम से लोड करता है जो बड़ी मात्रा में जटिल HTML देता है। जब मैं डीओएम में पुनर्प्राप्त एचटीएमएल डालता हूं, तो यह थोड़ी देर के लिए ब्राउज़र को अपंग करता है (क्रोम पर 5 सेकंड और एज पर 35 सेकंड के बीच)।

उदाहरण मैं HTML को DOM में कैसे जोड़ता हूं:

$.ajax("example.php").done(function (response) {
    const contentElement = document.getElementById('results');
    contentElement.innerHTML = response;
});

मैं आवेदन की जटिलता के कारण JSON को वापस करने और इसे हर कीमत पर HTML में परिवर्तित करने से बचना चाहता हूं।

अजीब बात यह है कि इन्सर्ट किए गए HTML के पहले से ही दिखाई देने के कुछ समय बाद ब्राउज़र अपंग हो जाता है। नीचे दी गई टाइमलाइन देखें, जहां मैं अपनी स्क्रीन पर एचटीएमएल देख सकता हूं (उचित स्टाइल के साथ) ~ ५ सेकंड लंबे पार्स एचटीएमएल इवेंट होने से पहले।

Timeline performance

मैं HTML को DOM में पार्स करने और जोड़ने की गति कैसे बढ़ाऊं?

संपादित करें: मैंने कई ब्राउज़रों और HTML को इंजेक्ट करने के कई तरीकों की कोशिश की है (दस्तावेज़फ्रैगमेंट, आंतरिक HTML, jQuery .html (), संलग्न करें ())। सभी विधियां लगभग उतनी ही धीमी हैं।

Edit2: सटीक HTML इंजेक्शन इस सार में देखा जा सकता है: https://gist.github.com/Rhinni /3032e74bab0de8f40e08a3392c0243b1

1
Sander Muller 26 मार्च 2018, 19:53

1 उत्तर

सबसे बढ़िया उत्तर

मैंने ट्रेवर और ज़ेर00ने के उत्तरों की मदद से इस मुद्दे को ठीक किया, लेकिन यह पूरी तरह से कुछ अलग था।

समस्या Laravel Debugbar के कारण हुई थी, जो डिफ़ॉल्ट रूप से AJAX अनुरोधों को ट्रैक करता है, और इसके लिए प्रतिक्रिया को पार्स करता है डिबगिंग उद्देश्यों। डीबगबार कॉन्फ़िगरेशन में AJAX अनुरोध ट्रैकिंग को अक्षम करने से समस्या हल हो गई।

1
Sander Muller 4 अप्रैल 2018, 20:49