ਹਾਈ-ਪਰਫਾਰਮੈਂਸ ਕਲਾਇੰਟ-ਸਾਈਡ ਇਮੇਜ ਪ੍ਰੋਸੈਸਿੰਗ
ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਇਮੇਜਾਂ ਨੂੰ ਪ੍ਰੋਸੈਸ ਕਰਨਾ ਹੁਣ ਇੱਕ ਮਿਆਰੀ ਲੋੜ ਬਣ ਗਿਆ ਹੈ। ਤੁਸੀਂ ਫੋਟੋ ਐਡੀਟਰ, ਐਸੇਟ ਟੂਲਕਿੱਟਸ, ਜਾਂ ਐਕਸੈਸਬਿਲਟੀ ਫਿਲਟਰ ਬਣਾ ਸਕਦੇ ਹੋ। ਆਪਣੇ UI ਨੂੰ ਰਿਸਪੌਂਸਿਵ ਰੱਖਣ ਲਈ, ਤੁਹਾਨੂੰ ਘੱਟ ਲੇਟੈਂਸੀ (low latency) ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
ਇੱਕ ਸਧਾਰਨ ਕੰਮ ਰੰਗਾਂ ਨੂੰ ਉਲਟਾਉਣਾ (color inversion) ਹੈ। ਇਸਦਾ ਮਤਲਬ ਹੈ RGB ਮੁੱਲਾਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਨੈਗੇਟਿਵ ਵਿੱਚ ਬਦਲਣਾ। ਜੇਕਰ ਤੁਸੀਂ 4K ਇਮੇਜਾਂ 'ਤੇ ਸਟੈਂਡਰਡ ਤਰੀਕਾ ਵਰਤਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਹਾਰਡਵੇਅਰ ਦੀਆਂ ਸੀਮਾਵਾਂ (bottlenecks) ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪਵੇਗਾ।
ਸਮੱਸਿਆ: ਨੈਈਵ ਇਟਰੇਸ਼ਨ (Naive Iteration)
ਜ਼ਿਆਦਾਤਰ ਡਿਵੈਲਪਰ getImageData() ਮੈਥਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਇਹ ਇੱਕ Uint8ClampedArray ਰਿਟਰਨ ਕਰਦਾ ਹੈ। ਇਹ ਐਰੇ ਪਿਕਸਲ ਨੂੰ Red, Green, Blue, ਅਤੇ Alpha (RGBA) ਚੈਨਲਾਂ ਵਜੋਂ ਸਟੋਰ ਕਰਦਾ ਹੈ।
ਇੱਕ ਸਟੈਂਡਰਡ ਲੂਪ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:
- ਹਰ ਇੱਕ ਬਾਈਟ ਰਾਹੀਂ ਲੂਪ ਕਰੋ।
- ਹਰੇਕ ਰੰਗ ਦੇ ਮੁੱਲ ਨੂੰ 255 ਵਿੱਚੋਂ ਘਟਾਓ।
- Alpha ਚੈਨਲ ਨੂੰ ਛੱਡ ਦਿਓ।
ਇਹ ਛੋਟੀਆਂ ਇਮੇਜਾਂ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ। ਪਰ 4K ਐਸੇਟਸ ਲਈ ਇਹ ਫੇਲ ਹੋ ਜਾਂਦਾ ਹੈ। ਇੱਕ 4K ਇਮੇਜ ਵਿੱਚ 8 ਮਿਲੀਅਨ ਤੋਂ ਵੱਧ ਪਿਕਸਲ ਹੁੰਦੇ ਹਨ। ਇੱਕ ਸਟੈਂਡਰਡ ਲੂਪ 33 ਮਿਲੀਅਨ ਤੋਂ ਵੱਧ ਵੱਖਰੇ ਵਾਈਟਸ (writes) ਕਰਦਾ ਹੈ। ਇਹ ਮੇਨ ਥ੍ਰੈਡ (main thread) ਨੂੰ ਬਲਾਕ ਕਰ ਦਿੰਦਾ ਹੈ। ਇਸ ਨਾਲ ਬ੍ਰਾਊਜ਼ਰ ਅਟਕਣ ਲੱਗਦਾ ਹੈ ਅਤੇ ਫਰੇਮ ਡ੍ਰੌਪ ਹੋ ਜਾਂਦੇ ਹਨ।
ਹੱਲ: 32-ਬਿੱਟ ਬਫਰ ਮੈਨੀਪੂਲੇਸ਼ਨ
ਤੁਸੀਂ ਪਿਕਸਲ ਨੂੰ ਚਾਰ ਵੱਖ-ਵੱਖ ਚੈਨਲਾਂ ਵਜੋਂ ਦੇਖਣਾ ਬੰਦ ਕਰ ਸਕਦੇ ਹੋ। ਇਸ ਦੀ ਬਜਾਏ, ਡੇਟਾ ਬਫਰ ਦੇ ਉੱਪਰ ਇੱਕ Uint32Array ਦੀ ਵਰਤੋਂ ਕਰੋ।
32-ਬਿੱਟ ਵਿਊ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਤੁਸੀਂ R, G, B, ਅਤੇ A ਨੂੰ ਇੱਕ ਸਿੰਗਲ ਇੰਟੀਜਰ ਵਿੱਚ ਗਰੁੱਪ ਕਰ ਦਿੰਦੇ ਹੋ। ਤੁਹਾਡਾ ਲੂਪ ਹੁਣ 33 ਮਿਲੀਅਨ ਦੀ ਬਜਾਏ ਸਿਰਫ਼ 8.2 ਮਿਲੀਅਨ ਇਟਰੇਸ਼ਨ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ ਚਾਰ ਦੀ ਬਜਾਏ ਪ੍ਰਤੀ ਪਿਕਸਲ ਇੱਕ ਆਪਰੇਸ਼ਨ ਪ੍ਰੋਸੈਸ ਕਰਦੇ ਹੋ।
ਬਿਟਵਾਈਜ਼ XOR ਰਾਹੀਂ ਤੇਜ਼ ਰੰਗ ਉਲਟਾਉਣਾ
Alpha ਨੂੰ ਛੇੜੇ ਬਿਨਾਂ ਰੰਗਾਂ ਨੂੰ ਉਲਟਾਉਣ ਲਈ, ਬਿਟਵਾਈਜ਼ XOR ਆਪਰੇਟਰ (^) ਦੀ ਵਰਤੋਂ ਕਰੋ। ਮਾਸਕ 0x00FFFFFF ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ:
- ਮਾਸਕ ਸਿਰਫ਼ ਰੰਗ ਦੇ ਬਿੱਟਾਂ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦਾ ਹੈ।
- Alpha ਬਿੱਟ ਉਹੀ ਰਹਿੰਦੇ ਹਨ।
- CPU ਇਸਨੂੰ ਇੱਕ ਸਿੰਗਲ ਸਾਈਕਲ ਵਿੱਚ ਪ੍ਰੋਸੈਸ ਕਰਦਾ ਹੈ।
ਨਤੀਜੇ:
- 1080p ਐਸੇਟਸ: 3.8x ਤੇਜ਼।
- 2K ਟੈਂਪਲੇਟਸ: 4.1x ਤੇਜ਼।
- 4K ਵਾਲਪੇਪਰ: 4.4x ਤੇਜ਼।
ਪ੍ਰੋ ਟਿਪ: Web Workers ਦੀ ਵਰਤੋਂ ਕਰੋ ਜੇਕਰ ਤੁਸੀਂ ਬਹੁਤ ਸਾਰੀਆਂ ਹਾਈ-ਰੈਜ਼ੋਲਿਊਸ਼ਨ ਫਾਈਲਾਂ ਨੂੰ ਪ੍ਰੋਸੈਸ ਕਰਦੇ ਹੋ, ਤਾਂ 32-ਬਿੱਟ ਆਪਰੇਸ਼ਨ ਵੀ UI ਨੂੰ ਹੌਲੀ ਕਰ ਸਕਦੇ ਹਨ। ਲੌਜਿਕ ਨੂੰ Web Worker ਵਿੱਚ ਬਦਲ ਦਿਓ। ਬਫਰ ਨੂੰ ਪਾਸ ਕਰਨ ਲਈ Transferable Objects ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਡੇਟਾ ਕਾਪੀ ਕਰਨ ਤੋਂ ਬਚਾਉਂਦਾ ਹੈ ਅਤੇ ਤੁਹਾਡੇ ਮੇਨ ਥ੍ਰੈਡ ਨੂੰ ਵਿਹਲਾ ਰੱਖਦਾ ਹੈ।
ਭਾਰੀ ਲੂਪਸ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਬੰਦ ਕਰੋ। ਲੀਨ (lean) ਅਤੇ ਤੇਜ਼ ਇਮੇਜ ਪਾਈਪਲਾਈਨ ਬਣਾਉਣ ਲਈ 32-ਬਿੱਟ ਵਰਡਸ ਅਤੇ ਬਿਟਵਾਈਜ਼ ਫਲੈਗਸ ਦੀ ਵਰਤੋਂ ਕਰੋ।