如何优化这个js(现在的CPU是在打开页面时40%)

我有这样的一段JavaScript在我的网页,它加载CPU增色不少。 有没有什么办法可以优化代码? (我使用jQuery,因此jQuery的解决方案将被罚款)

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

--------------解决方案-------------

你不能让JavaScript的消耗更少的CPU的。 由在OS内核中执行的应用程序的优先级约束。 你可以期望的最好是减少执行时间。

为了提高您的执行效率,限制你的原型的使用和停止分配值的属性。 编码这种方法已经成为流行,因为它是非常干净,易于阅读,但可怕的倒退执行。

如果你能够只使用变量赋值,如果决定语句和for循环的循环代码的执行将远远快编码。 这需要你却写更多的代码,它不会那么漂亮。

为了提高输出性能写所有输出段每到一个数组的索引,并且只使用一个连接创建所有输出时的方法和单一的innerHTML方法来输出这个文本的页面。 这将高达4倍减产执行。

你有没有想过一个实现此<canvas>版本? 它不会在IE浏览器,直接,当然,和副手我不知道它是否会更快或更慢。 你也可以尝试用处理。

这将需要大量的变化和重写的,但你可以创建一个新的缓动函数jQuery和张贴动画。 然后,每个粒子你也只是一次颁布的动画()与您缓和的功能和作用,必须根据这些:

  • 随机
  • 当前时间(新日期())模一定数量
  • 一个单个人持有方向

思路:

假如你不想改变你的代码,你可以尝试设置粒子与一些随机超时飞行第一个跑飞时,()。 它可以改变这一切都执行方式。 不知道是否可以帮助或者使它虽然速度较慢;)

第二件事是质量。 jQuery的动画确实太顺利。 您可以将动画的你,而不是粒子,只是缠得降低,并提高速度和使用的setTimeout使其移动同样的速度,现在的距离。

分类:JavaScript的 时间:2015-03-15 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.853 (s). 10 q(s)