सीएसएस स्प्राइट्स प्रदर्शन

Question

मेरे पास सीएसएस स्प्राइट्स के साथ 20x20 टुकड़ों द्वारा कैट किए गए फ़ोल्डर में स्थिर छवि 500x640 है, मैं प्रत्येक टुकड़े को प्रदर्शित करने के लिए पृष्ठभूमि-स्थिति सेट कर रहा हूं, मुझे इस तरह के डिस्प्ले की आवश्यकता है ताकि बाद में प्रत्येक टुकड़े में हेरफेर किया जा सके।

सीएसएस:

.piece 
     { 
      width: 20px; 
      height: 20px; 
      display: inline-block; 
      //display: inline; 
      //zoom:1; 
     }   

    .ob { background-image: url("/Images/ob.jpg");} 

js:

<script id="flipTemplate" type="text/html"> 
    <div class="piece ob" data-bind="style: { backgroundPosition: viewModel.getLeftValue($index) + ' ' + viewModel.getTopValue($index) }, attr: {cond: Cond, id: Id }, click: viewModel.setClick "> 
       </div> 
</script> 
<script type="text/javascript"> 
    viewModel = { 
     flips: ko.observableArray([]),  

     setClick: function (data, e) { 
      e.preventDefault();    
      //doing click 
     }, 

     getLeftValue: function (index) { 

      var position = 0; 

      var currentLine = div(index(), 25); 

      if (currentLine > 0) 
       return '-' + (index() - (currentLine * 25)) * 20 + 'px'; 
      else 
       return '-' + index() * 20 + 'px'; 
     }, 

     getTopValue: function (index) { 

      return '-' + (div(index(), 25)) * 20 + 'px'; 
     } 
    };  

    ko.applyBindings(viewModel); 
</script> 
function div(val, by){ 
    return (val - val % by)/by; 
} 

तो कुछ प्रदर्शन के मुद्दों कर रहा हूँ। IE में बहुत जल्दी के बारे में 1 सेकंड लोड हो रहा है, ओपेरा और एफएफ छवियों में उदाहरण के लिए के बारे में 3 सेकंड, लेकिन क्रोम में यह बहुत धीमी गति से लोड कर रहा है

यह लगभग 17 सेकंड ले जा रहा है क्रोम में सभी टुकड़ों को प्रदर्शित करने के लिए ...

ब्राउज़र छवि प्राप्त करने और उससे छोटे टुकड़ों को काटने के लिए केवल एक अनुरोध कर रहा है, क्रोम में इतना समय क्यों लग सकता है?

क्या कोई तरीका है कि मैं प्रदर्शन में सुधार कर सकता हूं?

बस Ctrl + ताज़ा किया था और यहाँ अजीब लोड हो रहा है परिणाम:

अद्यतन: मैं सिर्फ एक नमूना यहां रखा: http://bit.ly/TrcCdp

अद्यतन: मेरी नमूने में नहीं है जेएसओएन सरणी में इसमें 800 तत्व हैं, इसलिए मुझे पता है कि अगर मैं इसे कम करता हूं, उदाहरण के लिए 600-700 तत्व बेहतर प्रदर्शन कर रहे हैं, लेकिन मुझे 800 तत्वों की आवश्यकता है।

, उदा, जब वहाँ केवल 600 तत्वों इसके बारे में 6 सेकंड के लिए क्रोम में लोड को कम करने है .... है

तो शायद समस्या बिंदु है जहां टेम्पलेट पुनरावृत्ति नॉकआउट में कहीं हो सकता है?

Answer 1

समस्या छवि नहीं है। 170ms (स्थानीय) में

<meta name="viewport" content="width=device-width"> 

<script type="text/javascript"> 
    var img = new Image(); 
    img.src = 'TestApp_files/obm000.jpg'; 
</script> 

<link href="TestApp_files/jquery00.css" rel="stylesheet"> 
<link href="TestApp_files/jquery01.css" rel="stylesheet"> 
<!-- ad nauseum --> 

इस के बाद, छवि भार: छवि शीर्ष पर एक प्रीलोड रखने, स्टाइलशीट या स्क्रिप्ट टैग में से किसी से पहले द्वारा निर्धारित किया जा सकता है। हालांकि, यह पृष्ठ अभी भी तय करने का प्रयास कर रहा है कि क्या करना है, यह पृष्ठ 10-15 सेकंड के लिए लगभग मक्स करता है।

मूल मुद्दा यह है कि जावास्क्रिप्ट एक पूर्ण गड़बड़ है। छवि/फ़ाइल/फ़ंक्शन नाम गुप्त हैं। पृष्ठ के मध्य में चीजें अंत में कोड पर निर्भर करती हैं, शुरुआत में कोड पर निर्भर करता है अंत में कोड पर निर्भर करता है। नियंत्रक/दृश्य/मॉडल तर्क पूरे नक्शे पर है। वैश्विक चर और बहु-फ़ाइल युग्मन ... होके, </soapbox>, अब लक्षण का इलाज करने पर।

समस्या 1:

jQuery(function($) { 
    ko.applyBindings(viewModel); 
}); 

समस्या 2: foreach धीमी

नॉकआउट foreach बाध्यकारी है एक domready कॉलबैक में डोम लोड होने से पहले बाध्यकारी नॉकआउट

रखें applyBindings बड़े डेटा सेट के साथ अविश्वसनीय रूप से धीमी गति से। आप jQuery टेम्पलेट्स को आजमा सकते हैं और टेम्पलेट, as described in this SO question के अंदर foreach को स्थानांतरित कर सकते हैं। ऐसा लगता है कि समय लगभग 3 सेकंड तक गिर जाता है।

मुझे वास्तव में समझ में नहीं आ रहा है कि यह आपके वर्तमान foreach के साथ ठीक क्यों प्रतीत होता है, यह हमेशा के लिए लटका हुआ है, जबकि पृष्ठभूमि में कुछ जादू दस्तक देता है, जहां तक ​​मैं कह सकता हूं, foreach के बाद होता है पूरा करता है।

साइड नोट: क्या एक अवलोकन योग्य सरणी में फ़्लिप डालना आवश्यक है? मुझे लगता है कि आप बाद में इसका उपयोग करना चाहते हैं क्योंकि वर्तमान कोड में कुछ भी इसकी आवश्यकता नहीं है। यदि नहीं, तो इसे बाहर निकालें और यह प्रदर्शन में सहायता करेगा (हालांकि यह इस समस्या को हल नहीं करेगा)।

चीयर्स, मुझे उम्मीद है कि इससे मदद मिलती है।

Answer 2

foreach बाइंडिंग और क्रोम के बीच यह अजीब प्रतिपादन बग है। मैंने div से पहले अपने टेम्पलेट में केवल एक वर्ण जोड़ने का प्रयास किया और यह देरी तय की (लेकिन लेआउट को भी गड़बड़ कर दिया)।

इसे ठीक करने का एक अच्छा तरीका foreach के अलावा कुछ और उपयोग करना है। मेरा repeat binding यहां अच्छा काम करता है और देरी की समस्या हल करता है।

अपने कोड के उस अनुभाग repeat उपयोग कर रहा है: आप भी अपने getTopValue और getLeftValue कार्यों को बदलने के लिए कोष्ठक बाहर ले जाने की आवश्यकता होगी

<div class="condListHolder" style="width:558px"> 
    <div class="cond2" title="Click to flip" data-bind="repeat: flips"> 
     <div class="piece obm" data-bind=" 
      style: { backgroundPosition: getLeftValue($index) + ' ' + getTopValue($index) }, 
      attr: {cond: $item().cond, id: $item().Id }, 
      click: setClick "></div> 
    </div> 
</div> 

क्योंकि repeat$index के लिए एक नमूदार का उपयोग नहीं करता, ()index के बाद।

Answer 3

आपको अपने कोड को व्यवस्थित करने में भी देखना चाहिए जिसे फ़ोरैच लूप द्वारा बुलाया जाता है। मुझे नहीं पता कि आप कितनी बार getLeftValue और getTopValue विधियों को कॉल करते हैं लेकिन वे बहुत ही अप्रचलित हैं।

• फ़ंक्शन कॉल कि आप एक ही परिणाम दे सीमित प्रयास करें, स्थानीय वार्स का उपयोग कैश करने के लिए, क्योंकि वे सस्ते
• बड़े छोरों में तार जोड़ नहीं है, इस तरह से उन्हें शामिल होने के एक सरणी का उपयोग कर की तुलना में धीमी है।

मैंने आपके दो कार्यों को अनुकूलित करने का प्रयास किया। आपको कम से कम कुछ सुधार देखना चाहिए:

getLeftValue: function (index) { 

    var position = 0, 
     realIndex = index(), 
     currentLine = div(realIndex, 25); 


    if (currentLine > 0) 
     return ["-", (realIndex - (currentLine * 25)) * 20, "px"].join(""); 
    else 
     return ["-", realIndex, "px"].join(""); 
}, 

getTopValue: function (index) { 

    return ["-",(div(index(), 25)) * 20,"px"].join(""); 
}