简体   繁体   English

YUI,Javascript:如何优化此代码段以使其运行更快?

[英]YUI,Javascript: How can i optimize this code snippet to run faster?

I am making an application which displays thousands of items on 1 single page according to users query. 我正在制作一个根据用户查询在一个页面上显示数千个项目的应用程序。 I have uploaded a similar code snippet here : 我在这里上传了类似的代码段:

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

The Code snippet in the file is : 该文件中的代码段为:

<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 : The PHP file first displays the empty structure and releases the output buffer. Flow:PHP文件首先显示为空结构,然后释放输出缓冲区。 This will display the structure with no items in it to the client browser, quickly. 这样会将结构中没有任何项目的结构快速显示给客户端浏览器。 Then the PHP file sends some javascript funciton calls to add the items in the box(300 at a time.). 然后,PHP文件发送一些javascript函数调用,以将这些项目添加到框中(一次添加300个)。

Please look into the codes for any optimization or change in code which will help to make it run faster and solve following issues 请查看代码中是否有任何优化或更改,这将有助于使其运行更快并解决以下问题

  1. Slow scrolling : When thousands of items are loaded into the box, it becomes very very slow to scroll the page. 慢速滚动:当成千上万的项目加载到盒子中时,滚动页面变得非常慢。 I want to know if there are any optimizations/code changes or any other parallel methods to get over this issue. 我想知道是否有任何优化/代码更改或任何其他并行方法来解决此问题。

  2. Auto resizing of pop up container window to best fit variable screen sizes by leaving certain paddings on all the sides. 自动调整弹出式容器窗口的大小,以通过在所有面上保留某些填充物来最适合可变屏幕尺寸。 I hope it can be best done in YUI. 我希望最好在YUI中完成。 Here is how i am calculating and resizing window currently 这是我目前如何计算和调整窗口大小

      $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>'; 
  3. Select All works quite. 全选非常有效。 Is there any other superior way to speed up that using YUI? 还有其他更好的方法可以使用YUI加快速度吗? here is how its working currently : 这是目前的工作方式:

      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; } 

I have also used facebook like bigPipe concept on that page to pipeline the data but i am not sure if i am doing it rite. 我也曾在该页面上使用过像bigPipe概念之类的Facebook来对数据进行流水线处理,但我不确定我是否在做礼拜式。 I mean i am loading thousands of item data on that page so i think it can be broken into more structural things. 我的意思是我正在该页面上加载数千个项目数据,因此我认为可以将其分解为更具结构性的内容。 I would really want to know how can i make it much and much faster and highly optimized to improve the performance. 我真的很想知道如何才能使它越来越快,经过高度优化以提高性能。

With very large tables you'll see a huge improvement in rendering performance by setting table-layout:fixed in CSS. 对于非常大的表格,通过设置table-layout:fixed CSS中table-layout:fixed ,您将看到渲染性能的巨大改进。 This disables the column resizing algorithms that account for the width of every single cell in the table when determining column widths. 这将禁用确定列宽时考虑表中每个单元格宽度的列调整大小算法。 The side-effect is you need to set your widths appropriately using col elements at the top of the table (otherwise the first row controls the column widths). 副作用是您需要使用表顶部的col元素适当地设置宽度(否则,第一行控制列的宽度)。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM