堆棧內存溢出
  簡體   English   中英

YUI，Javascript：如何優化此代碼段以使其運行更快？

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

 原文  2011-02-11 06:55:19  5   1    javascript/ html/ yui/ javascript-framework

問題描述

我正在制作一個根據用戶查詢在一個頁面上顯示數千個項目的應用程序。 我在這里上傳了類似的代碼段： 

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

該文件中的代碼段為： 

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

Flow：PHP文件首先顯示為空結構，然后釋放輸出緩沖區。 這樣會將結構中沒有任何項目的結構快速顯示給客戶端瀏覽器。 然后，PHP文件發送一些javascript函數調用，以將這些項目添加到框中（一次添加300個）。

請查看代碼中是否有任何優化或更改，這將有助於使其運行更快並解決以下問題

  1. 慢速滾動：當成千上萬的項目加載到盒子中時，滾動頁面變得非常慢。 我想知道是否有任何優化/代碼更改或任何其他並行方法來解決此問題。

  2. 自動調整彈出式容器窗口的大小，以通過在所有面上保留某些填充物來最適合可變屏幕尺寸。 我希望最好在YUI中完成。 這是我目前如何計算和調整窗口大小 

      $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. 全選非常有效。 還有其他更好的方法可以使用YUI加快速度嗎？ 這是目前的工作方式： 

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

我也曾在該頁面上使用過像bigPipe概念之類的Facebook來對數據進行流水線處理，但我不確定我是否在做禮拜式。 我的意思是我正在該頁面上加載數千個項目數據，因此我認為可以將其分解為更具結構性的內容。 我真的很想知道如何才能使它越來越快，經過高度優化以提高性能。

1 個解決方案

解決方案1
 0  2011-02-11 07:16:48

對於非常大的表格，通過設置table-layout:fixed CSS中table-layout:fixed ，您將看到渲染性能的巨大改進。 這將禁用確定列寬時考慮表中每個單元格寬度的列調整大小算法。 副作用是您需要使用表頂部的col元素適當地設置寬度（否則，第一行控制列的寬度）。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何優化這個 JavaScript 代碼片段？ 如何在YUI模塊中運行代碼？ 如何使此代碼運行更快 如何優化這個 javascript 方法代碼？ 如何優化彈出窗口 Javascript 代碼？ 我如何優化畫布html5的此javascript代碼，使其在Firefox中順利運行？ 如何優化我的代碼，使其可以有效運行？ 如何讓我的 JavaScript 程序運行得更快？ Javascript / jQuery：如何使該AJAX請求運行得更快？ 如何使我的JavaScript更快且異步運行
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM