স্ক্রিপ্ট ট্যাগ - অ্যাসিঙ্ক এবং মুলতুবি

545

আমি বৈশিষ্ট্যাবলী সম্পর্কে প্রশ্ন একটি দম্পতি আছে async& deferজন্য <script>যা HTML5 এর ব্রাউজারে আমার বোঝার শুধুমাত্র কাজ ট্যাগ।

আমার একটি সাইটের দুটি বাহ্যিক জাভাস্ক্রিপ্ট ফাইল রয়েছে যা বর্তমানে </body>ট্যাগের ঠিক উপরে বসে রয়েছে ; প্রথমটি হচ্ছেjQuery গুগল থেকে উত্সাহিত এবং দ্বিতীয়টি একটি স্থানীয় বাহ্যিক স্ক্রিপ্ট।

সাইটের লোড গতির ক্ষেত্রে শ্রদ্ধা সহ

  1. asyncপৃষ্ঠার নীচে আমার কাছে থাকা দুটি স্ক্রিপ্ট যুক্ত করার কোনও সুবিধা আছে কি ?

  2. asyncদুটি স্ক্রিপ্টে বিকল্প যুক্ত করে এটিকে পৃষ্ঠার শীর্ষে রেখে দেওয়ার কোনও সুবিধা কি হবে <head>?

  3. এর অর্থ কি তারা পৃষ্ঠা লোড হিসাবে ডাউনলোড করবে?
  4. আমি ধরে নিচ্ছি যে এটি এইচটিএমএল 4 ব্রাউজারগুলির জন্য বিলম্ব ঘটাবে, তবে এটি কি এইচটিএমএল 5 ব্রাউজারগুলির জন্য পৃষ্ঠা লোডটি গতি বাড়িয়ে দেবে?

ব্যবহার <script defer src=...

  1. ভিতরে দুটি স্ক্রিপ্টগুলি <head>এট্রিবিউট দিয়ে লোড করা deferস্ক্রিপ্টগুলির আগের মতোই প্রভাব ফেলবে </body>?
  2. আবার আমি ধরে নিই এটি এইচটিএমএল 4 ব্রাউজারগুলিকে ধীর করে দেবে।

ব্যবহার <script async src=...

আমার যদি asyncসক্ষম দুটি স্ক্রিপ্ট থাকে

  1. তারা কি একই সাথে ডাউনলোড করতে পারে?
  2. বা বাকী একটি পৃষ্ঠা সহ একবারে?
  3. স্ক্রিপ্টগুলির ক্রম কি তখন সমস্যা হয়ে দাঁড়ায়? উদাহরণস্বরূপ, একটি স্ক্রিপ্ট অন্যটির উপর নির্ভর করে তাই যদি একটি দ্রুত ডাউনলোড হয় তবে দ্বিতীয়টি সঠিকভাবে সম্পাদন করতে পারে না ইত্যাদি etc.

শেষ পর্যন্ত আমি এইচটিএমএল 5 বেশি ব্যবহৃত না হওয়া অবধি জিনিসগুলি ত্যাগ করার পক্ষে কি সেরা?

javascript  html 
— আদম
সূত্র
5
asyncনতুন (আইএসএইচ), তবে deferআইই 4 এর পরে আই-র অংশ ছিল। deferঅন্যান্য ব্রাউজারগুলিতে সম্প্রতি আরও যুক্ত করা হয়েছিল, তবে সেই ব্রাউজারগুলির পুরানো সংস্করণগুলি খুব কম ঘুরে বেড়ায়।
— আলহকি
3
এখন, এইচটিএমএল 5 খুব জনপ্রিয় হয়ে উঠেছে!
— sept08
2
deferHTML এর নীচে স্ক্রিপ্টগুলি রাখার মতোই , যা বহু বছর ধরে সাধারণ years
— vsync
1
@vsync অগত্যা সত্য নয়, ব্রাউজারটি স্ক্রিপ্ট ট্যাগটি বিশ্লেষণের সময় জেএসকে ডিফার ট্যাগ দিয়ে ডাউনলোড করবে, তবে ডমকন্টেন্টলয়েডের ঠিক আগে অব্যাহতি মুলতবি করবে। ডাউনলোড করা অবরুদ্ধ is এইচটিএমএল এর নীচে স্থাপন করা ডিওএম তৈরি না হওয়া পর্যন্ত জেএস ডাউনলোড করা এবং কার্যকর করতে বিলম্ব করবে, তবে ডাউনলোডের জন্য অপেক্ষা করে আপনি আরও বিলম্বিত হতে পারেন।
— ব্র্যাড ফ্রস্ট
@ ব্র্যাডফ্রস্ট - ডাউনলোড করা আমার দৃষ্টিতে ব্লক হচ্ছে, এই অর্থে এটি ইন্টারনেট ব্যান্ডউইথ গ্রহণ করছে এবং ধীর সংযোগ রয়েছে এমনদের জন্য, আমি প্রথমে ডকুমেন্টটি লোড করা জরুরি মনে করি এবং কেবল তখনই যখন এটি রেন্ডার করা হয়, তখন জাভাস্ক্রিপ্ট ফাইলগুলি ডাউনলোড শুরু করুন । এটি এমন ক্ষেত্রে সত্য যেখানে সমস্ত বিষয় সরবরাহ করার জন্য সামগ্রীগুলি জাভাস্ক্রিপ্টের সাথে শক্তভাবে মিলিত হয়নি (যেমন এসপিএ )
— vsync

উত্তর:

404

আপনার স্ক্রিপ্টগুলি ঠিক আগে রাখুন </body>। অ্যাসিঙ্ক কয়েকটি পরিস্থিতিতে সেখানে অবস্থিত স্ক্রিপ্টগুলির সাথে ব্যবহার করা যেতে পারে (নীচে আলোচনা দেখুন)। সেখানে অবস্থিত স্ক্রিপ্টগুলির জন্য ডিফার খুব বেশি পার্থক্য আনবে না কারণ ডম পার্সিংয়ের কাজ ইতিমধ্যে যাইহোক ইতিমধ্যে সম্পন্ন হয়েছে।

এখানে একটি নিবন্ধ যে ASYNC এবং মুলতবি মধ্যে পার্থক্য ব্যাখ্যা করে এর http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/ ।

যদি আপনি ঠিক আগে শরীরের শেষে স্ক্রিপ্টগুলি রাখেন তবে আপনার এইচটিএমএল পুরানো ব্রাউজারগুলিতে আরও দ্রুত প্রদর্শিত হবে </body>। সুতরাং, পুরানো ব্রাউজারগুলিতে লোডের গতি সংরক্ষণ করার জন্য, আপনি এগুলি অন্য কোথাও রাখতে চান না।

যদি আপনার দ্বিতীয় স্ক্রিপ্টটি প্রথম স্ক্রিপ্টের উপর নির্ভর করে (যেমন আপনার দ্বিতীয় স্ক্রিপ্টটি প্রথম স্ক্রিপ্টে লোড করা jQuery ব্যবহার করে), তবে আপনি এক্সিকিউশন অর্ডার নিয়ন্ত্রণের জন্য অতিরিক্ত কোড ছাড়াই এ্যাসিঙ্ক করতে পারবেন না, তবে আপনি এগুলি স্থগিত করতে পারেন কারণ স্থগিত স্ক্রিপ্টগুলি তবুও যথাযথভাবে কার্যকর করা হবে, ডকুমেন্টটি বিশ্লেষণের আগে পর্যন্ত নয়। আপনার যদি সেই কোডটি রয়েছে এবং এখনই চালানোর জন্য আপনার স্ক্রিপ্টগুলির প্রয়োজন নেই, আপনি এগুলিকে অ্যাসিঙ্ক বা মুলতুবি করতে পারেন।

আপনি স্ক্রিপ্টগুলিকে <head>ট্যাগে রাখতে পারেন এবং সেগুলিতে সেট করতে পারেন deferএবং স্ক্রিপ্টগুলির লোডিং ডিফ করা না হওয়া পর্যন্ত পেছানো হবে এবং এটি নতুন ব্রাউজারগুলিতে মুলত সমর্থনকারী দ্রুত পৃষ্ঠা প্রদর্শন পেতে সক্ষম হবে, তবে এটি আপনাকে কিছুটা সাহায্য করবে না all পুরানো ব্রাউজারগুলিতে এবং এটি </body>সমস্ত ব্রাউজারগুলিতে কাজ করার আগে ঠিক স্ক্রিপ্টগুলি ঠিক রাখার চেয়ে দ্রুততর কিছু নয়। সুতরাং, আপনি দেখতে পারেন কেন এটা তাদেরকে সঠিক সামনে লাগাতে শুধু সেরা </body>।

যখন স্ক্রিপ্টটি লোড হয় এবং যখন ব্যবহারকারী নির্ভরশীল অন্য কিছুই সেই স্ক্রিপ্ট লোডের উপর নির্ভর করে তখন আপনি সত্যই যত্নশীল হন না এমন সময় অ্যাসিঙ্ক বেশি কার্যকর। অ্যাসিঙ্কটি ব্যবহারের জন্য প্রায়শই উল্লেখ করা উদাহরণ হ'ল গুগল অ্যানালিটিক্সের মতো বিশ্লেষণী স্ক্রিপ্ট যা আপনি অপেক্ষা করার জন্য কিছু চান না এবং এটি শীঘ্রই চালানো জরুরি নয় এবং এটি একা দাঁড়িয়ে যায় যাতে অন্য কিছুই তার উপর নির্ভর করে না।

সাধারণত jQuery লাইব্রেরি async এর পক্ষে ভাল প্রার্থী হয় না কারণ অন্যান্য স্ক্রিপ্টগুলি এর উপর নির্ভর করে এবং আপনি ইভেন্ট হ্যান্ডলারগুলি ইনস্টল করতে চান যাতে আপনার পৃষ্ঠা ব্যবহারকারীর ইভেন্টগুলিতে প্রতিক্রিয়া শুরু করতে পারে এবং প্রাথমিক অবস্থা প্রতিষ্ঠার জন্য আপনাকে কিছু jQuery ভিত্তিক সূচনা কোড চালনা করতে হতে পারে পৃষ্ঠার এটি async ব্যবহার করা যেতে পারে, তবে jQuery লোড না হওয়া পর্যন্ত অন্যান্য স্ক্রিপ্টগুলি সম্পাদন না করার জন্য কোডিং করতে হবে।

— jfriend00
সূত্র
8
স্থিতিশীল তাদের এখনও চালানো উচিত, তবে ডোম-সামগ্রী লোড হওয়ার আগে চালানো উচিত। এর অর্থ এই নয় যে এটিকে মাথায় রেখে দেওয়া আরও দ্রুত হবে, যেহেতু এটি এগুলি ডাউনলোড শুরু করার আগে শরীরের এইচটিএমএলটি বিশ্লেষণ করা যায়?
— কেভিন
9
আপনি বলেছিলেন যে স্ক্রিপ্টগুলি স্থাপন করা headএবং সেগুলি সেট deferকরা আগে রাখার চেয়ে দ্রুত আর হবে না </body>, তবে যা আমি পড়েছি তা থেকে ভুল is এ সম্পর্কে চিন্তা করুন - আপনি যদি স্ক্রিপ্টগুলি রাখেন <head>তবে তা অবিলম্বে ডাউনলোড শুরু হবে, অন্যদিকে যদি সেগুলি ঠিক থাকে </body>তবে অন্য সমস্ত উপাদানগুলি প্রথমে ডাউনলোড করুন।
— নট
12
@ নেট - এটি আপনার দস্তাবেজটি কোনও দ্রুত লোড করবে না যা আমার বক্তব্য। আপনি ঠিক বলেছেন যে এটি স্ক্রিপ্টটি শীঘ্রই লোড করা উন্নতি করতে পারে তবে এটি নথির লোডিংও কমিয়ে দিতে পারে এবং এটির বিষয়বস্তু কারণ আপনি নিজের ব্যান্ডউইথের কিছু ব্যবহার করছেন এবং ব্রাউজার কোনও প্রদত্ত সার্ভারের সাথে সীমিত সংযোগগুলির একটি ব্যবহার করবে to আপনার সামগ্রীটি লোড করার চেষ্টা করার সময় স্ক্রিপ্টটি লোড করুন
— jਫਰ00
4
"যদি আপনার দ্বিতীয় স্ক্রিপ্টটি প্রথম স্ক্রিপ্টের উপর নির্ভর করে ... তবে আপনি সেগুলিকে async বা স্থগিত করতে পারবেন না" - এটি সত্য নয়, তারা স্থির রেখে ডিফারেন্ড করে।
— অসন্তুষ্ট গোয়াট
2
এই মুহুর্তে, এই উত্তরটি পোস্ট করা হওয়ার পরে, ২০১২ সাল থেকে ব্রাউজার বিকাশের সাথে </ em> র প্রয়োজনটি সত্যিই প্রয়োজনীয় নয়।
— বিজিকোড
839

এই চিত্রটি সাধারণ স্ক্রিপ্ট ট্যাগ, অ্যাসিঙ্ক এবং মুলতুবি ব্যাখ্যা করে

এখানে চিত্র বর্ণনা লিখুন

  • স্ক্রিপ্টটি লোড হওয়ার সাথে সাথে অ্যাসিঙ্ক স্ক্রিপ্টগুলি কার্যকর করা হয়, সুতরাং এটি কার্যকর করার আদেশের গ্যারান্টি দেয় না (শেষে আপনি অন্তর্ভুক্ত একটি স্ক্রিপ্ট প্রথম স্ক্রিপ্ট ফাইলের আগে কার্যকর করতে পারে)

  • ডিফার স্ক্রিপ্টগুলি কার্যকর করার ক্রমের গ্যারান্টি দেয় যাতে তারা পৃষ্ঠাতে প্রদর্শিত হয়।

এই লিঙ্কটি রিফ করুন: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

— প্রশান্ত বেন্দ্র
সূত্র
আমি মনে করি একাধিক স্ক্রিপ্টগুলির সাথে একটি উদাহরণ তাদের ক্রমটি চিত্রিত করার জন্য আরও ভাল হত
— ভিএনসিঙ্ক
4
@ রাইটোফ্যান্ডামাস দেখে মনে হচ্ছে asyncজিতবে। স্ট্যাকওভারফ্লো.com
— মনসাইনর
ভাল ব্যাখ্যার জন্য ধন্যবাদ। তবে চিত্রগুলি স্কেল করার মতো নয়। কেবলমাত্র <script>ট্যাগের ক্ষেত্রে , পৃষ্ঠার লোডের মোট দৈর্ঘ্য স্ক্রিপ্ট ফাইলটি ডাউনলোড করতে সময় লাগে বেশি।
— আরনি
@ ভাভিকহিরানি এই সাইট অনুসারে , একই স্ক্রিপ্ট ট্যাগে অ্যাসিঙ্ক এবং ডিফার উভয়ই ব্যবহার করে ব্রাউজার যদি এটি সমর্থন করে তবে অ্যাসিঙ্ক ব্যবহার করে, বা যদি এটি অ্যাসিঙ্ক সমর্থন করে না তবে পিছনে পিছনে পড়ে যায় তবে ডিফারকে সমর্থন করে। আচরণগুলি বেশ আলাদা, তাই উভয় ব্যবহারের পরামর্শ আমি দেব না, কারণ ফলাফলটি অনাকাঙ্ক্ষিত এবং বাগগুলির জন্য দুর্দান্ত উত্স হতে পারে।
— অ্যাড্রিয়ান উইক
@arni কেবলমাত্র ব্যান্ডউইথ যদি সম্পূর্ণরূপে ব্যবহার করা হয় তবে এটি খুব কমই হয়। এবং উভয় ডাউনলোডই ব্যান্ডউইথ ভাগ করে নেবে, কোনওটি ব্লক করে না —: আরও: এই চিত্রগুলি সবুজতে পার্সিং দেখায়, ডাউনলোড নয়।
— রবার্ট সিমার
212

HTML5 এর: async,defer

এইচটিএমএল 5-এ, আপনার জাভাস্ক্রিপ্ট কোডটি কখন চালাবেন তা আপনি ব্রাউজারকে বলতে পারেন। 3 টি সম্ভাবনা রয়েছে:

<script       src="myscript.js"></script>

<script async src="myscript.js"></script>

<script defer src="myscript.js"></script>

  1. asyncবা ছাড়া defer, ব্রাউজারটি আপনার স্ক্রিপ্ট ট্যাগের নীচে থাকা উপাদানগুলি রেন্ডার করার আগে তত্ক্ষণাত্ আপনার স্ক্রিপ্টটি চালাবে।

  2. সঙ্গে async(অ্যাসিঙ্ক্রোনাস), ব্রাউজার এইচটিএমএল পৃষ্ঠাটি লোড এবং যখন ব্রাউজার লোড এটা রেন্ডার এবং একই সময়ে স্ক্রিপ্ট চালানোর জন্য চলতে থাকবে।

  3. deferপৃষ্ঠার বিশ্লেষণ শেষ হওয়ার সাথে সাথে , ব্রাউজারটি আপনার স্ক্রিপ্টটি চালাবে। (সমস্ত চিত্র ফাইল ডাউনলোড করা শেষ নয়) এটি ভাল)

— দীনেশ
সূত্র
async=""টেম্পলেট পরিবর্তনগুলি বৈধকরণ এবং সংরক্ষণ করার আগে ব্লগার.কম টেম্পলেটটি প্রয়োজনীয় ।
— noobninja
1
দ্রষ্টব্য: এ্যাসিঙ্ক ব্যবহার করে স্ক্রিপ্টগুলি যেভাবে নির্দিষ্ট করা হয়েছে সেভাবে চলবে তার কোনও গ্যারান্টি নেই। "সুতরাং আপনার দ্বিতীয় স্ক্রিপ্ট যদি প্রথম স্ক্রিপ্টের উপর নির্ভর করে তবে এসাইক এড়ান" "
— ফয়সাল নাসির
2
async- স্ক্রিপ্টগুলি ডাউনলোড করার মুহুর্তে এইচটিএমএল ফাইলটিতে তাদের অর্ডের কোনও বিবেচনা না করেই কার্যকর করা হয় ।
— vsync
30

উভয় asyncএবং deferস্ক্রিপ্টগুলি পার্সারকে বিরতি না দিয়ে তত্ক্ষণাত ডাউনলোড শুরু করে এবং উভয়ই onloadস্ক্রিপ্টের উপর নির্ভরশীল ইনিশিয়ালাইজেশন সম্পাদন করার সাধারণ প্রয়োজনের সমাধান করতে একটি al চ্ছিক হ্যান্ডলার সমর্থন করে।

স্ক্রিপ্টটি কার্যকর করা হলে চারপাশে asyncএবং deferকেন্দ্রের মধ্যে পার্থক্য । asyncডাউনলোড শেষ হওয়ার পরে এবং উইন্ডোটির লোড ইভেন্টের আগে প্রতিটি স্ক্রিপ্ট প্রথম সুযোগেই কার্যকর করে। এর অর্থ এটি সম্ভব (এবং সম্ভবত) যে asyncস্ক্রিপ্টগুলি পৃষ্ঠায় প্রদর্শিত হয় সেভাবে কার্যকর করা হয় না। অন্যদিকে deferস্ক্রিপ্টগুলি পৃষ্ঠায় যে ক্রম ঘটে তা কার্যকর করার গ্যারান্টিযুক্ত। বিশ্লেষণ সম্পূর্ণরূপে সমাপ্ত হওয়ার পরে, কিন্তু ডকুমেন্টের DOMContentLoadedইভেন্টের আগে এই কার্যকর করা শুরু হয় ।

উত্স এবং আরও বিশদ: এখানে ।

— জমির খান
সূত্র
24

একই ধরণের সমস্যার মুখোমুখি হয়েছি এবং এখন উভয় কীভাবে কাজ করবে তা স্পষ্টভাবে বুঝতে পেরেছি ope এই রেফারেন্স লিঙ্কটি সহায়ক হবে ...

এসিঙ্ক

আপনি যখন আপনার স্ক্রিপ্ট ট্যাগটিতে অ্যাসিঙ্ক বৈশিষ্ট্য যুক্ত করবেন, নিম্নলিখিতটি ঘটবে।

<script src="myfile1.js" async></script>
<script src="myfile2.js" async></script>
  1. ফাইলগুলি আনার জন্য সমান্তরাল অনুরোধ করুন।
  2. দস্তাবেজটি এমনভাবে পার্সিং চালিয়ে যান যেন এটি কখনও বাধা পায় না।
  3. ফাইলগুলি ডাউনলোড হওয়ার মুহুর্তে স্বতন্ত্র স্ক্রিপ্টগুলি কার্যকর করুন।

মুলতবি করা

ডিফার একটি বড় ভিন্নতার সাথে অ্যাসিঙ্কের সাথে খুব মিল। যখন কোনও ব্রাউজার ডিফার অ্যাট্রিবিউট সহ কোনও স্ক্রিপ্টের মুখোমুখি হয় তা এখানে।

<script src="myfile1.js" defer></script>
<script src="myfile2.js" defer></script>
  1. স্বতন্ত্র ফাইল আনার জন্য সমান্তরাল অনুরোধ করুন।
  2. দস্তাবেজটি এমনভাবে পার্সিং চালিয়ে যান যেন এটি কখনও বাধা পায় না।
  3. স্ক্রিপ্ট ফাইলগুলি ডাউনলোড করা থাকলেও দস্তাবেজটিকে পার্সিং শেষ করুন।
  4. প্রতিটি স্ক্রিপ্ট ডকুমেন্টে যে ক্রমের মুখোমুখি হয়েছিল সেভাবে চালিত করুন।

তথ্যসূত্র: Async এবং Defer এর মধ্যে পার্থক্য

— kamesh
সূত্র
7

asyncএবং deferHTML পার্সিংয়ের সময় ফাইলটি ডাউনলোড করবে। উভয় পার্সার বাধা দেবে না।

  • asyncএটিকে ডাউনলোড করার পরে অ্যাট্রিবিউটযুক্ত স্ক্রিপ্টটি কার্যকর করা হবে। যদিও deferঅ্যাট্রিবিউটযুক্ত স্ক্রিপ্টটি ডিওএম পার্সিং শেষ করার পরে কার্যকর করা হবে।

  • সহ লোড হওয়া স্ক্রিপ্টগুলি asyncকোনও অর্ডারের গ্যারান্টি দেয় না। deferঅ্যাট্রিবিউটে লোড হওয়া স্ক্রিপ্টগুলি ক্রমে DOM এ প্রদর্শিত হয় তা বজায় রাখে।

<script async>স্ক্রিপ্ট কোনও কিছুর উপর নির্ভর না করে যখন ব্যবহার করুন । স্ক্রিপ্ট ব্যবহার নির্ভর করে যখন।

সেরা সমাধানটি দেহের নীচের অংশে যুক্ত হবে bl ব্লক করা বা রেন্ডারিংয়ের ক্ষেত্রে কোনও সমস্যা হবে না।

— NavyaKumar
সূত্র
এখানে কেবল কিছু স্পষ্ট করতে চাই, এখানে দুটি জিনিস ঘটছে 1. সংস্থান ডাউনলোড করা 2. সম্পদ কার্যকর করা। উভয় ক্ষেত্রে রিসোর্স ডাউনলোড করা (অ্যাসিঙ্ক এবং ডিফার) ব্লক করছে না, এর অর্থ, তারা এইচটিএমএল পার্সিংকে ব্লক করে না, যখন অ্যাসিঙ্কে এক্সিকিউশনটি পার্সিংকে ব্লক করে এবং স্থগিতের ক্ষেত্রে, এইচটিএমএল মার্কআপটি পার্স করার পরে মৃত্যুদন্ড কার্যকর করা হয়, অতএব এই ক্ষেত্রে অ ব্লকিং।
— poOof
5

আমি মনে করি জ্যাক আর্কিবাল্ড ২০১৩ সালে আমাদের কিছু অন্তর্দৃষ্টি উপস্থাপন করেছিলেন যা এই বিষয়টিতে আরও বেশি ইতিবাচকতা যুক্ত করতে পারে:

https://www.html5rocks.com/en/tutorials/speed/script-loading/

পবিত্র গ্রেইলে রেন্ডারিং বাধা না দিয়ে তত্ক্ষণাত স্ক্রিপ্টগুলি ডাউনলোড করা হচ্ছে এবং যত তাড়াতাড়ি সম্ভব যুক্ত হওয়া ক্রমে কার্যকর করা হবে। দুর্ভাগ্যক্রমে এইচটিএমএল আপনাকে ঘৃণা করে এবং আপনাকে এটি করতে দেয় না।

(...)

উত্তরটি আসলে HTML5 স্পেসে রয়েছে, যদিও এটি স্ক্রিপ্ট-লোডিং বিভাগের নীচে লুকিয়ে রয়েছে। " অ্যাসিঙ্ক আইডিএল অ্যাট্রিবিউটটি উপাদানটি অবিচ্ছিন্নভাবে কার্যকর করবে কিনা তা নিয়ন্ত্রণ করে। যদি উপাদানটির" ফোর্স-অ্যাসিঙ্ক "পতাকাটি সেট করা থাকে, তবে, পাওয়ার পরে, অ্যাসিঙ্ক আইডিএল বৈশিষ্ট্যটি সত্য হওয়া উচিত এবং সেটিংসে" ফোর্স-অ্যাসিঙ্ক " পতাকা অবশ্যই প্রথমে আনসেট করা উচিত ... "।

(...)

ডকুমেন্টে গতিশীলভাবে তৈরি এবং ডকুমেন্টে যুক্ত হওয়া স্ক্রিপ্টগুলি ডিফল্টরূপে অ্যাসিঙ্ক হয় , তারা ডাউনলোড করার সাথে সাথে রেন্ডারিং আটকে দেয় এবং কার্যকর করা হয় না, অর্থাত তারা ভুল ক্রমে বেরিয়ে আসতে পারে। যাইহোক, আমরা এগুলিকে স্পষ্টভাবে চিহ্নিত করতে পারি না async হিসাবে:

[
    '//other-domain.com/1.js',
    '2.js'
].forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
});

এটি আমাদের স্ক্রিপ্টগুলিকে এমন আচরণের মিশ্রণ দেয় যা সাধারণ এইচটিএমএল দিয়ে অর্জন করা যায় না। সুস্পষ্টভাবে অ্যাসিঙ্ক না হয়ে, স্ক্রিপ্টগুলি একটি কার্যকর মৃত্যুর কিউতে যুক্ত করা হয়, একই কাতারে সেগুলি আমাদের প্রথম সরল-এইচটিএমএল উদাহরণে যুক্ত করা হয়েছে। যাইহোক, গতিশীলভাবে তৈরি হয়ে, এগুলি ডকুমেন্ট পার্সিংয়ের বাইরে কার্যকর করা হয়, সুতরাং ডাউনলোড করার সময় রেন্ডারিং ব্লক করা হয় না (সিঙ্ক এক্সএইচআর দ্বারা অ-অ্যাসিঙ্ক স্ক্রিপ্ট লোডিংকে বিভ্রান্ত করবেন না, যা কখনই ভাল জিনিস নয়)।

উপরের স্ক্রিপ্টটি পৃষ্ঠাগুলির শিরোনামে ইনলাইন অন্তর্ভুক্ত করা উচিত, প্রগতিশীল রেন্ডারিং ব্যাহত না করে যত তাড়াতাড়ি সম্ভব স্ক্রিপ্ট ডাউনলোডগুলি সারিবদ্ধ করা উচিত এবং আপনার নির্দিষ্ট ক্রমে যত তাড়াতাড়ি সম্ভব কার্যকর করা হবে। "২.জেএস" "1.js" এর পূর্বে ডাউনলোড করা নিখরচায়, তবে "1.js" সফলভাবে ডাউনলোড এবং সম্পাদিত না হওয়া পর্যন্ত এটি কার্যকর করা হবে না বা এটি করতে ব্যর্থ হয়। Hurray থেকে! অ্যাসিঙ্ক-ডাউনলোড কিন্তু অর্ডার-এক্সিকিউশন !

তবুও, এটি স্ক্রিপ্টগুলি লোড করার দ্রুততম উপায় না হতে পারে:

(...) উপরের উদাহরণ সহ ব্রাউজারটিকে কোন স্ক্রিপ্ট ডাউনলোড করতে হবে তা আবিষ্কার করতে স্ক্রিপ্টটিকে বিশ্লেষণ করতে এবং চালিত করতে হয়। এটি আপনার স্ক্রিপ্টগুলি প্রিললোড স্ক্যানারগুলি থেকে গোপন করে। ব্রাউজারগুলি এই স্ক্যানারগুলি আপনি পরবর্তী পৃষ্ঠাগুলিতে সন্ধান করতে পারে এমন পৃষ্ঠাগুলিতে রিসোর্সগুলি আবিষ্কার করতে বা পার্সারকে অন্য কোনও সংস্থান দ্বারা অবরুদ্ধ করার সময় পৃষ্ঠা সংস্থানগুলি আবিষ্কার করতে ব্যবহার করে।

এটিকে নথির মাথায় রেখে আমরা আবিষ্কারের পিছনে যুক্ত করতে পারি:

<link rel="subresource" href="//other-domain.com/1.js">
<link rel="subresource" href="2.js">

এটি ব্রাউজারকে জানায় যে পৃষ্ঠাটির 1.js এবং 2.js প্রয়োজন। লিঙ্ক [rel = সাব্রোসোর্স] লিঙ্কের সাথে সমান [rel = প্রিফেট], তবে বিভিন্ন শব্দার্থবিজ্ঞানের সাথে। দুর্ভাগ্যক্রমে এটি কেবলমাত্র ক্রোমে সমর্থিত, এবং আপনাকে কোনও লিঙ্ক উপাদানগুলির মাধ্যমে একবার এবং আবার আপনার স্ক্রিপ্টে আবার কোন স্ক্রিপ্টগুলি দুবার লোড করতে হবে তা আপনাকে ঘোষণা করতে হবে।

সংশোধন: আমি প্রাথমিকভাবে বলেছি যে এগুলি প্রিলোড স্ক্যানার দ্বারা নেওয়া হয়েছিল, তারা নয়, এগুলি নিয়মিত পার্সার দ্বারা তুলে নেওয়া হয়। যাইহোক, প্রিললোড স্ক্যানার এগুলি নিতে পারে, এটি এখনও হয় না, তবে এক্সিকিউটেবল কোড দ্বারা অন্তর্ভুক্ত স্ক্রিপ্টগুলি কখনই প্রিললোড করা যায় না। যোভ ওয়েইসকে ধন্যবাদ যারা মন্তব্যগুলিতে আমাকে সংশোধন করেছেন।

— mjfneto
সূত্র
1

মনে হচ্ছে ডিফার এবং অ্যাসিঙ্কের আচরণটি ব্রাউজার নির্ভর, কমপক্ষে কার্যকর করার পর্যায়ে। দ্রষ্টব্য, স্থগিত করা কেবলমাত্র বাহ্যিক স্ক্রিপ্টগুলিতে প্রযোজ্য। আমি ধরে নিচ্ছি async একই প্যাটার্ন অনুসরণ করে।

আইই 11 এবং নীচে, অর্ডারটি এর মতো বলে মনে হচ্ছে:

  • অ্যাসিঙ্ক (পৃষ্ঠা লোড করার সময় আংশিকভাবে কার্যকর করা যেতে পারে)
  • কিছুই নেই (পৃষ্ঠা লোড করার সময় কার্যকর করা যায়নি)
  • স্থগিতকরণ (পৃষ্ঠা লোডের পরে কার্যকর করা হয়, ফাইলের মধ্যে স্থান নির্ধারণের ক্রমে সমস্ত মুলতুবি)

এজ, ওয়েবকিট ইত্যাদিতে, অ্যাসিঙ্ক বৈশিষ্ট্যটি উপেক্ষা করা হয়েছে বা শেষে রাখা হয়েছে বলে মনে হচ্ছে:

  • ডেটা-পেজস্পিড-ন-ডিফার (পৃষ্ঠাটি লোড হওয়ার সময় অন্য কোনও স্ক্রিপ্টগুলির আগে কার্যকর করে)
  • কিছুই নয় (পৃষ্ঠাটি লোড করার সময় কার্যকর করা যায়)
  • স্থগিতকরণ (ডিওএম লোড হওয়া পর্যন্ত অপেক্ষা করা হয়, সমস্ত ফাইলে স্থানের ক্রম স্থগিত)
  • অ্যাসিঙ্ক (DOM বোঝাই হওয়া পর্যন্ত অপেক্ষা করা হবে বলে মনে হচ্ছে)

আরও নতুন ব্রাউজারগুলিতে, ডেটা-পেজস্পিড-নো-ডিফার অ্যাট্রিবিউট অন্য কোনও বাহ্যিক স্ক্রিপ্টগুলির আগে চলে। এটি এমন স্ক্রিপ্টগুলির জন্য যা ডিওমের উপর নির্ভর করে না।

দ্রষ্টব্য: আপনার বাহ্যিক স্ক্রিপ্টগুলি কার্যকর করার জন্য যখন আপনার একটি সুস্পষ্ট ক্রম প্রয়োজন তখন ডিফার ব্যবহার করুন। এটি ব্রাউজারকে সমস্ত স্থগিত স্ক্রিপ্টগুলি ফাইলের মধ্যে স্থান দেওয়ার জন্য বলে tells

ASIDE: লোড করার সময় বাহ্যিক জাভাস্ক্রিপ্টগুলির আকারটি গুরুত্বপূর্ণ ছিল ... তবে মৃত্যুদন্ডের আদেশের উপর তার কোনও প্রভাব ছিল না।

আপনি যদি আপনার স্ক্রিপ্টগুলির পারফরম্যান্স সম্পর্কে উদ্বিগ্ন হন তবে আপনি সংশোধনটি বিবেচনা করতে পারেন বা এক্সএমএলএইচটিপিআরকিউয়েস্টের মাধ্যমে এগুলি গতিশীলভাবে লোড করতে পারেন।

— চার্লস ওভেন
সূত্র
data-pagespeed-no-deferসার্ভার সাইড পেজস্পিড মডিউল দ্বারা ব্যবহৃত একটি বৈশিষ্ট্য । data-pagespeed-no-deferএটির দ্বারা স্বীকৃত বৈশিষ্ট্যের কোনও ব্রাউজারে কোনও প্রভাব নেই।
— কিউট্যাক্স
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.