Js (+ Mootools) - Neden işlemci% 60 üzerinde benim komut dosyası kullanımı?

2 Cevap php

Bu sitede - LINK - i 3 banner scrollers (yatay dikey 2x + 1x) kullanmanız gerekir. Ben flaş bunu denedim, ama sonra herkes web tarayıcıları kapatın veya askıya. Şimdi ben (i mootools kullanmak) JS bunu yapmak istiyorum. Tüm veriler MySQL geliyor. İşte tam kod (sen mootools bilmiyorsanız bile, Bunu anlamak gerekir) bulunuyor

global $wpdb;
$table = $wpdb->prefix.'part';
$sql = "SELECT * FROM $table";
$q = $wpdb->get_results($sql);
$g = 0;
if($wpdb->num_rows > 0)
{
?>
<script type="text/javascript">
window.addEvent('load', function(){
    var totall = 0;
    var totalr = 0;
    $$('#leftCont0 .contElement').each(function(el){
        var img = new Asset.image(el.getFirst('a').getFirst('img').get('src'));
        totall += img.height;
    });
    $$('#rightCont0 .contElement').each(function(el){
        var img = new Asset.image(el.getFirst('a').getFirst('img').get('src'));
        totalr += img.height;
    });

    $$('.leftCont').each(function(el){
        var h = parseInt(el.get('id').substr(8));
        el.setStyle('top', h * totall);
    });
    $$('.rightCont').each(function(el){
        var h = parseInt(el.get('id').substr(9));
        el.setStyle('top', h * totalr);
    });
    var total = new Array(totall, totalr);
    move.periodical(30, null, total);
});
function move(num, num2)
{
    var h = 0;
    var da = false;
    var target = null;
    $$('.leftCont').each(function(el){
        var act = el.getStyle('top');
        var n = parseInt(act)+1;
        el.setStyle('top', n+"px");
        if(el.getStyle('top') < h)
        {
            h = parseInt(el.getStyle('top'));
            alert(h);
        }
        if(parseInt(el.getStyle('top')) > 400)
        {
            da = true;
            target = el;
        }
    });
    if(da)
    {
        var n = h - num;
        target.setStyle('top', n+'px');
    }
    h = 0;
    da = false;
    $$('.rightCont').each(function(el){
        var act = el.getStyle('top');
        var n = parseInt(act)+1;
        el.setStyle('top', n+"px");
        if(el.getStyle('top') < h)
        {
            h = parseInt(el.getStyle('top'));
            alert(h);
        }
        if(parseInt(el.getStyle('top')) > 400)
        {
            da = true;
            target = el;
        }
    });
    if(da)
    {
        var n = h - num2;
        target.setStyle('top', n+'px');
    }
}
</script>
<?php 
$g = 0;
$l = 0;
$r = 0;
$leftContent = array();
$rightContent = array();
$leftHeight = 0;
$rightHeight = 0;
foreach($q as $q)
{
    if(($g % 2) == 0)
    {
        $leftContent[$l] = '<div class="contElement">
                <a href="'.$q->aurl.'"><img src="'.$q->imgurl.'" alt="Partner" /></a>
            </div>';
        $lHeight = getimagesize($q->imgurl);
        $leftHeight .= $lHeight[1];
        $l++;
    }
    else
    {
        $rightContent[$r] = '<div class="contElement">
                <a href="'.$q->aurl.'"><img src="'.$q->imgurl.'" alt="Partner" /></a>
            </div>';
        $rHeight = getimagesize($q->imgurl);
        $rightHeight .= $rHeight[1];
        $r++;
    }
    $g++;
}
$quantity = ceil(400 / $leftHeight) + 1;

for($i = 0; $i < $quantity; $i++)
{
    $str = "";
    for($j = 0; $j < sizeof($leftContent); $j++)
    {
        $str .= $leftContent[$j];
    }
    $leftContainer[$i] = '<div class="leftCont" id="leftCont'.$i.'">'.$str.'</div>';
}

$quantity = ceil(400 / $rightHeight) + 1;

for($i = 0; $i < $quantity; $i++)
{
    $str = "";
    for($j = 0; $j < sizeof($rightContent); $j++)
    {
        $str .= $rightContent[$j];
    }
    $rightContainer[$i] = '<div class="rightCont" id="rightCont'.$i.'">'.$str.'</div>';
}

?>
<div id="pcl">
<?php
for($i = 0; $i < sizeof($leftContainer); $i++)
{
    echo $leftContainer[$i];
}
?>
</div>
<div id="pcr">
<?php
for($i = 0; $i < sizeof($rightContainer); $i++)
{
    echo $rightContainer[$i];
}
?>  
</div>
<?php
}

2 Cevap

Iki each() döngüler ile move() function her 30 milisaniye içinde idam edilecek pahalıdır. Tüm kaydırma unsurları birbirine değil / nispeten aynı hızda hareket ediyor, çünkü sadece kendi kök konteyner animasyon olabilir. Ben sana 10x destek verecek eminim.

, CPU döngülerini yiyor tam olarak ne öğrenmek javascript profiler tarayıcılar tarafından sağlanan kullanın. Safari çok iyi bir, Firebug var.

mesela hareket işlevi, çeşitli değişiklikler konularda artıracak yapılabilir.

İlk, $$('.rightCont') ve $$('.leftCont') Eğer işlevini çağırmak, her seferinde dom hareket seçiciler. Eğer dizi elemanları değiştirmek için beklemeyin, neden örneğin, global değişken içine bunları önbelleğe değil:

var conts = {
    left: $$("div.rightCont"),
    right: $$("div.leftCont")
};

// then just refer to them within function move like so...
conts.left.each(...); // etc.

Eğer Mootools boyutları SetStyle zaman varsayılan birim hiçbir duygusu üst (int) ve "px" dizesinin de var, zaten px dizeleri iletmenin gibi, esp IE burada yavaşlatabilir ...

Ayrıca, size el.setStyle('top', n) sonra el.style.top n olacağını söyleyebiliriz, henüz if(el.getStyle('top') < h) ve if(parseInt(el.getStyle('top')) > 400) yapmak, iki anlamsız aşağı ilerletmek gibi şeyler yaparsanız aramalarını.

Eğer gerçekten de her iki tip eleman için tek bir döngü yaparak bu hızlandırabilir, i gl, neyse ... herhalde.

kullanarak el.getPosition().y böylece (çerçeve muhtemelen yine aynı işi yapar gibi değil çok cpu orada tasarruf) parseInt gerek yok zaten int olarak gelecek. Eğer parseInt gerektiğinde de, number.toInt() yerine, bu chainable bulunuyor mootools 'kullanın

etiketler