이 js를 최적화하는 방법 (페이지가 열릴 때 CPU가 40 % 이상)

Question

이 페이지는 내 페이지에 있으며 CPU를 상당히로드합니다. 코드를 최적화 할 수있는 방법이 있습니까?

당신은 자바 스크립트를 만들 수 없습니다

function Particle() { 

      this.particleContainerWidth = $('#particle-container').width() - 100; 
      this.particleContainerHeight = $('#particle-container').height() - 100; 

      this.path = 'img/'; 
      this.images = ['particle1.png', 'particle2.png', 'particle3.png', 'particle4.png']; 

     // Randomly Pick a Particle Model 
      this.image = this.images[randomInt(this.images.length)]; 
      this.file = this.path + this.image; 

     // Create a Particle DOM 
      this.element = document.createElement('img'); 

      this.speed().newPoint().display().newPoint().fly(); 
     }; 

     // Generate Random Speed 
     Particle.prototype.speed = function() { 
      this.duration = (randomInt(10) + 5) * 1100; 
      return this; 
     }; 

     // Generate a Random Position        
     Particle.prototype.newPoint = function() { 
      this.pointX = randomInt(this.particleContainerWidth); 
      this.pointY = randomInt(this.particleContainerHeight); 

      return this; 
     }; 

     // Display the Particle 
     Particle.prototype.display = function() { 
      $(this.element) 
       .attr('src', this.file) 
       .css('position', 'absolute') 
       .css('top', this.pointY) 
       .css('left', this.pointX); 
      $('#particle-container').append(this.element); 

      return this; 
     }; 

     // Animate Particle Movements 
     Particle.prototype.fly = function() { 
      var self = this; 
      $(this.element).animate({ 
       "top": this.pointY, 
       "left": this.pointX 
      }, this.duration, 'linear', function(){ 
       self.speed().newPoint().fly(); 
      }); 
     }; 

     function randomInt(max) { 
     // Generate a random integer (0 <= randomInt < max) 
      return Math.floor(Math.random() * max); 
     } 

     $(function(){ 

      $('body').append('<div id="particle-container"></div>'); 

      var total = 8; 
      var particles = []; 

      for (i = 0; i < total; i++){ 
       particles[i] = new Particle(); 
      } 
     }); 

Answer 1

이 CPU의 적은 소비 (jQuery를 솔루션은 잘 될 것입니다, 그래서 내가 jQuery를 사용하고 있습니다). 이는 OS 커널에서 실행중인 응용 프로그램의 우선 순위에 의해 관리됩니다. 가장 좋은 방법은 실행 시간을 줄이는 것입니다.

실행 효율을 높이려면 프로토 타입 사용을 제한하고 속성에 값 할당을 중지하십시오. 이 코딩 방법은 매우 깨끗하고 읽기 쉽기 때문에 대중적이되었습니다. 그러나 그 코드는 뒤로 거칠게 실행됩니다.

할당을위한 변수 만 사용하여 코딩 할 수있는 경우 의사 결정을위한 if 문과 코드 실행을 반복하는 루프가 훨씬 빠릅니다. 그러나 더 많은 코드를 작성해야하므로 그리 좋지 않을 것입니다.

출력 성능을 향상 시키려면 모든 출력 세그먼트를 각각 배열의 인덱스로 쓰고 모든 출력이 만들어 질 때 단일 조인 방법 만 사용하고이 텍스트를 페이지에 출력하는 단일 innerHTML 메서드를 사용하십시오. 이렇게하면 출력 실행이 최대 4 배 줄어 듭니다.

Answer 2

<canvas> 버전으로 구현하는 것에 대해 생각해 보셨습니까? IE에서 직접 작동하지는 않을 것이며, 더 빨리 또는 더 느릴지 확신하지 못합니다. Processing으로 시도해 볼 수도 있습니다.

Answer 3

이 작업은 많은 변경 및 다시 작성이 필요하지만 jquery에 대한 새로운 여유 함수를 만들어 애니메이션에 게시 할 수 있습니다. 그런 다음 당신은이 모든 입자가 단 한 번 귀하의 여유 함수와 애니메이션()을 발행 할 것이며, 함수는 그 기반으로한다 :

• 임의
• 현재 시간 (새 Date()) 어떤 수를 모듈로
• 싱글 잡고 각각의 방향

아이디어 : 당신을 가정

당신을 C 코드를 변경하지 않으 fly()를 처음 실행할 때 임의의 시간 제한을 사용하여 입자가 입자를 이동하도록 설정하십시오. 그것이 모두 실행 된 방식을 바꿀 수 있습니다. 그래도 도움이되는지, 느리게하는지는 모르겠다.)

두 번째 것은 품질이다. jquery animate가 너무 원활하게 수행합니다. 파티클을 애니메이트하는 대신 움직여서 거리를 줄이면 속도가 빨라지고 setTimeout을 사용하면 같은 속도로 움직일 수 있습니다.