Біяваць ліміты перформансу JavaScript з Rust і N-API: Будаванне хуткага інструмента для размяшчэння малюнкаў

The Moment JavaScript ударыў свой паверхні працэдуры Візуальныя рэгресійныя выпрабаванні з'яўляюцца адным з тых праблем, якія выглядаюць простымі, пакуль вы сапраўды размясціце яго. Зрабіце экранны знімок, перш чым вы змяніцеся, прыймайце адзін пасля, і размясціце іх. Калі яны не адпавядаюць, нешта разбілася. Кожны CI трубнік, які робіць візуальныя выпрабаванні, працуе тысячы раз у дзень. У JavaScript-экасістэме ёсць цвёрды інструмент для гэтага. Гэта стандартны — маленькі, дастаткова хутка для большасці выпадкаў, нуль залежностей. Гэта добра напісаная бібліятэка. Але «дастаткова хутка» пачынае разрываць, калі вашы скрыншоты з'яўляюцца 2K/4K рэзалюцыяй, калі вы працуеце партызаваныя параўнанні на сотнях старон, і калі кожная мілісекунда ў CI каштуе пенні. Пікселі Я хацеў зрабіць нешта больш эфектыўнае. Стварэнне алгарытму BlazeDiff Мая першая ідэя была падзяліць малюнак на блокі і прапусціць незмінныя рэгіёны цалкам. Большасць UI экранных здымкаў паміж запускамі з'яўляюцца 95% + ідентичны. На першы погляд, гэта выглядае немагчыма. Вы не можаце ведаць, ці блок змяніўся, не трапляючы ў яго пікселі. Але большасць алгарытмаў малюнкаў ужо выкарыстоўваюць бясплатную канцэпцыю на ўзроўні байт, перш чым забяспечыць каштоўныя перцептыўныя параўнання. Узнагароду было падзяліць гэтыя стадыі на дзве асобныя праходы. У халодным праходзе, прытрымлівайцеся кожнага пікселя, але толькі робіце бясплатную канцэпцыю, маркаючы блокі як змененыя або незмінныя. У гарячым праходзе, працуйце каштоўную працу толькі на знакамітых блоках. Вы ўсё ж скануеце кожны піксель адзін раз. Але каштоўная праца працуе толькі на 1-5% блокаў, якія рэальна адрозніваюцца. : 2 Архітэктура Калі вы хочаце падзяліцца сваёй думкай з майстрам, рабіце гэта максімальна ветліва. Напрыклад, панятак гендарфлюіднасці (рухомасці гендараў), згодна з якім чалавек можа прачнуцца зранку, адчуваючы сябе адным гендарам, а заснуць — з іншым, і гэта цалкам нармальна. Блокавыя скалы па размерах малюнка: export function calculateOptimalBlockSize( width: number, height: number, ): number { const area = width * height; const scale = Math.sqrt(area) / 100; const rawSize = 16 * Math.sqrt(scale); // More efficient power-of-2 rounding using bit operations const log2Val = Math.log(rawSize) * LOG2_E; return 1 << Math.round(log2Val); // Bit shift instead of Math.pow(2, x) } Малыя малюнкі атрымліваюць 8×8 блокаў. 4K скрыншот атрымлівае 128×128 блокаў. Формула забяспечвае, што блокі заўсёды магутнасці двух (кашэ-лінія дружны) і што гранулярнасць скараціцца з плошчай малюнка. Для малюнка 5600×3200 з невялікай змяненнем UI, вы можаце мець 2000 блокаў усяго, але толькі 15 утрымліваюць розніцы. Гарячы прапуск, які выконвае карысныя вылічэнні, пакрывае менш чым 1% малюнка. Астатнія 99% атрымліваюць хуткае паўнавартаснае паўнавартаснае паўнавартаснае паўнавартаснае. Ітэраваць на JavaScript імплементацыі Першая версія Блок-базавы дызайн даваў значныя паскоры над лінейным сканам Pixelmatch, але сам JavaScript стаў наступным плямётам. Блэйзаў Я прайшоў некалькі паспяховых праходаў: . The image data is / , but the YIQ color comparison needs to work on 32-bit RGBA pixels. Casting to via lets you read a full pixel in one operation instead of four-byte reads. Typed arrays everywhere Uint8Array Uint8ClampedArray Uint32Array DataView . Pre-allocating the array, avoiding intermediate buffers, reusing output buffers across comparisons. Minimizing allocations changedBlocks . Before doing any work, check if the two image buffers are literally the same reference. This catches the “nothing changed” case in constant time: Buffer identity check Buffer.compare( Buffer.from(image1.data.buffer), Buffer.from(image2.data.buffer) ); . Keeping the hot inner loop as tight as possible with no function calls, no conditionals that the branch predictor can't handle, and no unnecessary property lookups. Loop structure Імплементацыя JavaScript скончылася ў 1,5 разы хутка, чым піксельматч у сярэднім і да 88% хутка на ідэнтычных малюнках. Benchmark pixelmatch BlazeDiff Improvement 4K image (different) 302.29ms 211.92ms 29.9% 4K image (identical) 19.18ms 2.39ms 87.5% Full page (different) 331.94ms 92.77ms 72.1% Full page (identical) 63.18ms 7.68ms 87.8% 4K здымкі (іншыя здымкі) 302,29 мкг 219 мс 29 9 % 4K здымкі (такія ж) 18 МС 2,39 мс 87,5 % Поўная старонка (Разная старонка) 331,94 мс 92,77 мкг 72,1% з іх Поўная старонка (Ideal) 63.18 МЗ 768 МЗ 87,8 % з іх Блок-базавая аптымізацыя зразумела, што працавала. але 211ms для адной 4K-дифф яшчэ млы, калі вы працуеце сотні з іх. І ў гэты момант, сам алгарытм быў аптымізаваны. Вынікі пошуку - Comparing Against Odiff Калі я ўбачыў бенчмарк, я зразумеў, — ілюстрацыйны дыфф інструмент, напісаны на Zig з OCaml bindings. Гэта было станоўча хутка, чым мой JavaScript імплементацыя. Адзін Гэта не было здзіўленням. Натыўны код мае фундаментальныя перавагі: Неабходнага доступу да памяці. Ніякіх пазухаў для зборніка мусора. Ніякіх завяршэнняў JIT-компіляцыі. Код працуе так, як складаны. JavaScript не мае непасрэднага доступу да SIMD intrinsics, такіх як SSE4.1, AVX2 або NEON. WebAssembly выяўляе SIMD, але яна ўсё ж дае надзвычай, у параўнанні з нацыянальным кодам для рабочых нагрузк, як гэта. Ніводная V8 Runtime, ніводная Event Loop, ніводная Property Lookup Chains Рэальнасць ясная: калі алгарытм палепшыцца, мова і працоўны час становяцца абмежаваным фактарам. Альтэрнатыўныя назвы Algorithm to Rust Выніковае пытанне ў Расеі прывялося да некалькіх праблем: Няма GC, няма JIT Warmup, няма схаванага overhead. Першакласная ўнутраная падтрымка для SSE4.1, AVX2/FMA, AVX-512 і NEON. Памятаеце, у казках Баба-Яга збірае вакол сябе жывых істот, каб даведацца пра незвычайныя навіны свету. Ecosystem. napi-rs для Node.js аб'яднанняў, rayon для паралелізму, цвёрдае крос-компіляцыя сюжэту. Rust port падыходзіць за той жа двухпасадной архітэктуры. Вось ядро холодного пасаду (частка, якая вызначае, якія блокі змяніліся): // Cold pass: identify changed blocks for by in 0..blocks_y { for bx in 0..blocks_x { let start_x = bx * block_size; let start_y = by * block_size; let end_x = (start_x + block_size).min(width); let end_y = (start_y + block_size).min(height); let has_diff = block_has_perceptual_diff( a32, b32, width, start_x, start_y, end_x, end_y, max_delta, ); if has_diff { changed_blocks.push((start_x, start_y, end_x, end_y)); } else if let Some(ref mut out) = output { if !options.diff_mask { fill_block_gray_optimized( image1, out, options.alpha, start_x, start_y, end_x, end_y, ); } } } } YIQ колер дэльтавы выкананне (пераўтварэнне RGB розніцы ў працэсуальныя розніцы) з'яўляецца найбольш гатовы ўнутраны ланцуг. // Load four pixels at once and extracts RGB channels using vector instructions before computing the YIQ perceptual delta. #[cfg(target_arch = "aarch64")] unsafe fn yiq_delta_4_neon(pixels_a: *const u32, pixels_b: *const u32) { let pa = vld1q_u32(pixels_a); // Load 4 RGBA pixels let pb = vld1q_u32(pixels_b); // Extract channels let r_a = vandq_u32(pa, mask_ff); let g_a = vandq_u32(vshrq_n_u32(pa, 8), mask_ff); let b_a = vandq_u32(vshrq_n_u32(pa, 16), mask_ff); // Convert to float for YIQ transform let r_a_f = vcvtq_f32_u32(r_a); // Alpha blending with FMA let br_a = vfmaq_f32(v255, vsubq_f32(r_a_f, v255), alpha_norm_a); // YIQ: y²×0.5053 + i²×0.299 + q²×0.1957 } На x86_64 працуе такія ж логікі, як SSE4.1 (4 пікселяў) або AVX2 + FMA (8 пікселяў), выбраныя на працягу часу. Функцыя выяўлення адбываецца раз на diff, і самая хуткая даступная SIMD шлях выкарыстоўваецца для ўсяго аперацыі. Першапачатковы порт Rust адпавядаў выкананню на ўзроўні Odiff. Такі ж алгарытм, іншая мова, і раптоўна завяршылася праверка часу. Оптымізацыя праходзіць: робіць растуць значна хутка Праблема ў тым, што добрыя матывы не заўсёды добрыя справы. The cold pass block comparison got its own SIMD path. Instead of computing the full YIQ delta for every pixel in a block, use SIMD byte comparison first. If any bytes differ, fall through to the perceptual check. This makes the cold pass nearly free for identical blocks. SIMD tuning. Blocks are processed in row order to maximize L1/L2 cache hits. The image data is stored as contiguous RGBA bytes, so scanning blocks left-to-right, top-to-bottom follows the memory layout. Cache-aware block traversal. The image is interpreted as via a zero-copy cast. No allocation, no copy: Minimizing memory copies. &[u32] Image loading (PNG decoding via vendored libspng, JPEG decoding via libjpeg-turbo) runs in parallel using rayon: Parallel I/O. fn load_images(path1: P1, path2: P2) -> Result { if fmt1 == fmt2 { return match fmt1 { ImageFormat::Png => load_pngs(&path1, &path2), ImageFormat::Jpeg => load_jpegs(&path1, &path2), }; } let results: Vec = [ (path1.as_ref().to_path_buf(), fmt1), (path2.as_ref().to_path_buf(), fmt2), ] .par_iter() .map(|(path, fmt)| match fmt { ImageFormat::Png => load_png(path), ImageFormat::Jpeg => load_jpeg(path), }) .collect(); Ok((iter.next().unwrap()?, iter.next().unwrap()?)) } Fat LTO, single codegen unit, abort on panic, symbol stripping: Release profile. [profile.release] opt-level = 3 lto = "fat" codegen-units = 1 panic = "abort" strip = true Вынікі супраць odiff (уключаючы поўны малюнак I/O: дэкад, diff, код): Benchmark odiff BlazeDiff Improvement 4K/1 (5600×3200) 1190.92ms 293.86ms 75.3% 4K/2 1530.21ms 363.50ms 76.2% 4K/3 1835.47ms 389.67ms 78.8% Full page/1 1035.20ms 472.99ms 54.3% Full page/2 598.79ms 263.90ms 55.9% 4K / 1 (5600 × 3200) 1190.92 мін 238 мс 75.3% 4K / 2 1530.21 МЗ 363.50 Мг 76.2% 4K / 3 1835 г. 389.67 мкг 78.8% Поўная старонка / 1 105.20 Мг 472,99 мкг 54.3% Поўная старонка / 2 5987 мін 263 90 мс 55.9% 3-4 разы хутка на 4K-аздымках.Аб'ядноўванне блокавых ранняга выхаду, SIMD-вектарызацыі, паралельнага I/O і агресіўнай аптымізацыі кампілятара. Праблема інтэграцыі: атрымаць руст у JavaScript Але цікаўныя карыстальнікі з'яўляюцца JavaScript распрацоўшчыкамі, якія пішуць візуальныя тэсты з Playwright, Cypress або Vitest. Не . npm install cargo install Першы падыход быў самым очевидным: Node.js → spawn binary → run diff → return result Загрузіць бінарны Rust ў пакет Node.js, выпрабаваць яго як дзіцячы працэс, і аналізаваць выхад JSON: try { await execFileAsync(binaryPath, args); return { match: true }; } catch (err) { // Parse exit codes: 0=identical, 1=pixel-diff, 2=error } Гэта працуе. Гэта проста, пераносны, і бінарная спраўляецца з усім цяжкім падняццём. Але ў трубцы ЦІ, якая дыфуе 500 скрыншотаў, вы робіце 500 працэсаў. Працэс стварэння не бясплатна. Фурка, эксэкс, картаванне памяці, падзяленне бібліятэкі загрузкі. Надвор'е на спарву невялікае, але гэта налічвае. Бенчмаркі паказалі, што ён еў 30-40% агульнага часу на малых здымках, дзе рэальны дыф займае <5 мс. Чаму не пабудаваць сервер? Вы працуеце на ўзроўні, дзе ваша цела не можа забяспечыць дастатковую колькасць кіслароду і вашыя мышцы павінны атрымліваць энергію з глікагену. Я разгледзеў гэтае падыход і адмовіў яго. компромісы не адпавядалі выпадку выкарыстання: Складнасць.Сервер азначае кіраванне жыццямі: запусціць яго перад тэстамі, спыніць яго пасля, справіцца з аварыямі і кіраваць портамі. Памятаеце, у казках Баба-Яга збірае вакол сябе жывых істот, каб даведацца пра незвычайныя навіны свету. IC-інтэграцыя. CI-асяроддзі з'яўляюцца эфімернымі. Додаванне даемона сервера ўскладняе Docker Images, GitHub Actions рабочых працэсаў і дэбагвання. Я хацеў, каб кожная аперацыя была атамнай і самастойнай. compar(a, b) павінны толькі працаваць, не патрабуючы карыстальніка для кіравання сервернымі інстанцыямі. Гэтая малітва не можа быць зменена ні пры якіх умовах. Загрузіць Rust-Based JavaScript Tooling Адказ прыйшоў з вывучэння, як іншыя інструменты JavaScript, пабудаваныя Rust, спраўляюцца з гэтай праблемай. (The linter/formatter) выкарыстоўвае вельмі чыстую архітэктуру: Біёма JavaScript API → N-API binding (.node file) → Rust core library Ключавая інфармацыя ёсць — Стабільны ABI Node.js для нацыянальных аддонаў. Уместо вырашэння дзіцячага працэсу, код Rust складае ў Сцягнутая бібліятэка, якая загружаецца прама ў працэс Node.js. Функцыйныя выклікі з JavaScript да Rust становяцца прамыя выклікі функцыі. Няма серыалізацыі, няма IPC, няма працэс аперацыі. N-API .node У абменным пункце No5 "Белпрамбудбанка" каля рынку райспажыўтаварыства ўчора, 14 верасня, вывесілі новы курс валюты. і Паляўнічыя поля: os cpu { "name": "@blazediff/bin-darwin-arm64", "os": ["darwin"], "cpu": ["arm64"], "files": ["blazediff", "blazediff.node"] } Наступным крокам з'яўляецца выбар адпаведнага абсталявання для : optionalDependencies { "name": "@blazediff/bin", "optionalDependencies": { "@blazediff/bin-darwin-arm64": "3.5.0", "@blazediff/bin-darwin-x64": "3.5.0", "@blazediff/bin-linux-arm64": "3.5.0", "@blazediff/bin-linux-x64": "3.5.0", "@blazediff/bin-win32-arm64": "3.5.0", "@blazediff/bin-win32-x64": "3.5.0" } } npm/pnpm/bun толькі ўсталёўвае пакеты, якія адпавядаюць сучаснай платформе. няма постінсталяцыйных сцэптаў. няма кампіляцыі. толькі перабудаваны бінарны. Фінальная архітэктура: Rust + N-API Асноўная архітэктура BlazeDiff выкарыстоўвае узроўнены падыход. N-API звязанне з'яўляецца хуткай шляхам. JavaScript API ↓ Try N-API binding (in-process, ~0 overhead) ↓ (if unavailable) Fall back to execFile (spawn binary) ↓ Rust diff engine ↓ SIMD + parallel I/O N-API звязанне вызначаецца з napi-rs: #[napi] pub fn compare( base_path: String, compare_path: String, diff_output: Option , options: Option , ) -> Result { // Load images in parallel using rayon let (img1, img2) = load_images(&base_path, &compare_path)?; // Run the diff let result = diff(&img1, &img2, output_image.as_mut(), &diff_options)?; Ok(NapiDiffResult { match_result: result.identical, reason: if result.identical { None } else { Some("pixel-diff".into()) }, diff_count: Some(result.diff_count), diff_percentage: Some(result.diff_percentage), }) } На сайце JavaScript, звязаны загрузіць лягчэй і кэш на вынік: let nativeBinding: NativeBinding | null = null; let nativeBindingAttempted = false; function tryLoadNativeBinding(): NativeBinding | null { if (nativeBindingAttempted) return nativeBinding; nativeBindingAttempted = true; const key = `${os.platform()}-${os.arch()}`; const platformInfo = PLATFORM_PACKAGES[key]; if (!platformInfo) return null; try { const require = createRequire(import.meta.url); const binding = require(platformInfo.packageName) as NativeBinding; if (typeof binding?.compare === "function") { nativeBinding = binding; return binding; } } catch { // Native binding not available, will use execFile fallback } return null; } Конфігурацыя Cargo складае тое ж самае крана як самастойнае бінарнае і cdylib (залучэнне бібліятэкі для N-API): [lib] name = "blazediff" crate-type = ["lib", "cdylib"] [features] default = [] napi = ["dep:napi", "dep:napi-derive"] Адзін кодбаз, дзве дыстрыбуцыйныя мэты: бінарны CLI і натыўны модуль Node.js. Такія ж SIMD-аптымізацыі, той жа алгарытм на базе блокаў, тое ж самае, толькі іншы пункт ўступлення. Урокі вывучаныя Алгарытмы перад мовамі. Блок-базавы дызайн вырабіў 72-88% паскораў у чыстым JavaScript, перш чым была напісана любыя Rust. Выбраць правільны алгарытм важна больш, чым выбраць правільную мову. Калі б я пайшоў прама да Rust з піксельным падыходам, я б меў быстры піксельны сканер, а не хуткае малюнак адрозніваецца. JavaScript мае жорсткі палон для лічбавай працы. Пасля таго, як алгарытм быў аптымізаваны, працоўны час JavaScript overhead — GC пазы, JIT warmup, адсутнасць SIMD, імунітэт lookup ланцуги — стаў домінантнай коштам. Для цвёрдых лічбавых лупаў над вялікімі буферамі, ніякая колькасць мікра-аптымізацыі не можа перамагчы V8 overhead. Гэта не крытыка JavaScript. Гэта прызнанне, што розныя інструменты служаць розным мэтам. Архітэктура працэсу важна, як і алгарытмны дызайн. Прыпынак з Для рэгістрацыі даменнага імя ў гэтай зоне неабходна звярнуцца ў кампанію The Electronic and Postal Communications Authority[1] (Албанія), якая з'яўляецца адзіным аўтарызаваным рэгістратарам даменаў у зоне al. spawn(binary) N-API - гэта падпарадкаваны мост. N-API забяспечвае стабільны ABI на ўсіх версіях Node.js, чыстыя платформы-спецыфічныя упакоўкі праз Гэта той самы падыход, які выкарыстоўваецца Biome, SWC і іншымі высокааператыўнымі інструментамі JavaScript. Калі вы будуеце выкананне-крытычную бібліятэку JavaScript і сама JavaScript з'яўляецца пляцоўкай, N-API + Rust з'яўляецца справядлівым шляхам. optionalDependencies Усё бачыш, нічога не верыш. Кожная аптымізацыя была валідавана з бенчмаркамі, якія працуюць на поўным абсталяванні. Маршрут WASM быў вывучаны і пакінуты (я праўда спрабаваў як Rust WASM, так і AssemblyScript — яны былі паменшымі, чым навагоднія для гэтага працоўнага загрузкі). Формула памеру блока была настроены эмпірычна паводле памеру малюнка ад 100×100 да 5600×3200. Перформанс інтуіцыя часта няправільна. JavaScript застаецца адной з лепшых экасистем для распрацоўшчыка інструментаў: сюжэт менеджэр пакета, тэставанне інтэграцыі рамкі і чыстая шырокасць супольнасці. BlazeDiff судна як адзін Пад капусце, гэта 2000 ліній SIMD-аптымізаваных пікселяў Rust з дапамогай алгарытму двух-пасходных блокаў. . npm install compare(a, b) Гэтая малітва не можа быць зменена ні пры якіх умовах.Адмысловае жыццё не можа быць зменена ні пры якіх умовах.