为什么我应该使用requestAnimationFrame而不是setTimeout或setInterval？

这个自我回答的问题是一个文档示例.

主要更新.

考虑到Chrome主要版本尚未发布,Chrome Canary 59 的新型Ignition + Turbofan引擎已经解决了这个问题.测试显示相同的时间let和var声明的循环变量.

原始(现在是静音)问题.

当使用let在forChrome上循环运行速度非常缓慢,相比于移动变量外刚内循环的范围.

for(let i = 0; i < 1e6; i ++); 

需要两倍的时间

{ let i; for(i = 0; i < 1e6; i ++);}

到底是怎么回事？

Snippet演示了差异,只影响Chrome,只要我记得Chrome支持,就一直如此let.

var times = [0,0]; // hold total times
var count = 0;  // number of tests

function test(){
    var start = performance.now();
    for(let i = 0; i < 1e6; i += 1){};
    times[0] += performance.now()-start;
    setTimeout(test1,10) …

找到300*行的长度

首先,我已经阅读了为什么我的WebAssembly功能比JavaScript等效的慢？

但它对这个问题没有什么启示,而且我投入了大量的时间,很可能是那些黄色的东西.

我不使用全局变量,我不使用任何内存.我有两个简单的函数,可以找到一个线段的长度,并将它们与普通的旧Javascript中的相同内容进行比较.我有4个参数3个本地人并返回一个浮点数或双倍.

在Chrome上,Javascript比webAssembly快40倍,而在Firefox上,wasm 比Javascript慢近300倍.

jsPref测试用例.

我在jsPref WebAssembly V Javascript数学中添加了一个测试用例

我究竟做错了什么？

或

1. 我错过了一个明显的错误,不好的做法,或者我正在遭受编码器的愚蠢.
2. WebAssembly不适用于32位操作系统(赢得10台笔记本电脑i7CPU)
3. WebAssembly远非现成的技术.

请选择1.

我已经阅读了webAssembly用例

通过定位WebAssembly重用现有代码,嵌入在更大的JavaScript/HTML应用程序中.这可以是简单的帮助程序库,也可以是面向计算的任务卸载.

我希望我可以用webAssembly替换一些几何库来获得一些额外的性能.我希望它会很棒,比10倍或更快.但是WTF要慢300倍.

UPADTE

这不是JS优化问题.

为了确保优化具有尽可能小的效果,我使用以下方法测试以减少或消除任何优化偏差.

• 计数器c += length(... 以确保执行所有代码.
• bigCount += c确保执行整个功能.不需要
• 每个功能4行,以减少内联歪斜.不需要
• 所有值都是随机生成的双精度数
• 每个函数调用返回不同的结果.
• 在JS中添加较慢的长度计算Math.hypot用于证明代码正在运行.
• 添加了空调用,返回第一个参数JS以查看开销

// setup and associated functions
    const setOf = (count, callback) => {var a = [],i = 0; while (i < count) { a.push(callback(i ++)) } return a };
    const rand  = (min = 1, max = …

徒劳地尝试编写完美的javascript我正在解决Javascript堆的问题.我已经把它降到最低水平我可以但我已经用完了选项,并且不明白发生了什么(我的猜测是rAF开销,但猜测不计算)

堆的锯齿图案(浅蓝色)

时间轴来自简单的整页画布粒子渲染.练习的目的是减少堆锯齿的振幅,并希望也增加清理之间的时间.

仔细观察,堆每60秒钟增长大约15k,每隔~1秒从3.3MB下降到2.4MB

我不明白的是时机和增长量15K

堆在执行空闲之前增长15kb,并且在以下函数返回空闲之后~0.015ms(这是我的顶级函数)

var renderList = [];    
var stop = false;
var i;

function update(timer) { // Main update loop
    if(!stop){
        requestAnimationFrame(update);
    }
    for(i = 0; i < renderList.length; i ++){
        renderList[i](timer,ctx, w, h);            
    }
}

我对代码所做的一切都是减少或改变堆增长的位置.分配配置文件显示我没有分配任何内存.GC在CPU配置文件中为0.08%(我正在做什么,我不知道？,它是否也管理堆？)

有人可以向我解释一下这个内存的用途是什么吗？以及我如何减少它或使线条平坦？

我知道我可以做任何事情,但目前我还没有最清楚的想法是什么？很高兴知道.

该片段只是从中调用的代码update(上面的代码片段)我不认为它是相关的,但以防万一.它是在堆增长之前执行并返回的代码.

        var p,d,s;
        var renderCount = 0;
        var fxId = 0;
        var lastTime;
        var frameTime = 0;
        var minParticles = 10;
        var particleCount = minParticles;
        var frameSum = 0;
        var frameAve = 0;
        var frameWorkTime = …

当调用绑定方法this->UpdateB = std::bind(&Test::Update, this); （使用 using 调用test.UpdateB()）时，其整体性能比直接调用函数要慢得多。test.Update()

性能下降也会影响该方法中完成的工作。

使用站点快速工作台，我运行下面的代码片段并得到以下结果

#include <functional>
#include <benchmark/benchmark.h>


typedef unsigned u32;    
typedef uint64_t u64;       
constexpr auto nP = nullptr;    
constexpr bool _F = false;      
constexpr bool _T = true;       

constexpr u64 HIGH_LOAD = 1000000000;
constexpr u64 LOW_LOAD = 10;

struct Test {
    u32 counter{100000};
    u64 soak{0};
    u64 load{10};
    bool isAlive{_T};
    std::function<bool()> UpdateB;
    Test() { UpdateB = std::bind( &Test::Update, this); }
    bool Update() {
        if (counter > 0) { counter …

作为一个兼职项目,我正在研究一些几何实用程序,并遇到了一个相对简单的问题,似乎有一个不那么简单的解决方案.

问题涉及EPSILON对于问题来说太小了.为了看两个三角形是否相似,我以每个三角形的余弦形式锻炼3个内角,然后对它们进行排序.然后我测试Math.abs(t1[0]-t2[0]) < EPSILONt1是哪个三角形,t2另一个包含三个角度.

对于我知道相似的三角形,我得到了大约20%-80%的失败率.当我把EPSILON带到一个更大的值时,例如仍然是一个非常小的0.0000001,没有失败(在我让测试运行的时候没有).

下面是提取的相关三角函数,我还将测试代码作为演示文稿包含在下面.单击按钮并运行测试并显示结果.三角形是随机生成的.每隔一段时间就创建两个相似的三角形,其中大约一半是精确副本,其余的是副本,但是缩放,镜像,旋转和vec顺序混洗,同时仍然保持相似性

我想知道如何计算合理的EPSILON,这将减少不正确的结果,但保持系统尽可能准确？

虽然测试代码中还有可能存在其他错误,我将继续检查.

    const EPSILON =  Number.EPSILON
    function Triangle(p1,p2,p3){
        this.p1 = p1;
        this.p2 = p2;
        this.p3 = p3;
    }
    Triangle.prototype.p1 = undefined;
    Triangle.prototype.p2 = undefined;
    Triangle.prototype.p3 = undefined;
    Triangle.prototype.isSimilar = function(triangle){
        var a1,b1,c1,a2,b2,c2,aa1,bb1,cc1,aa2,bb2,cc2; // 
        var t1 = [];
        var t2 = [];
        var sortF = function(a,b){ return a-b };
        // get the length squared and length of each side
        a1 = Math.sqrt(aa1 = Math.pow(this.p1.x - this.p2.x, 2) +  Math.pow(this.p1.y - this.p2.y, 2));
        b1 …

缓慢渲染

我正在使用Bresenham 的线条算法来实时渲染像素艺术线条。它一次渲染 1 个像素，ctx.rect(x,y,1,1)这是一个缓慢的操作。我无法使用像素缓冲区，这会大大减少渲染开销，因为我正在使用复合操作、alpha 和过滤器（其中一些会污染画布）。

功能

function pixelArtLine(ctx, x1, y1, x2, y2) {
    x1 = Math.round(x1);
    y1 = Math.round(y1);
    x2 = Math.round(x2);
    y2 = Math.round(y2);
    const dx = Math.abs(x2 - x1);
    const sx = x1 < x2 ? 1 : -1;
    const dy = -Math.abs(y2 - y1);
    const sy = y1 < y2 ? 1 : -1;
    var e2, er = dx + dy, end = false;
    ctx.beginPath();
    while (!end) {
        ctx.rect(x1, y1, 1, 1); …

我遇到了以下有关如何终止未标记为功能的reduce的文章，但包含了很多有关数组突变为功能的问题。

在主要答复突变数组提前打破迭代出来，但阵列可以很容易地推回拼接项目，有点暧昧的解决方案，可以说是不是在所有的功能可以恢复到原来的状态。

但是，如果可以对项目进行修改（变异），则许多算法都将获得显着优势。

对于Javascript（单线程（无工作程序），无代理），如果修改只是暂时存在，是否将其视为变异？或者函数返回后，突变是否只是副作用。

以下功能是增效剂吗？

function mutateAndRepair(arr) {  // arr is an array of numbers
    arr[0]++;
    arr[0]--;
}

• 该数组包含1个或多个项目。
• 数组的第一项（索引0）是最大安全整数范围内的数字。
• 该数组不是共享缓冲区
• 代理未监视该阵列

我认为这不是变异，因为变异仅在函数执行时存在，并且由于JS阻止，因此没有其他代码能够看到变异，因此没有副作用。

考虑到约束条件是否符合JavaScript编码人员使用的通用功能范例？

我正在与我自己的 webAssembly JS 到 wasm 编译器的错误作斗争。我不确定尺寸格式是否正确以及限制是什么

例如127字节的数据段

00 41 00 0b 7f ...data
            ^^ size 127 bytes

然后是128字节

00 41 00 0b 8001 ...data
            ^^^^ size 128

我猜测高位如果打开表示后面将有一个字节。这意味着下一步将是

00 41 00 0b ff7f ...data
            ^^^^ size 16383

00 41 00 0b 808001 ...data
            ^^^^^^ size 16384

因此，长度为 nibit 顺序（3 字节 6 nibit），103254其中 nibit 1 和 3 具有最高位设置，以便查看S1110000 S3332222 A5554444S 始终打开且 A 始终关闭的位，并且数字表示 nibit 位顺序。

• 这是正确的吗？这种格式可以表示的最大值是多少？

• 这是唯一的尺寸格式吗？

• 是否有一个标准算法可以从表示长度的 Javascript 数字转换为这种格式，因为目前我的解决方案看起来非常h​​acky？

我想使用画布显示视频，包括播放暂停功能，允许用户通过单击画布来切换播放，我还希望在视频暂停时在视频顶部绘制叠加层。这是如何在 javascript 中完成的？

画布可用于显示来自各种来源的视频。此示例展示了如何将视频加载为文件资源、显示它并在屏幕播放/暂停切换上添加一个简单的点击。

只是一个图像

就画布而言，视频只是一个图像。您可以像绘制任何图像一样绘制它。不同之处在于视频可以播放并且有声音。

获取画布和基本设置

// It is assumed you know how to add a canvas and correctly size it.
var canvas = document.getElementById("myCanvas"); // get the canvas from the page
var ctx = canvas.getContext("2d");
var videoContainer; // object to hold video and associated info

创建和加载视频

var video = document.createElement("video"); // create a video element
video.src = "urlOffVideo.webm"; 
// the video will now begin to load.
// As some additional info is needed we will place the video …