💔 🖐️ 🐸 OffscreenCanvas का उपयोग करके चार्ट को गति देना 🧔🏿 👨🏿‍🤝‍👨🏾 🤷🏿

चार्ट रेंडरिंग ब्राउज़र को गंभीरता से प्रभावित कर सकता है। विशेष रूप से जब यह एक जटिल एप्लिकेशन के इंटरफ़ेस में आरेखों का प्रतिनिधित्व करने वाले तत्वों की एक भीड़ को आउटपुट करने के लिए आता है। आप इंटरफ़ेस का उपयोग करके स्थिति को बेहतर बनाने का प्रयास कर सकते हैं OffscreenCanvas, जो ब्राउज़र के समर्थन का स्तर धीरे-धीरे बढ़ रहा है। यह एक वेब-वर्कर का उपयोग करने की अनुमति देता है, इसे एक दृश्य तत्व में प्रदर्शित छवि बनाने के कार्यों को स्थानांतरित करने के लिए <canvas>। लेख, जिसका अनुवाद आज हम प्रकाशित कर रहे हैं, इंटरफ़ेस के उपयोग के लिए समर्पित है । यहां हम इस बारे में बात करेंगे कि इस इंटरफ़ेस की आवश्यकता क्यों हो सकती है, इसके आवेदन से वास्तव में क्या उम्मीद की जा सकती है और इसके साथ काम करने के दौरान क्या कठिनाइयां पैदा हो सकती हैं।

OffscreenCanvas

ऑफस्क्रीन कैन्वास पर ध्यान क्यों दें?

आरेख के प्रतिपादन में शामिल कोड में पर्याप्त रूप से उच्च कम्प्यूटेशनल जटिलता हो सकती है। में कई स्थानों पर, आप विस्तृत के बारे में उत्पादन करने के लिए कैसे एनीमेशन चिकनी और पेज के साथ सुविधाजनक उपयोगकर्ता संपर्क सुनिश्चित करने के लिए कहानियों पा सकते हैं, यह आवश्यक है कि 10 के बारे में एमएस के भीतर एक फ्रेम फिट का प्रतिपादन है, जो आप प्रति सेकंड 60 फ्रेम तक पहुँचने के लिए अनुमति देता है। यदि किसी एक फ्रेम को आउटपुट करने के लिए आवश्यक गणनाओं में 10 ms से अधिक लगते हैं, तो यह पृष्ठ के ध्यान देने योग्य "मंदी" के परिणामस्वरूप होगा।

चित्र प्रदर्शित करते समय, हालांकि, स्थिति निम्न से बढ़ जाती है:

— - (SVG, canvas, WebGL) , , .
, , , , 10 . ( — ) .

ये समस्याएं एक क्लासिक अनुकूलन दृष्टिकोण के लिए आदर्श उम्मीदवार हैं जिन्हें विभाजित और जीतना कहा जाता है। इस मामले में, हम कई थ्रेड्स में कंप्यूटिंग लोड के वितरण के बारे में बात कर रहे हैं। हालांकि, इंटरफ़ेस की उपस्थिति से पहले, OffscreenCanvasसभी प्रतिपादन कोड को मुख्य धागे में निष्पादित करने की आवश्यकता होती है। इस कोड का एकमात्र तरीका एपीआई की जरूरत का उपयोग कर सकता है।

तकनीकी दृष्टिकोण से, "भारी" गणना पहले एक वेब वर्कर थ्रेड में आउटपुट हो सकती है। लेकिन, चूंकि रेंडरिंग के लिए जिम्मेदार कॉल्स को मेन स्ट्रीम से किया जाना था, इसके लिए वर्कर स्ट्रीम और चार्ट आउटपुट कोड में मेन स्ट्रीम के बीच कॉम्प्लेक्स मैसेज एक्सचेंज स्कीम के इस्तेमाल की जरूरत थी। इसके अलावा, इस दृष्टिकोण ने अक्सर केवल एक मामूली प्रदर्शन लाभ दिया।

विशिष्टताOffscreenCanvas<canvas>एक वेब कार्यकर्ता में तत्व ग्राफिक्स प्रदर्शित करने के लिए सतह नियंत्रण स्थानांतरित करने के लिए हमें एक तंत्र देता है । यह विनिर्देश वर्तमान में क्रोम और एज ब्राउज़र (एज के बाद क्रोमियम में माइग्रेट कर दिया गया है) द्वारा समर्थित है। उम्मीद है कि फ़ायरफ़ॉक्स समर्थन OffscreenCanvasछह महीने के भीतर दिखाई देगा। यदि हम सफारी के बारे में बात करते हैं, तो यह अभी भी अज्ञात है कि क्या इस ब्राउज़र में इस तकनीक के लिए समर्थन की योजना है।

OffscreenCanvas का उपयोग कर चार्ट आउटपुट

एक चार्ट का उदाहरण जो 100,000 बहु-रंगीन डॉट्स को प्रदर्शित करता

है संभावित फायदे और नुकसान का बेहतर आकलन करने के लिएOffscreenCanvas, आइए पिछले आंकड़े में दिखाए गए "भारी" आरेख के आउटपुट का एक उदाहरण देखें।

const offscreenCanvas = canvasContainer
  .querySelector('canvas')
  .transferControlToOffscreen();
const worker = new Worker('worker.js');
worker.postMessage({ offscreenCanvas }, [offscreenCanvas]);

सबसे पहले, हम नई विधि का उपयोग करके OffscreenCanvasतत्व को क्वेरी करते हैं । फिर हम विधि को कॉल करते हैं , ऐसा करने के लिए एक लिंक वाले कार्यकर्ता को एक संदेश भेजते हैं । यह बहुत महत्वपूर्ण है कि यहां, दूसरे तर्क के रूप में, आपको उपयोग करने की आवश्यकता है । यह आपको इस ऑब्जेक्ट कार्यकर्ता का मालिक बनाने की अनुमति देता है, जो उसे अकेले प्रबंधन करने की अनुमति देगा ।canvastransferControlToOffscreen()worker.postMessage({ canvas: offscreenCanvas }, [offscreenCanvas])offscreenCanvas[offscreenCanvas]OffscreenCanvas

canvasContainer.addEventListener('measure', ({ detail }) => {
  const { width, height } = detail;
  worker.postMessage({ width, height });
});
canvasContainer.requestRedraw();

यह देखते हुए कि आकार OffscreenCanvasमूल रूप से विशेषताओं widthऔर heightतत्व से विरासत में मिला है canvas, यह हमारी जिम्मेदारी है कि जब तत्व का आकार बदला जाए तो इन मूल्यों को बनाए रखें canvas। यहाँ हम घटना का उपयोग measureसे d3fc-canvasहै, जो हमें अवसर देगा के साथ समझौते में, requestAnimationFrame, तत्व के नए आयामों के बारे में कार्यकर्ता जानकारी को संप्रेषित करने के लिए canvas।

उदाहरण को सरल बनाने के लिए, हम d3fc लाइब्रेरी से घटकों का उपयोग करेंगे । यह सहायक घटकों का एक समूह है जो या तो डी 3 घटकों को एकत्रित करता है या उनकी कार्यक्षमता को पूरक करता है। आप OffscreenCanvasबिना d3fc- घटक के साथ काम कर सकते हैं । उन सभी पर चर्चा की जाएगी जो विशेष रूप से मानक जावास्क्रिप्ट सुविधाओं का उपयोग करके की जा सकती हैं।

अब फाइल से कोड पर जाएं worker.js। इस उदाहरण में, प्रदर्शन के प्रदर्शन में वास्तविक वृद्धि के लिए, हम WebGL का उपयोग करने जा रहे हैं।

addEventListener('message', ({ data: { offscreenCanvas, width, height } }) => {
    if (offscreenCanvas != null) {
        const gl = offscreenCanvas.getContext('webgl');
        series.context(gl);
        series(data);
    }

    if (width != null && height != null) {
        const gl = series.context();
        gl.canvas.width = width;
        gl.canvas.height = height;
        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    }
});

जब हमें एक संपत्ति वाला संदेश प्राप्त होता है canvas, तो हम मानते हैं कि संदेश मुख्य धागे से आया है। अगला, हम तत्व से canvasसंदर्भ प्राप्त करते हैं webglऔर इसे घटक को पास करते हैं series। तब हम घटक को कॉल करते हैं series, इसे डेटा ( data) पास करते हैं, जिसे हम इसका उपयोग करके रेंडर करना चाहते हैं (नीचे हम इस बारे में बात करेंगे कि संबंधित चर कहां से आए थे )।

इसके अलावा, हम गुण widthऔर height, जो संदेश में आए थे, और वेबलॉग के आयाम offscreenCanvasऔर देखने के क्षेत्र को निर्धारित करने के लिए उनका उपयोग करते हैं । offscreenCanvasसीधे लिंक का उपयोग नहीं किया जाता है। तथ्य यह है कि संदेश में एक संपत्ति offscreenCanvasया गुण शामिल हैं widthऔर height।

शेष वर्कर कोड, हम जो आउटपुट देना चाहते हैं, उसके प्रतिपादन के लिए जिम्मेदार है। यहां कुछ भी विशेष नहीं है, इसलिए यदि यह सब आपसे परिचित है, तो आप तुरंत अगले अनुभाग में आगे बढ़ सकते हैं जिसमें हम प्रदर्शन पर चर्चा करते हैं।

const randomNormal = d3.randomNormal(0, 1);
const randomLogNormal = d3.randomLogNormal();

const data = Array.from({ length: 1e5 }, () => ({
    x: randomNormal(),
    y: randomNormal(),
    size: randomLogNormal() * 10
}));

const xScale = d3.scaleLinear().domain([-5, 5]);

const yScale = d3.scaleLinear().domain([-5, 5]);

सबसे पहले, हम एक डेटासेट बनाते हैं जिसमें मूल x / y के आसपास बेतरतीब ढंग से वितरित बिंदुओं के निर्देशांक होते हैं, और स्केलिंग को समायोजित करते हैं। हम विधि का उपयोग करके x और y मानों की श्रेणी निर्धारित नहीं करते हैं range, क्योंकि WebGL श्रृंखला canvas (-1 -> +1डिवाइस के सामान्यीकृत निर्देशांक में तत्व के पूर्ण आकार में प्रदर्शित होती है)।

const series = fc
    .seriesWebglPoint()
    .xScale(xScale)
    .yScale(yScale)
    .crossValue(d => d.x)
    .mainValue(d => d.y)
    .size(d => d.size)
    .equals((previousData, data) => previousData.length > 0);

अगला, हम बिंदुओं की एक श्रृंखला का उपयोग करते हुए सेट करते हैं xScaleऔर yScale। फिर हम पहुंच के उपयुक्त साधनों को कॉन्फ़िगर करते हैं जो आपको डेटा पढ़ने की अनुमति देते हैं।

इसके अलावा, हम अपने स्वयं के समानता जाँच फ़ंक्शन को परिभाषित करते हैं, जो यह सुनिश्चित करने के लिए डिज़ाइन किया गया है कि घटक dataप्रत्येक रेंडरिंग में जीपीयू प्रसारित नहीं करता है । हमें इसे स्पष्ट रूप से व्यक्त करना चाहिए, क्योंकि भले ही हमें पता हो कि हम इस डेटा को संशोधित नहीं करेंगे, घटक को संसाधन-गहन "गंदे" जांच किए बिना इसके बारे में पता नहीं चल सकता है।

const colorScale = d3.scaleOrdinal(d3.schemeAccent);

const webglColor = color => {
    const { r, g, b, opacity } = d3.color(color).rgb();
    return [r / 255, g / 255, b / 255, opacity];
};

const fillColor = fc
    .webglFillColor()
    .value((d, i) => webglColor(colorScale(i)))
    .data(data);

series.decorate(program => {
    fillColor(program);
});

यह कोड आपको चार्ट को रंगीन करने की अनुमति देता है। हम उपयुक्त रंग का चयन करने के लिए सेट किए गए डेटा में बिंदु के सूचकांक का उपयोग करते हैं colorScale, फिर इसे आवश्यक प्रारूप में परिवर्तित करते हैं और इसका उपयोग आउटपुट बिंदु को सजाने के लिए करते हैं।

function render() {
    const ease = 5 * (0.51 + 0.49 * Math.sin(Date.now() / 1e3));
    xScale.domain([-ease, ease]);
    yScale.domain([-ease, ease]);
    series(data);
    requestAnimationFrame(render);
}

अब जब अंक रंगीन हो गए हैं, तो जो कुछ शेष है वह चार्ट को चेतन करने के लिए है। इसके कारण, हमें निरंतर विधि कॉल की आवश्यकता होगी render()। इसके अलावा, सिस्टम पर कुछ भार पैदा करेगा। हम requestAnimationFrameगुणों xScale.domainऔर yScale.domainहर फ्रेम को संशोधित करने के लिए चार्ट स्केल में वृद्धि और कमी का अनुकरण करते हैं । यहां, समय-निर्भर मूल्यों को लागू किया जाता है और गणना की जाती है ताकि चार्ट का पैमाना आसानी से बदल जाए। इसके अलावा, हम संदेश हेडर को संशोधित करते हैं ताकि रेंडरिंग चक्र को शुरू करने के लिए एक विधि कहा render()जाए, और ताकि हमें सीधे कॉल न करना पड़े series(data)।

importScripts(
    './node_modules/d3-array/dist/d3-array.js',
    './node_modules/d3-collection/dist/d3-collection.js',
    './node_modules/d3-color/dist/d3-color.js',
    './node_modules/d3-interpolate/dist/d3-interpolate.js',
    './node_modules/d3-scale-chromatic/dist/d3-scale-chromatic.js',
    './node_modules/d3-random/dist/d3-random.js',
    './node_modules/d3-scale/dist/d3-scale.js',
    './node_modules/d3-shape/dist/d3-shape.js',
    './node_modules/d3fc-extent/build/d3fc-extent.js',
    './node_modules/d3fc-random-data/build/d3fc-random-data.js',
    './node_modules/d3fc-rebind/build/d3fc-rebind.js',
    './node_modules/d3fc-series/build/d3fc-series.js',
    './node_modules/d3fc-webgl/build/d3fc-webgl.js'
);

इस उदाहरण को काम करने के लिए, यह केवल आवश्यक पुस्तकालयों को कार्यकर्ता में आयात करने के लिए रहता है। हम इसके लिए उपयोग करते हैं importScripts, और इसलिए, ताकि निर्माण परियोजनाओं के लिए उपकरणों का उपयोग न करें, हम मैन्युअल रूप से संकलित निर्भरता की एक सूची का उपयोग करते हैं। दुर्भाग्य से, हम केवल पूर्ण d3 / d3fc बिल्ड डाउनलोड नहीं कर सकते, क्योंकि वे DOM पर निर्भर करते हैं, और उन्हें जो आवश्यक है वह कार्यकर्ता में उपलब्ध नहीं है।

→ इस उदाहरण का पूरा कोड GitHub पर पाया जा सकता है

ऑफस्क्रीनकैनवास और प्रदर्शन

हमारी परियोजना में एनीमेशन requestAnimationFrameएक कार्यकर्ता के उपयोग के लिए धन्यवाद काम करता है । यह कार्यकर्ता को तब भी पृष्ठों को प्रस्तुत करने की अनुमति देता है, जब मुख्य धागा अन्य चीजों के साथ व्यस्त होता है। यदि आप पिछले अनुभाग में वर्णित प्रोजेक्ट पृष्ठ को देखते हैं और बटन पर क्लिक करते हैं Stop main thread, तो आप इस तथ्य पर ध्यान दे सकते हैं कि जब संदेश बॉक्स प्रदर्शित होता है, तो टाइमस्टैम्प जानकारी का अद्यतन बंद हो जाता है। मुख्य धागा अवरुद्ध है, लेकिन चार्ट एनीमेशन बंद नहीं होता है।

प्रोजेक्ट विंडो

हम मुख्य धारा से संदेश प्राप्त करके आरंभ किए गए एक रेंडरिंग को व्यवस्थित कर सकते हैं। उदाहरण के लिए, इस तरह की घटनाओं को तब भेजा जा सकता है जब कोई उपयोगकर्ता किसी चार्ट के साथ बातचीत करता है या नेटवर्क पर ताज़ा डेटा प्राप्त करता है। लेकिन इस दृष्टिकोण के साथ, यदि मुख्य धागा कुछ के साथ व्यस्त है और कार्यकर्ता में कोई संदेश प्राप्त नहीं होता है, तो रेंडरिंग बंद हो जाएगी।

चार्ट में लगातार रेंडरिंग जब स्थितियों में कुछ भी नहीं होता है, तो यह एक शानदार प्रशंसक और कम बैटरी के साथ उपयोगकर्ता को नाराज करने का एक शानदार तरीका है। नतीजतन, यह पता चलता है कि वास्तविक दुनिया में, मुख्य धागे और श्रमिक धागे के बीच जिम्मेदारियों को कैसे विभाजित किया जाए, इस पर निर्भर करता है कि क्या कार्यकर्ता कुछ उपयोगी प्रस्तुत कर सकता है जब वह मुख्य धागे से स्थिति में बदलाव के बारे में संदेश प्राप्त नहीं करता है।

यदि हम थ्रेड्स के बीच संदेशों के हस्तांतरण के बारे में बात करते हैं, तो यह ध्यान दिया जाना चाहिए कि यहां हमने एक बहुत ही सरल दृष्टिकोण लागू किया। ईमानदारी से, हमें थ्रेड्स के बीच बहुत कम संदेश प्रसारित करने की आवश्यकता है, इसलिए मैं अपने दृष्टिकोण को व्यावहारिकता के परिणाम के रूप में कहूंगा, आलस्य को नहीं। लेकिन अगर हम वास्तविक अनुप्रयोगों के बारे में बात करते हैं, तो यह ध्यान दिया जा सकता है कि प्रवाह के बीच संदेश हस्तांतरण योजना अधिक जटिल हो जाएगी यदि उपयोगकर्ता के आरेख और विज़ुअलाइज़ किए गए डेटा के साथ बातचीत उन पर निर्भर होगी।

आप मुख्य थ्रेड और वर्कर थ्रेड के बीच अलग संदेश चैनल बनाने के लिए मानक MessageChannel इंटरफ़ेस का उपयोग कर सकते हैं ।। इन चैनलों में से प्रत्येक का उपयोग संदेशों की एक विशिष्ट श्रेणी के लिए किया जा सकता है, जिससे संदेशों को संसाधित करना आसान हो जाता है। मानक तंत्र के विकल्प के रूप में, कोमलिंक जैसी तृतीय-पक्ष लाइब्रेरी कार्य कर सकती है । यह लाइब्रेरी प्रॉक्सी ऑब्जेक्ट्स का उपयोग करते हुए एक उच्च-स्तरीय इंटरफ़ेस के पीछे निम्न-स्तरीय विवरण छिपाती है ।

हमारे उदाहरण की एक और दिलचस्प विशेषता, जो रेट्रोस्पेक्ट में स्पष्ट रूप से दिखाई देती है, यह तथ्य है कि यह इस तथ्य को ध्यान में रखता है कि अन्य संसाधन संसाधनों की तरह जीपीयू संसाधन अनंत से दूर हैं। एक कार्यकर्ता में प्रतिपादन का अनुवाद मुख्य सूत्र को अन्य समस्याओं को हल करने की अनुमति देता है। लेकिन ब्राउज़र, वैसे भी, DOM को रेंडर करने के लिए GPU का उपयोग करने की आवश्यकता है और साधनों द्वारा उत्पन्न किया गया था OffscreenCanvas।

यदि कार्यकर्ता सभी GPU संसाधनों का उपभोग करता है, तो मुख्य एप्लिकेशन विंडो प्रदर्शन समस्याओं का अनुभव करेगी, भले ही रेंडरिंग की गई हो। ध्यान दें कि कैसे उदाहरण में टाइमस्टैम्प को अपडेट करने की गति कम हो जाती है क्योंकि प्रदर्शित अंक की संख्या बढ़ जाती है। यदि आपके पास एक शक्तिशाली ग्राफिक्स कार्ड है, तो आपको क्वेरी स्ट्रिंग में पृष्ठ पर प्रेषित बिंदुओं की संख्या को बढ़ाना पड़ सकता है। ऐसा करने के लिए, आप एक मान का उपयोग कर सकते हैं जो कि अधिकतम 100000 से अधिक है, उदाहरण पृष्ठ पर एक लिंक का उपयोग करके निर्दिष्ट किया गया है।

यह ध्यान दिया जाना चाहिए कि यहां हमने संदर्भ विशेषताओं की गुप्त दुनिया का पता नहीं लगाया। इस तरह के अध्ययन से हमें समाधान की उत्पादकता बढ़ाने में मदद मिल सकती है। हालाँकि, मैंने ऐसा इन विशेषताओं के निम्न स्तर के समर्थन के कारण ऐसा नहीं किया।

यदि हम उपयोग करने के बारे में बात करते हैं OffscreenCanvas, तो विशेषता यहां सबसे दिलचस्प लगती है desynchronized। यह, जहां यह समर्थित है, और कुछ प्रतिबंधों को ध्यान में रखते हुए, आपको इवेंट लूप और वर्कर में निष्पादित होने वाले रेंडर लूप के बीच सिंक्रनाइज़ेशन से छुटकारा पाने की अनुमति देता है। यह छवि को अपडेट करने में देरी को कम करता है। इसके बारे में विवरण यहां पाया जा सकता है ।

सारांश

इंटरफ़ेस OffscreenCanvasडेवलपर्स को चार्ट रेंडरिंग प्रदर्शन में सुधार करने का अवसर देता है, लेकिन इसका उपयोग करने के लिए एक विचारशील दृष्टिकोण की आवश्यकता होती है। इसका उपयोग करते हुए, आपको निम्नलिखित पर विचार करने की आवश्यकता है:

(, , ) - .
- , . , , , postMessage.
, (, SVG/HTML- <canvas>), , , .
- , , , , , , , , .
, GPU, OffscreenCanvas .
- OffscreenCanvas, GPU-, , . , , .

यहाँ एक उदाहरण कोड है, और यहाँ इसका कार्य संस्करण है।

प्रिय पाठकों! क्या आपने वेब पृष्ठों पर ग्राफिक्स के प्रदर्शन को गति देने के लिए ऑफ़स्क्रीन कैनवस का उपयोग किया है?

OffscreenCanvas का उपयोग करके चार्ट को गति देना

ऑफस्क्रीन कैन्वास पर ध्यान क्यों दें?

OffscreenCanvas का उपयोग कर चार्ट आउटपुट

ऑफस्क्रीनकैनवास और प्रदर्शन

सारांश

More articles: