JavaScript의 하위 수준 하위 집합

저는 Ultra HD 4K에서 최대 6x6배로 확장되는 픽셀 아트 및 NFT용 그림 편집기를 작업 중이며 때때로 작은 크기의 아트워크는 크기가 최대 512x512가 될 수 있습니다. 이 프로젝트의 이름은 https://pixa.pics/입니다.



픽셀의 필드를 심도 있게 제어하기 위해 의도적으로 저수준 자바스크립트 함수로 필터를 그리거나 적용할 때 색상을 계산하려고 할 때 문제가 발생하는데, 자, 간단한 계산을 해보자. Javascript 엔진에 대한 표시가 부족하여 정말 느릴 수 있습니다!



webassembly, webgl 등과 같은 많은 새로운 것을 배울 필요가 없는 솔루션은 무엇입니까?? EASY --> 매우 간단합니다. 성능과 관련하여 가장 정확한 IMHO 솔루션은 asm.js 및 LLJS을 발견한 것입니다. 실제로 좀 더 "어려운"프로그래밍 언어를 수행한 경우 어떤 유형을 지정해야 하는지 의 데이터가 처리되고 어떤 방식으로 짧은 숫자인지, 소수점이 있는 숫자인지 또는 일부 텍스트인지 등을 말해야 합니다.

여기 Javascript에서는 이렇게 합니다!

// Initianlize it with the type "Int" the "|" (bitwise) operator will make it be an entire number either positive or negative

var i = 0;
i = (i+1)|0;

// Inititalize it with the type "Unsigned Int", the operator looking like a thing that should seem fast simply tells it has to be POSITIVE when it leaves the precedent area at execution, it just make it positive always... Because passed after the before-lasting bit that tells the signed integer it can be positive or negative, it will require to store the variables into a double (which is like two times heavier to store) instead if it knows it will stay positive, it maybe doesn't have again to allocate useless ressources

var x = i >>> 0;

// This code will make the left side of the "0xFF" (being 255 in hexadecimal) a number between 0 and 255, very useful it tells in this example the compiler to not need to allocate a too large variable deep-down in the level of the processing unit...

var y = x & 0xFF;

..."Just lookat asm.js and LLJS +ArrayBuffer/Dataview/TypedArray!!!"

보너스:

// http://michalbe.blogspot.com.br/2013/03/javascript-less-known-parts-bitwise.html
// http://jsperf.com/bitwise-vs-math-object
// http://united-coders.com/christian-harms/results-for-game-for-forfeits-and-the-winner-is/
// https://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/
// https://dreaminginjavascript.wordpress.com/2009/02/09/bitwise-byte-foolish/
// http://jsperf.com/math-min-max-vs-ternary-vs-if/24

"use strict";

var PI = Math.PI;
var HALF_PI = PI * 0.5;
var TWO_PI = PI * 2;
var RADIAN = 180 / PI;

// Max int for simple bitwise operations
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Signed_32-bit_integers
var MAX_SIGNED_32_BIT_INT = Math.pow(2, 31) - 1;
var MIN_SIGNED_32_BIT_INT = ~MAX_SIGNED_32_BIT_INT;

// ECMAScript 6 - MIN/MAX safe integer
if (Number.MAX_SAFE_INTEGER === void 0) {
  Number.MIN_SAFE_INTEGER = -( Number.MAX_SAFE_INTEGER = Math.pow(2, 53) - 1 );
}

function ABS_INT(n) {
  return (n ^ (n >> 31)) - (n >> 31);
}

function MAX_INT(a, b) {
  return a - ((a - b) & ((a - b) >> 31));
  //return a ^ ((a ^ b) & -(a < b));
  //  var c = a - b;
  //  return a - ((c >> 31) & 0x1) * c;  
}

function MIN_INT(a, b) {
  return a - ((a - b) & ((b - a) >> 31));
  // return b ^ ((a ^ b) & -(a < b));
}

function CLAMP_INT( x, min, max ) {
  x = x - ((x - max) & ((max - x) >> 31));
  return x - ((x - min) & ((x - min) >> 31));
  //return ( n > max ) ? max : ( n < min ) ? n : min;
}

function IS_INT_POWER_OF_TWO( value ) {
  return ( value & ( value - 1 ) ) === 0 && value !== 0;
}

function PLUS_ONE_INT(n) { // slower than ++
  return -~n;
}

function MINUS_ONE_INT() { // slower than --
  return ~-n;
}

function IS_ODD_INT(n) {
  return (n & 1) === 1;
}

function ARRAY_SWAP_INT(array, i, j) {
  array[i] ^= array[j];
  array[j] ^= array[i];
  array[i] ^= array[j];
}

function HAS_SAME_SIGN(a, b) {
  return (a ^ b) >= 0;
}

function POW_OF_2_INT(n) { // === Math.pow(2, n)
  return 2 << (n - 1);
}

function AVG_INT(a, b) { // a + b / 2
  return (a + b) >> 1;
}

function TOGGLE_A_B_INT(n, a, b) { // if(x==a) x=b; if(x==b) x=a;
  return a ^ b ^ n;
}


function SET_BIT(n, bit) {
  return n | (1 << bit);
}

function CLEAR_BIT(n, bit) {
  return n & ~(1 << bit);
}

function MODULO_INT(numerator, divisor) { // 600% faster out of function than %
  return numerator & (divisor - 1);
} 

https://gist.github.com/leodutra/63ca94fe86dcffee1bab (내 것이 아님)

성능에 대한 이 힌트로 훌륭한 작업을 계속하십시오. 그리기 소프트웨어의 경우 300% 성능 향상은 대부분 JS를 유지하기에 충분했습니다!