YUI, Javascript: Comment puis-je optimiser cet extrait de code pour courir plus vite?

Je fais une application qui affiche des milliers d'éléments sur une seule page en fonction de la requête des utilisateurs. J'ai téléchargé un extrait de code similaire ici:YUI, Javascript: Comment puis-je optimiser cet extrait de code pour courir plus vite?

http://adiinviter.com/forums/stack/current.php

L'extrait de code dans le fichier est:

<html> 
<head> 
<style type="text/css"> 
.table_head_outer { 
    background-color: #7192a8; 
    padding: 0px; 
    width:100%; 

    font-weight:bold; 
    color:#ffffff; 
    clear:both; 
    border: 1px solid #5a7f97; 
    -moz-border-radius-topright: 5px; 
    -moz-border-radius-topleft: 5px; 
    -webkit-border-top-right-radius: 5px; 
    -webkit-border-top-left-radius: 5px; 

} 

.table_head_body { 
    padding: 3px 0px 3px 0px; 
    background: transparent; 
    text-align:left; 
    margin-left: 13px; 
    margin-right: 3px; 
} 

.table_body_outer { 
    border-top: 1px solid rgb(255, 255, 255); 
    background-color: rgb(255, 255, 255); 
    width:100%; 
    display:block; 
    border-bottom: 1px solid #c4c4c4; 
    border-left: 1px solid #c4c4c4; 
    border-right: 1px solid #c4c4c4; 
} 


.table_body { 
    padding: 5px; 
    background: transparent; 
} 
.overlayDiv { 
    position: absolute; width: 100%; height: 100%; left: 0px; 
    background-color: rgba(10, 10, 10, 0.3);  
    font-family: Verdana; z-index: 2000; 

} 
.popup_box { 
    position: relative; opacity: 1; 
    background-color: transparent; 
    border-width: 0px; border-style: solid; border-color: #C1B4B4; 
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
    width: auto; height: auto; text-align: center; 
} 
#optContain { width: 890px; } 
#contentBox { 
    text-align: center; vertical-align: middle; 
} 

#sectionHeader { text-align: left; padding: 5px; } 
#sectionHeaderRight { padding:5px; text-align: right; } 

.sectionFooter { padding: 5px 15px; text-align: right;} 

.product_disp, .product_disp_clicked, .product_disp_hover { 
    padding: 6px; width: 250px; height: 50px; 
    margin: 5px; float: left; overflow: auto; cursor: pointer; 
    border-width: 1px; border-style: solid;  
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
} 
.product_disp_clicked { 
    border-color: #700; 
    background-color: #e00; 
} 
.product_disp_hover { 
    border-color: #aaa; 
} 
.div_trail_img { 
    position: absolute; z-index: 2030; visibility: hidden; 
    border-width: 1px; border-style: solid; border-color: #ccc; 
    padding: 5px; background-color: #fff; 
    border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px; 
} 

.prodcuts_img { float:left; 
    margin-right: 5px; 
    height:50px; width:auto; 
} 
    </style> 
    <script type="text/javascript"> 
    function adi_onArrive(obj) 
    { 
     setTimeout(function() { 
       if(obj['data'] != null) 
        document.getElementById(obj['id']).innerHTML += obj['data'];  
       }, 0); 
    } 
    function putDimensions() 
    { 

     document.myForm.sHeight.value = window.screen.height; 
     document.myForm.sWidth.value = window.screen.width; 
    } 
    </script> 
</head> 
<body> 

<div id="trail_img_div" class="div_trail_img" style=""> 
<img id="trail_img" src=""/> 
</div> 

<?php 


if($_GET['num_products'] == "" && $_GET['get_products'] == "") 
{ 
    ?> 

    <center> 
    <form action="" method="" onSubmit="return putDimensions();" name="myForm"> 
    No. of Items : &nbsp;&nbsp;&nbsp;&nbsp;<input type="textbox" name="num_products" > <br /><br /> 
    <input type="hidden" name="sHeight" value=""> 
    <input type="hidden" name="sWidth" value=""> 
    <input type="submit" name="get_products" value=" Get Products "> 

    </form> 
    </center> 
<?php 
} 
else 
{ 

    ?> 
    <script type="text/javascript"> 
    //trail_img_div 
    //trail_img 
    function click_effect(myObj,event) // onclick 
    { 
     if(myObj.className == "product_disp_clicked") 
     { 
      myObj.className = "product_disp"; 
     } 
     else if(myObj.className == "product_disp_hover") 
     { 
      myObj.className = "product_disp_clicked"; 
     } 
     return true; 
    } 
    function show_img_trail(img_url,myObj) //on mousemove to div 
    { 
     if(myObj.className == 'product_disp') myObj.className = 'product_disp_hover'; 
     document.getElementById('trail_img').src = img_url; 
     document.getElementById('trail_img_div').style.visibility = 'visible'; 
     document.getElementById('trail_name').innerHTML = 'Name : '+myObj.getAttribute('tip'); 
    } 
    function hide_img_trail(myObj) //onmouseout 
    { 
     trail_img_div = document.getElementById('trail_img_div'); 
     trail_img_div.style.visibility = 'hidden'; 
     //trail_img_div.setStyle('visibility','hidden'); 
     if(myObj.className == 'product_disp_hover') myObj.className = 'product_disp'; 
    } 
    function m_move(myObj) 
    { 
     if(myObj.className == 'product_disp') myObj.className = 'product_disp_hover'; 
    } 
    function m_out(myObj) 
    { 
     if(myObj.className == 'product_disp_hover') myObj.className = 'product_disp'; 
    } 
    function update_co_ords(event) // onmousemove to td 
    { 
     trail_img_div = document.getElementById('trail_img_div'); 
     if(event.pageX != undefined){ 
      trail_img_div.style.left = (event.pageX + 10)+ 'px'; 
      trail_img_div.style.top = (event.pageY + 10)+ 'px'; 
     } 
     else{ 
      trail_img_div.style.left = (event.clientX + 10)+ 'px'; 
      trail_img_div.style.top = (event.clientY + 10)+ 'px'; 
     } 
    } 
    function toggle_all(event) 
    { 
     conts_container = document.getElementById('conts_contain'); 
     divArr = conts_container.querySelectorAll('div.product_disp'); 
     if(divArr.length == 0) //uncheck all 
     { 
      divArr = conts_container.querySelectorAll('div.product_disp_clicked'); 
      for(i=0; i<divArr.length ; i++) 
      { 
       divArr[i].className = 'product_disp'; 
      } 
     } 
     else // check all 
     { 
      for(i=0; i<divArr.length ; i++) 
      { 
       divArr[i].className = 'product_disp_clicked'; 
      } 
     } 
     return false; 
    } 
    </script> 

<table class="overlayDiv" id="popupBox"> 

<tr> 
<td align="center" align="center" valign="middle" style="text-align:center;vertical-align:middle;padding: 10px;"> 
<center> 
<div class="popup_box" align="center"> 
    <center> 
    <table style="width: 870px; border: 1px solid #333;" class="" id="optContain"> 
    <tr class=""> 
     <td align="left"> 
      <div class="table_head_outer" style="position:relative;"> 
      <div class="table_head_body" id="sectionHeader"> Product Details </div> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td align="center" class="table_body_outer" style="font-size: 10pt;text-align: center; vertical-align: middle; height: 500px;" id="contentBox">  
     <div style="padding: 10px;"> <a href="" onclick="return toggle_all(event);"> Select All </a> </div> 
     <div style="height: 500px;overflow: auto;" id="conts_contain" onmousemove="return update_co_ords(event);"> 

     </div> 
     </td> 
    </tr> 
    <tr> 
     <td id="sectionFooter" align="right" style="background-color:#fff;"> 
      <div align="center" style="margin: 5px 15px;"> 
       <input type="button" class="button" name="struct_close" id="close_popup" value=" Add Now "> 
      </div> 
     </td> 
    </tr> 
    </table> 
    </center> 
</div></center> 
</td></tr> 
</table> 

<?php 

// Code to caculate height and width 

    $width = $_GET['sWidth']; 
    $height = $_GET['sHeight']; 
    $sss = intval(($width - 130)/260); 
    $sss = $sss * 260; 
    echo '<script type="text/javascript"> 
    conts_container = document.getElementById("conts_contain"); 
    conts_container.style.width = "'.($sss + 120).'px"; 
    document.getElementById("contentBox").style.width = "'.($sss + 150).'px"; 
    conts_container.style.maxHeight = "'.($height - 150).'px"; 
    </script> 
    '; 

    flush(); 



    // Code to Add items in contentBox 

    $arr = array('name' => 'Product_', 'id' => 10); 
    $status = 'Available'; 

    for($i = 1; $i <= $_GET['num_products'] ; $i++) 
    { 
     $someVar .= '<div class="product_disp" 
      onclick="return click_effect(this,event);" 
      onmousemove="return show_img_trail(\'pic.jpg\',this);"  
      onmouseout="return hide_img_trail(this);" align="left" > <img src="pic.jpg" class="prodcuts_img"/> 
      <span style="overflow:hidden;" align="left"> <b> product_'.$i.' </b> <br/> 
      id : '.rand(0,10000).' <br /></span> 
      <span style="padding:0px;width: 100%;" align="right">'.$status.' </span> 
      </div>';   
      if($i % 100 == 0) 
      { 
       $output = array('id' => 'conts_contain', 'data' => $someVar); 
       echo '<script type="text/javascript"> adi_onArrive('.json_encode($output).'); </script>'; 
       $someVar = ''; 
      } 
    } 
    if($someVar != '') 
    { 
     $output = array('id' => 'conts_contain', 'data' => $someVar); 
       echo '<script type="text/javascript"> adi_onArrive('.json_encode($output).'); </script>'; 
       $someVar = ''; 
    } 

} 

?> 
</body> 
</html>

The Flow: Le fichier PHP affiche d'abord la structure vide et libère le tampon de sortie. Cela affichera la structure sans éléments dans le navigateur client, rapidement. Ensuite, le fichier PHP envoie quelques appels de fonction javascript pour ajouter les éléments dans la boîte (300 à la fois.).

S'il vous plaît examiner les codes pour toute optimisation ou un changement dans le code qui permettra de faire fonctionner plus rapidement et résoudre les problèmes suivants

défilement lent: Lorsque des milliers d'articles sont chargés dans la boîte, il devient très très lent à faire défiler la page. Je veux savoir s'il y a des changements d'optimisations/code ou d'autres méthodes parallèles à pour résoudre ce problème.

Redimensionnement automatique de la fenêtre du conteneur déroulant pour s'adapter au mieux aux tailles d'écran variables en laissant certaines garnitures sur tous les côtés. J'espère que cela sera mieux fait en YUI. Voici comment je calcule et la fenêtre de redimensionnement actuellement

 $width = $_GET['sWidth']; 
     $height = $_GET['sHeight']; 
     $sss = intval(($width - 130)/260); // 260 is the width of one item including paddings 
     $sss = $sss * 260; 
     echo '<script type="text/javascript"> 
      conts_container = document.getElementById("conts_contain"); 
      conts_container.style.width = "'.($sss + 120).'px"; 
      document.getElementById("contentBox").style.width = "'.($sss + 150).'px"; 
      conts_container.style.maxHeight = "'.($height - 150).'px"; 
      </script>';

Sélectionner tout fonctionne bien. Existe-t-il un autre moyen supérieur d'accélérer l'utilisation de YUI? voici comment son travaille actuellement:

 function toggle_all(event) 
     { 
      conts_container = document.getElementById('conts_contain'); 
      divArr = conts_container.querySelectorAll('div.product_disp'); 
      if(divArr.length == 0) //uncheck all 
      { 
       divArr = conts_container.querySelectorAll('div.product_disp_clicked'); 
       for(i=0; i<divArr.length ; i++) 
       { 
        divArr[i].className = 'product_disp'; 
       } 
      } 
      else // check all 
      { 
       for(i=0; i<divArr.length ; i++) 
       { 
        divArr[i].className = 'product_disp_clicked'; 
       } 
      } 
      return false; 
     }

J'ai aussi utilisé facebook comme concept de bigPipe sur cette page pour pipeline les données, mais je ne suis pas sûr si je le fais rite. Je veux dire que je charge des milliers de données d'article sur cette page, donc je pense qu'il peut être divisé en choses plus structurelles. Je voudrais vraiment savoir comment puis-je le faire beaucoup plus vite et hautement optimisé pour améliorer les performances.

Source

2011-02-11 Vin

Avec de très grandes tables, vous verrez une amélioration considérable des performances de rendu en définissant table-layout:fixed en CSS. Cela désactive les algorithmes de redimensionnement des colonnes qui prennent en compte la largeur de chaque cellule de la table lors de la détermination des largeurs de colonnes. L'effet secondaire est que vous devez définir vos largeurs de manière appropriée en utilisant les éléments col en haut de la table (sinon la première rangée contrôle les largeurs de colonne).

Source

2011-02-11 07:16:48 SpliFF

YUI, Javascript: Comment puis-je optimiser cet extrait de code pour courir plus vite?

Répondre

Questions connexes