আমরা এর ভক্ত কাস্টম উপাদানসমূহ এর চারপাশে. তাদের নকশা তাদের তৈরি করে বিশেষ করে অলস লোডিং এর জন্য উপযুক্ত, যা কর্মক্ষমতা জন্য একটি বর হতে পারে.
দ্বারা অনুপ্রাণিত একজন সহকর্মীর পরীক্ষা, আমি সম্প্রতি একটি সাধারণ অটো-লোডার লেখার বিষয়ে সেট করেছি: যখনই DOM-এ একটি কাস্টম উপাদান উপস্থিত হয়, আমরা সংশ্লিষ্ট বাস্তবায়ন লোড করতে চাই যদি এটি এখনও উপলব্ধ না হয়। ব্রাউজার তারপর সেখান থেকে এই ধরনের উপাদান আপগ্রেড করার যত্ন নেয়।
সম্ভাবনা আপনি আসলে এই সব প্রয়োজন হবে না; সাধারণত একটি সহজ পদ্ধতি আছে। ইচ্ছাকৃতভাবে ব্যবহার করা হয়েছে, এখানে দেখানো কৌশলগুলি এখনও আপনার টুলসেটে একটি দরকারী সংযোজন হতে পারে।
সামঞ্জস্যের জন্য, আমরা আমাদের অটো-লোডারকেও একটি কাস্টম উপাদান হতে চাই — যার মানে আমরা এটিকে HTML এর মাধ্যমে সহজেই কনফিগার করতে পারি। কিন্তু প্রথমে, আসুন সেই অমীমাংসিত কাস্টম উপাদানগুলিকে ধাপে ধাপে চিহ্নিত করি:
class AutoLoader extends HTMLElement { connectedCallback() { let scope = this.parentNode; this.discover(scope); }
}
customElements.define("ce-autoloader", AutoLoader);
ধরে নিচ্ছি আমরা এই মডিউলটি সামনে লোড করেছি (ব্যবহার করে async
আদর্শ), আমরা একটি ড্রপ করতে পারেন <ce-autoloader>
উপাদান মধ্যে <body>
আমাদের নথির। এটি অবিলম্বে সমস্ত শিশু উপাদানগুলির জন্য আবিষ্কার প্রক্রিয়া শুরু করবে <body>
, যা এখন আমাদের মূল উপাদান গঠন করে। আমরা যোগ করে আমাদের নথির একটি সাবট্রিতে আবিষ্কার সীমাবদ্ধ করতে পারি <ce-autoloader>
এর পরিবর্তে সংশ্লিষ্ট ধারক উপাদানে - প্রকৃতপক্ষে, আমাদের কাছে বিভিন্ন সাবট্রির জন্য একাধিক উদাহরণ থাকতে পারে।
অবশ্যই, আমাদের এখনও এটি বাস্তবায়ন করতে হবে discover
পদ্ধতি (এর অংশ হিসাবে AutoLoader
উপরের ক্লাস):
discover(scope) { let candidates = [scope, ...scope.querySelectorAll("*")]; for(let el of candidates) { let tag = el.localName; if(tag.includes("-") && !customElements.get(tag)) { this.load(tag); } }
}
এখানে আমরা প্রতিটি একক বংশধরের সাথে আমাদের মূল উপাদানটি পরীক্ষা করে দেখুন (*
) যদি এটি একটি কাস্টম উপাদান হয় — যেমন হাইফেনেটেড ট্যাগ দ্বারা নির্দেশিত — কিন্তু এখনও আপগ্রেড করা হয়নি, আমরা সংশ্লিষ্ট সংজ্ঞা লোড করার চেষ্টা করব৷ এইভাবে DOM কে জিজ্ঞাসা করা ব্যয়বহুল হতে পারে, তাই আমাদের একটু সতর্ক হওয়া উচিত। আমরা এই কাজটি পিছিয়ে দিয়ে মূল থ্রেডের লোড কমাতে পারি:
connectedCallback() { let scope = this.parentNode; requestIdleCallback(() => { this.discover(scope); });
}
requestIdleCallback
এখনও সর্বজনীনভাবে সমর্থিত নয়, তবে আমরা ব্যবহার করতে পারি requestAnimationFrame
একটি ফলব্যাক হিসাবে:
let defer = window.requestIdleCallback || requestAnimationFrame; class AutoLoader extends HTMLElement { connectedCallback() { let scope = this.parentNode; defer(() => { this.discover(scope); }); } // ...
}
এখন আমরা অনুপস্থিত বাস্তবায়নে এগিয়ে যেতে পারি load
গতিশীলভাবে একটি ইনজেক্ট করার পদ্ধতি <script>
উপাদান:
load(tag) { let el = document.createElement("script"); let res = new Promise((resolve, reject) => { el.addEventListener("load", ev => { resolve(null); }); el.addEventListener("error", ev => { reject(new Error("failed to locate custom-element definition")); }); }); el.src = this.elementURL(tag); document.head.appendChild(el); return res;
} elementURL(tag) { return `${this.rootDir}/${tag}.js`;
}
মধ্যে হার্ড-কোডেড কনভেনশন নোট করুন elementURL
. দ্য src
অ্যাট্রিবিউটের URL অনুমান করে যে একটি ডিরেক্টরি রয়েছে যেখানে সমস্ত কাস্টম উপাদান সংজ্ঞাগুলি থাকে (যেমন <my-widget>
→ /components/my-widget.js
) আমরা আরও বিস্তৃত কৌশল নিয়ে আসতে পারি, তবে এটি আমাদের উদ্দেশ্যের জন্য যথেষ্ট। এই ইউআরএলটিকে একটি পৃথক পদ্ধতিতে রিলিগেট করা প্রয়োজন হলে প্রকল্প-নির্দিষ্ট সাবক্লাসিংয়ের অনুমতি দেয়:
class FancyLoader extends AutoLoader { elementURL(tag) { // fancy logic }
}
যেভাবেই হোক, মনে রাখবেন যে আমরা নির্ভর করছি this.rootDir
. এখানেই উপরে উল্লিখিত কনফিগারেবিলিটি আসে। আসুন একটি সংশ্লিষ্ট গেটার যোগ করি:
get rootDir() { let uri = this.getAttribute("root-dir"); if(!uri) { throw new Error("cannot auto-load custom elements: missing `root-dir`"); } if(uri.endsWith("/")) { // remove trailing slash return uri.substring(0, uri.length - 1); } return uri;
}
আপনি হয়তো ভাবছেন observedAttributes
এখন, কিন্তু যে সত্যিই জিনিস সহজ করে তোলে না. প্লাস আপডেট করা হচ্ছে root-dir
রানটাইমে এমন কিছু মনে হয় যা আমাদের কখনই প্রয়োজন হবে না।
এখন আমরা আমাদের উপাদান ডিরেক্টরি কনফিগার করতে পারি - এবং অবশ্যই করতে হবে: <ce-autoloader root-dir="/components">
.
এটি দিয়ে, আমাদের অটো-লোডার তার কাজ করতে পারে। স্বয়ংক্রিয়-লোডার আরম্ভ করার সময় ইতিমধ্যেই বিদ্যমান উপাদানগুলির জন্য এটি শুধুমাত্র একবার কাজ করে। আমরা সম্ভবত গতিশীলভাবে যোগ করা উপাদানগুলির জন্যও অ্যাকাউন্ট করতে চাই। সেখানেই MutationObserver
খেলায় আসে:
connectedCallback() { let scope = this.parentNode; defer(() => { this.discover(scope); }); let observer = this._observer = new MutationObserver(mutations => { for(let { addedNodes } of mutations) { for(let node of addedNodes) { defer(() => { this.discover(node); }); } } }); observer.observe(scope, { subtree: true, childList: true });
} disconnectedCallback() { this._observer.disconnect();
}
এইভাবে, ব্রাউজারটি যখনই DOM-এ একটি নতুন উপাদান উপস্থিত হয় — বা বরং, আমাদের নিজ নিজ সাবট্রি — যা আমরা আবিষ্কার প্রক্রিয়া পুনরায় চালু করতে ব্যবহার করি তখনই আমাদেরকে অবহিত করে। (আপনি যুক্তি দিতে পারেন যে আমরা এখানে কাস্টম উপাদানগুলি পুনরায় উদ্ভাবন করছি, এবং আপনি একধরনের সঠিক হবেন।)
আমাদের অটো-লোডার এখন সম্পূর্ণরূপে কার্যকরী। ভবিষ্যতের উন্নতিগুলি সম্ভাব্য রেসের অবস্থার দিকে নজর দিতে পারে এবং অপ্টিমাইজেশানগুলি তদন্ত করতে পারে। কিন্তু সম্ভাবনা বেশিরভাগ পরিস্থিতিতে এটি যথেষ্ট ভাল। আপনার একটি ভিন্ন পদ্ধতির থাকলে মন্তব্যে আমাকে জানান এবং আমরা নোটগুলি তুলনা করতে পারি!
- এসইও চালিত বিষয়বস্তু এবং পিআর বিতরণ। আজই পরিবর্ধিত পান।
- প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. এখানে প্রবেশ করুন.
- উত্স: https://css-tricks.com/an-approach-to-lazy-loading-custom-elements/
- 1
- a
- সম্পর্কে
- উপরে
- হিসাব
- প্রকৃতপক্ষে
- যোগ
- যোগ
- সব
- উপশম করা
- অনুমতি
- ইতিমধ্যে
- এবং
- অভিগমন
- তর্ক করা
- কাছাকাছি
- সহজলভ্য
- ব্রাউজার
- প্রার্থী
- না পারেন
- যত্ন
- সাবধান
- মতভেদ
- চেক
- শিশু
- শ্রেণী
- আসা
- মন্তব্য
- তুলনা করা
- পরিবেশ
- আধার
- সম্মেলন
- অনুরূপ
- পারা
- পথ
- প্রথা
- নকশা
- বিভিন্ন
- আবিষ্কার
- দলিল
- না
- করে DOM
- ড্রপ
- পরিবর্তনশীল
- সহজ
- সহজে
- সম্প্রসারিত
- উপাদান
- যথেষ্ট
- ভুল
- থার (eth)
- EV
- এমন কি
- প্রতি
- ছাড়া
- ব্যয়বহুল
- ব্যর্থ
- ভক্ত
- প্রথম
- থেকে
- সম্পূর্ণরূপে
- কার্মিক
- ভবিষ্যৎ
- চালু
- ভাল
- মাথা
- এখানে
- এইচটিএমএল
- HTTPS দ্বারা
- আদর্শ
- সনাক্ত করা
- অবিলম্বে
- বাস্তবায়ন
- বাস্তবায়ন
- বাস্তবায়ন
- in
- পরিবর্তে
- তদন্ত করা
- IT
- জাভাস্ক্রিপ্ট
- কাজ
- রকম
- জানা
- লম্বা
- LIMIT টি
- সামান্য
- বোঝা
- বোঝাই
- দেখুন
- প্রধান
- করা
- তৈরি করে
- মানে
- পদ্ধতি
- হতে পারে
- অনুপস্থিত
- মডিউল
- অধিক
- সেতু
- পদক্ষেপ
- মোজিলা
- বহু
- প্রয়োজন
- প্রয়োজন
- নতুন
- নোড
- অংশ
- কর্মক্ষমতা
- Plato
- প্লেটো ডেটা ইন্টেলিজেন্স
- প্লেটোডাটা
- খেলা
- যোগ
- সম্ভাব্য
- সম্ভবত
- প্রক্রিয়া
- উদ্দেশ্য
- জাতি
- সম্প্রতি
- অপসারণ
- নিজ নিজ
- প্রত্যাবর্তন
- শিকড়
- পরিস্থিতিতে
- সুযোগ
- মনে হয়
- আলাদা
- সেট
- উচিত
- প্রদর্শিত
- সহজ
- একক
- So
- কিছু
- শুরু
- ধাপ
- এখনো
- কৌশল
- এমন
- সমর্থিত
- TAG
- লাগে
- প্রযুক্তি
- সার্জারির
- তাদের
- কিছু
- চিন্তা
- থেকে
- সত্য
- আপডেট
- আপগ্রেড
- কোনো URI
- URL টি
- us
- ব্যবহার
- সাধারণত
- মাধ্যমে
- যে
- ইচ্ছা
- হয়া যাই ?
- কাজ
- লেখা
- আপনার
- zephyrnet