IE8

2009-04-29 7 views
6

में क्लाइंटविड्थ प्रदर्शन मेरे पास कुछ विरासत जावास्क्रिप्ट है जो एक टेबल के tfoot/thead को फ्रीज करता है और शरीर को स्क्रॉल करने देता है, यह आईई 8 को छोड़कर ठीक काम करता है।IE8

मैंने क्लाइंट को पढ़ने के लिए समस्या का पता लगाया है tfoot/thead में किसी सेल कीविड्थ संपत्ति ... यानी 6/7 और फ़ायरफ़ॉक्स 1.5-3 में क्लाइंटविड्थ संपत्ति को पढ़ने के लिए लगभग 3ms लगते हैं ... IE8 में यह खत्म हो जाता है 200ms और लंबा जब तालिका में कोशिकाओं की संख्या में वृद्धि हुई है।

क्या यह ज्ञात बग है? क्या कोई काम आसपास या समाधान है?

उत्तर

2

मैं कोई दस्तावेज नहीं ढूंढ पाया जो यह ज्ञात बग है। प्रदर्शन को बेहतर बनाने के लिए, क्लाइंटविड्थ संपत्ति कैश क्यों न करें और समय-समय पर कैश अपडेट करें? आईई आप कोड था, तो:

कि
var someValue = someElement.clientWidth + somethingElse; 

बदलें:

// Note the following 3 lines use prototype 
// To do this without prototype, create the function, 
// create a closure out of it, and have the function 
// repeatedly call itself using setTimeout() with a timeout of 1000 
// milliseconds (or more/less depending on performance you need) 
var updateCache = function() { 
    this. clientWidthCache = $('someElement').clientWidth; 
}; 
new PeriodicalExecuter(updateCache.bind(this),1); 

var someValue = this.clientWidthCache + somethingElse 
0

आपकी समस्या कुछ और है (और न केवल clientwidth कॉल) से संबंधित हो सकता है: अपने को अपडेट करने में/आकार बदलने anyhting अपने डोम में हैं इस समारोह को बुलाते समय?

आपका ब्राउज़र IE8 पर busy doing reflow हो सकता है, इस प्रकार क्लाइंटविड्थ धीमा हो सकता है?

0

आईई 8 में आईई संस्करणों के बीच स्विच करने की क्षमता है और एक संगतता मोड भी है। क्या आपने संगतता मोड में स्विच करने का प्रयास किया है? क्या इससे कोई फर्क पड़ता है?

+0

हाँ संगतता मोड में स्विच करने से यह बेहतर प्रदर्शन करता है, हालांकि यह मेरे यूआई के अन्य हिस्सों को तोड़ता है क्योंकि यह आईई 7 की तरह बिल्कुल प्रस्तुत नहीं करता है। एक समाधान की उम्मीद कर रहा था जिसमें संगतता का उपयोग शामिल नहीं था, हालांकि यह एकमात्र विकल्प हो सकता है। – Element

+0

मैं यह नहीं कह रहा हूं कि यह आपके मामले में समस्या है, लेकिन पिछली बार जब मैंने आईई 7 और आईई 8 के बीच विसंगतियों को प्रस्तुत किया था तो मुझे पता चला कि मेरे कोड विशेष रूप से एचटीएमएल/सीएसएस में बग थी। संगतता मोड समस्या को हल करने लग रहा था लेकिन मैं इसे स्वीकार नहीं करना चाहता था। तो मैं शायद वैधकर्ताओं के माध्यम से कोड चलाने शुरू कर दूंगा। कौन जानता है, आप कुछ याद कर सकते हैं। - मैंने किया। ;) –

6

यदि आप अभी भी रुचि रखते हैं तो मैंने इस समस्या को हल कर लिया है। समाधान काफी जटिल है। असल में, आपको तत्व के लिए एक साधारण एचटीसी संलग्न करने की आवश्यकता है और इसके क्लाइंटविड्थ/ऊंचाई को कैश करना होगा।

सरल एचटीसी इस तरह दिखता है:

<component lightweight="true"> 
<script> 
window.clientWidth2[uniqueID]=clientWidth; 
window.clientHeight2[uniqueID]=clientHeight; 
</script> 
</component> 

आप सीएसएस का उपयोग कर एचटीसी साथ जोड़ने की आवश्यकता:

.my-table td {behavior: url(simple.htc);} 

याद रखें कि आप केवल IE8 के लिए व्यवहार संलग्न करने के लिए की जरूरत है!

फिर आप कैश की गई मूल्यों के लिए ही टिककर खेल बनाने के लिए कुछ जावास्क्रिप्ट का उपयोग करें:

var WIDTH = "clientWidth", 
    HEIGHT = "clientHeight"; 

if (8 == document.documentMode) { 

    window.clientWidth2 = {}; 
    Object.defineProperty(Element.prototype, "clientWidth2", { 
    get: function() { 
     return window.clientWidth2[this.uniqueID] || this.clientWidth; 
    } 
    }); 

    window.clientHeight2 = {}; 
    Object.defineProperty(Element.prototype, "clientHeight2", { 
    get: function() { 
     return window.clientHeight2[this.uniqueID] || this.clientHeight; 
    } 
    }); 

    WIDTH = "clientWidth2"; 
    HEIGHT = "clientHeight2"; 
} 

सूचना है कि मैं स्थिरांक चौड़ाई/ऊंचाई बनाया। आप अपने तत्वों की चौड़ाई/ऊंचाई पाने के लिए इन का उपयोग करना चाहिए:

var width = element[WIDTH]; 

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

+1

वाह .. यह डीन एडवर्ड्स है ../मुझे धनुष –

0

मैं हालांकि मैं एक धीमी गति से प्रदर्शन देखा था भी जब चौड़ाई गुण पढ़ने। और बहुत अच्छा हो सकता है।

हालांकि, मुझे पता चला कि हमारे ऐप में प्रदर्शन के लिए मुख्य प्रभाव यह था कि खिड़की के आकार बदलने वाले ईवेंट से जुड़ा हुआ फ़ंक्शन स्वयं किसी अन्य आकार का कारण बन गया था, जो एक कैस्केडिंग प्रभाव का कारण बनता था, हालांकि अनंत लूप नहीं था। मुझे यह एहसास हुआ जब मैंने देखा कि फ़ंक्शन के लिए कॉल गिनती आईई 7 में आईई 8 में बड़ी परिमाण के आदेश थी (आईई डेवलपर टूल से प्यार करें)।मुझे लगता है कि कारण यह है कि तत्वों पर कुछ गतिविधियां, जैसे कि तत्व चौड़ाई को सेट करना, अब आईई 8 में एक रिफ्लो का कारण बनता है जो आईई 7 में ऐसा नहीं करता है।

मैंने विंडो के आकार बदलने की घटना को सेट करके इसे ठीक किया: resize = "myfunction() लौटाएं;" बस आकार बदलने के बजाय = "myfunction();" और यह सुनिश्चित करना कि मेरा कार्य झूठा हो गया हो;

मुझे एहसास है कि मूल प्रश्न कई महीने पुराना है, लेकिन मुझे लगा कि मैं किसी और को लाभ पहुंचाने के मामले में अपने निष्कर्ष पोस्ट करूंगा।