JavaScript의 저수준 하위 집합

JavaScript의 저수준 하위 집합

2022-10-19 last update

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



문제는 픽셀의 필드를 깊이 제어하기 위해 저수준 자바스크립트 함수로 의도적으로 필터를 그리거나 적용할 때 색상을 계산하려고 할 때 발생합니다. 하지만 이봐, 간단한 계산을 해보자. 컴퓨터에서는 쉽지만 자바스크립트 엔진에 대한 표시가 없는 자바스크립트는 정말 느릴 수 있습니다!



webassembly, webgl 등과 같은 많은 새로운 것을 배울 필요가 없는 솔루션은 무엇이었습니까? EASY --> VERY SIMPLE, 성능과 관련하여 가장 정확한 IMHO 솔루션은 사실 asm.jsLLJS에 대한 나의 발견이었습니다. 실제로 더 "어려운"프로그래밍 언어를 수행했다면 어떤 유형을 지정해야 하는지 알 수 있을 것입니다. 의 데이터가 처리되고 있으며 짧은 숫자인지, 소수가 포함된 숫자인지 또는 일부 텍스트인지 등을 말해야 합니다.

여기 자바스크립트에서는 이렇게 합니다!


// 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를 유지하기에 충분했습니다!