코드가 Google 크롬에서 천천히 실행됩니다.

Question

안녕하세요. Google+ 스타일의 사진 앨범을 만들려고합니다. 나는 아주 성공적이다. 그러나 이상한 사실은 코드가 크롬에서 천천히 실행되지만 Firefox에서 아주 잘 작동한다는 것입니다. Chrome에서 사진로드 속도가 매우 느리며 앨범 이미지 (jquery 파트)의 회전 속도가 느립니다. 여기에 내 코드 ... 여기

<?php 
$number_of_image_per_album=array(); 
$query="SELECT album_id,album_name from albums WHERE user_id='18'";//user id 
$result=mysql_query($query); 
$num_of_album=mysql_num_rows($result); 
for($i=1,$k=0;$k<=800,$i<=$num_of_album;$k=$k+300,$i++) 
    { 
$array=mysql_fetch_assoc($result); 
$album_id=$array['album_id']; 
$album_name=$array['album_name']; 
$query2="SELECT image_id,ext from images WHERE album_id='$album_id'"; 
$result2=mysql_query($query2); 
$num_of_images=mysql_num_rows($result2); 
$num_of_image_per_album[]=$num_of_images; 
echo "<div class='image_stack' style='margin-left:",$k,"px'>";//create a album of images 
$left=108; 
$top=8; 
for($j=1;$j<=$num_of_images;$j++) 
{ 
    $array2=mysql_fetch_assoc($result2); 
    $image_id=$array2['image_id']; 
    $image_ext=$array2['ext']; 
    $image_name=$array2['image_name']; 
    //$str="<img id='photo.$j' class='stackphotos' src='uploads/.$album_id./.$image_id.$image_ext' />"; 

    echo "<img id='photo$j' class='stackphotos' style='left: $left; top:$top ;' src='uploads/$album_id/$image_id.$image_ext' />"; 

    $left=108-4; 
    $top=8-2; 
} 
echo "</div>"; 
} 
?> 

내 JQuery와 부분은 ... 나는 Crome.This의 16.0.912.77 버전을 사용하고 있습니다

<script> 
$(document).ready(function() { 
$('.image_stack').delegate('img', 'mouseenter', function() {//when user hover mouse on image with div id=stackphotos 
     //if ($(this).hasClass('stackphotos')) {// 
     // the class stackphotos is not really defined in css , it is only assigned to each images in the photo stack to trigger the mouseover effect on these photos only 
     var parent = $(this).parent(); 
     var index=parent.index()-1; 
     var num_of_image_per_album=<?php echo json_encode($num_of_image_per_album);?>; 
     var num_of_image_for_specific_album=num_of_image_per_album[index]; 
     // alert(num_of_image_for_specific_album); 
     var i=0; 
     var degree=0; 
     for(i=1;i<=num_of_image_for_specific_album;i++) 
     { 

      parent.find('img#photo'+i).css({'-webkit-transform': 'rotate(' + degree + 'deg)'}); 
      parent.find('img#photo'+i).css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 
      degree=degree+10 

      } 

}) 
.delegate('img', 'mouseleave', function() {// when user removes cursor from the image stack 
var parent = $(this).parent(); 
var index=parent.index()-1; 
var num_of_image_per_album=<?php echo json_encode($num_of_image_per_album);?>; 
var num_of_image_for_specific_album=num_of_image_per_album[index]; 

for(i=1;i<=num_of_image_for_specific_album;i++) 
    { 

    parent.find('img#photo'+i).css({'-webkit-transform':''}); 
     parent.find('img#photo'+i).css({ '-moz-transform': ''}); 


     } 


});; 
}); 
</script> 

또한 safari.what 느린 문제가있다. 나에게 조언 해주세요. 미리 감사드립니다 .......

Answer 1

크롬의 슈퍼 쿨러 프로파일 러를 확인 했습니까?

Right click page -> Inspect Element (or F12) 
-> Profiles 
-> collect JavaScript CPU Profile 
-> Start 
-> Stop 
-> Read 
-> Fix Problems 
-> Repeat