- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我只是想为这些方 block 制作动画,但我发现性能很差,所以我想知道我可以做些什么来减少它运行一段时间后发生的减速,我想我必须做一些清理工作?
这是 fiddle :
<header id ="space">
<div id="space_content">
</div>
</header>
var universe = ($(window).width() * 400) / 80;
console.log(universe);
var i = 0;
while(i < universe) {
var rand = Math.floor(Math.random() * 3) + 1;
var pulse = Math.floor(Math.random() * 500) + 20;
el = "<div class='star_wrapper'><div class='star' style='width:" + rand + "px; height:" + rand + "px; animation-duration:" + pulse + "s; " + "-webkit-animation-duration:" + pulse + "s;'></div>"
$('#space_content').append(el);
i++
}
最佳答案
您可以将您的元素设置为 position:fixed;
,因为这将为每个元素提供一个单独的位图。
但是,正如@vals 在他的回答中指出的那样,为这么多元素设置动画最终是行不通的。
这将是 Canvas 的一个很好的候选者,因为您可以在 Canvas 上同时绘制星星和动画(例如,参见我自己的 front page here 以了解类似的 Canvas 方法)。
您可以使用已有的大部分逻辑,而不是将星星绘制到 Canvas 上,而不是创建 DOM 元素。将动画传输到 JavaScript 以移动星星。
创建单个元素( Canvas )并根据窗口大小调整其大小:
<canvas id="stars"></canvas>
JavaScript:
var canvas = document.getElementById('stars'),
ctx = canvas.getContext('2d');
window.onresize = sizeCanvas;
function sizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
然后绘制星星并为其制作动画(此处未显示,但您可以使用一个简单的框架作为基础):
(function loop() {
/// clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
...animate and plot the stars here (recommomend using a star "object" ...
requestAnimationFrame(loop); /// high-efficient timer for animations
})();
关于javascript - 我怎样才能让这个动画在 javascript 中表现更好?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21507789/
我正在用 C++ 开发一个程序,我必须实现一个 cron。由于不同的原因,这个 cron 应该每小时和每 24 小时执行一次。我的第一个想法是创建一个独立的 pthread 并在每次 1h 内休眠。这
我需要向同一场景几何添加多个体素(立方体等于),但每个体素具有不同的纹理。 我的体素超过 500 个,导致性能出现严重错误。 这是我的代码: texture = crearTextura(voxel.
对于 MySQL 数据库,我有 2 个场景,我不确定该选择哪一个,并且对于一些表我也遇到了同样的困境。 我正在制作一个仅供成员(member)访问的网络应用程序。每个成员都有自己的交易、费用和“列表”
我想知道一个简单的事情: 当设置一个被所有 child 继承的样式时,是否建议最具体? Structure: html > body > parent_content > wrapper > p 我想
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
这些天我正在阅读有关 JPA 的内容。我了解到可以在 JPQL 中使用 explicit 或 implicit JOIN。 显式加入 em.createQuery(“SELECT b.title, p
我有一种情况需要连接几个字符串以形成一个类的 id。基本上,我只是在列表中循环以获取对象的 ToString 值,然后将它们连接起来。 foreach (MyObject o in myList)
我正在检查我的游戏在拖尾效果下的性能会降低多少。但我注意到每秒的操作次数更多了。这怎么可能? 这是怎么回事... context.fillRect(0, 0, 500, 500); // cl
如果我可以选择使用全局变量或传递变量,哪个选项在速度和内存使用方面更好? // global variable function func(){ global $var; echo $var;
我有一个类似这样的表“tbl”:ID bigint(20) - 主键,自增字段1字段2字段3 该表有 60 万多行。 查询:SELECT * from tbl ORDER by ID LIMIT 60
谁能告诉我,我如何比较 TSP 最优和启发式算法?我已经实现了 TSP,但不知道如何比较它们。事实上,我怎样才能找到 TSP 的最优成本?有什么方法或猜测吗? 谢谢 最佳答案 用众所周知的基准实例检查
我有一个 NSTextStorage里面有长文本(比如一本书有 500 页,当前字体在设备上超过 9000 页)。我以这种方式为 textcontainer 分发此文本: let textStorag
我有一个根据邮政编码搜索项目的应用程序。 在搜索邮政编码时,我返回了来自该城市/社区的所有产品(通过解析邮政编码完成)。 我现在需要根据与原始邮政编码的距离对这些产品进行分类。 我将纬度/经度存储在数
我有许多进程(大约100到1000个进程),每个进程都必须向其他进程(例如大约10个)发送一些数据。 (通常,但不一定总是这样,如果A发送给B,B也发送给A。)每个进程都知道必须从哪个进程接收多少数据
我知道无状态组件使用起来更舒服(在特定场景下),但是既然你不能使用shouldComponentUpdate,这是否意味着组件将在每次props更改时重新渲染?我的问题是,使用带有智能 shouldC
我正在研究 Google Pagespeed 的加速页面加载时间指南列表。其中之一是缩小 CSS 和 JS 文件。 由于这些文件经常更改,我正在考虑使用 PHP 脚本根据请求(来自浏览器)即时缩小此脚
我正在尝试从下表构建 SQL 查询(示例): Example of table with name "performances" 这是带有运动表现的表格。我想从这个表中选择每个学科和一组一个或多个类别
假设我们有一个字符串 var "sA",我想检查字符串 "123"是否在 sA 的末尾。 什么更好,为什么: if(sA.length() > 2) sA.substr(sA.length()-3)
关于受这篇文章启发的可参数化查询 LINQ group by property as a parameter我获得了一个很好的参数化查询,但在性能上有一个缺点。 public static void
| 和| 之间有什么主要区别吗?和 + 从长远来看会影响代码的性能吗?或者都是 O(1)?我正在使用的代码是这样的: uint64_t dostuff(uint64_t a,uint64_t b){
我是一名优秀的程序员,十分优秀!