উত্তর:
সমস্ত স্ক্রিপ্ট শেষ লোড করা উচিত
প্রায় প্রতিটি ক্ষেত্রে, আপনার সমস্ত স্ক্রিপ্টের রেফারেন্স পৃষ্ঠার শেষে, ঠিক আগে রেখে দেওয়া ভাল </body>।
আপনি যদি টেম্প্লেটিং সমস্যা এবং নোটনোটের কারণে এটি করতে অক্ষম হন তবে আপনার স্ক্রিপ্ট ট্যাগগুলি deferবৈশিষ্ট্যের সাথে সাজাবেন যাতে এইচটিএমএল ডাউনলোড হওয়ার পরে ব্রাউজারটি আপনার স্ক্রিপ্টগুলি ডাউনলোড করতে জানে:
<script src="my.js" type="text/javascript" defer="defer"></script>এজ মামলা
কিছু প্রান্ত মামলা আছে তবে, যেখানে আপনি পৃষ্ঠা ঝিকিমিকি অথবা পৃষ্ঠার লোড করার সময় অন্যান্য হস্তনির্মিত সাধারণত কেবল আপনার jQuery এর স্ক্রিপ্ট রেফারেন্স স্থাপন দ্বারা সমাধান করা যেতে পারে যা হতে পারে <head>ট্যাগ ছাড়াdefer অ্যাট্রিবিউট। এই ক্ষেত্রে jQuery UI এবং jCarousel বা ট্রিভিউয়ের মতো অন্যান্য অ্যাডোন অন্তর্ভুক্ত রয়েছে যা তাদের কার্যকারিতার অংশ হিসাবে ডিওএম সংশোধন করে।
আরও সাবধান
কিছু লাইব্রেরি রয়েছে যা পলফিলের মতো ডিওএম বা সিএসএসের আগে অবশ্যই লোড করা উচিত। মডারিনিজার হ'ল এমন একটি গ্রন্থাগার যা অবশ্যই হেড ট্যাগে রাখা উচিত ।
<head>। আপনার মার্কআপ যদি আপনার জন্য সামগ্রীটি বাছাই করার জন্য jQuery প্লাগইন নির্ভর করে তবে প্লাগইনগুলি লোড না হওয়া পর্যন্ত আপনি নিজের ওয়েব পৃষ্ঠায় ফানকি মার্কআপ পেতে যাচ্ছেন তাই পৃষ্ঠার নীচে প্লাগইন রেফারেন্সটি রাখার কোনও অর্থ নেই। নিয়মগুলি বোঝানো হয় যতক্ষণ না তারা আর কাজ না করে, সেই সময়ে নিয়মগুলি ভঙ্গ করা উচিত।
স্ক্রিপ্টগুলির কারণে সমস্যাটি হ'ল তারা সমান্তরাল ডাউনলোডগুলি ব্লক করে। এইচটিটিপি / ১.১ স্পেসিফিকেশনটি পরামর্শ দেয় যে ব্রাউজারগুলি প্রতি হোস্টনামের সমান্তরালে দুটি চেয়ে বেশি উপাদান ডাউনলোড করে না। আপনি যদি একাধিক হোস্ট-নেম থেকে আপনার চিত্রগুলি পরিবেশন করেন তবে আপনি সমান্তরালে ঘটতে আরও দুটি ডাউনলোড পেতে পারেন। কোনও স্ক্রিপ্ট ডাউনলোড করার সময়, ব্রাউজারটি অন্য কোনও ডাউনলোড শুরু করবে না, এমনকি বিভিন্ন হোস্টনামে। কিছু পরিস্থিতিতে স্ক্রিপ্টগুলি নীচে সরানো সহজ নয়। উদাহরণস্বরূপ, স্ক্রিপ্টটি পৃষ্ঠার সামগ্রীর অংশ সন্নিবেশ করানোর জন্য ডকুমেন্ট-রাইটার ব্যবহার করে, তবে এটি পৃষ্ঠায় নীচে সরানো যাবে না। স্কোপিংয়ের সমস্যাও থাকতে পারে। অনেক ক্ষেত্রে এই পরিস্থিতিগুলির সাথে একত্রে কাজ করার উপায় রয়েছে।
একটি বিকল্প পরামর্শ যা প্রায়শই আসে তা হ'ল পিছিত স্ক্রিপ্টগুলি ব্যবহার করা। ডিফার বৈশিষ্ট্যটি নির্দেশ করে যে স্ক্রিপ্টটিতে ডকুমেন্ট.ওরাইট নেই এবং এটি ব্রাউজারগুলির একটি সূত্র যা তারা রেন্ডারিং চালিয়ে যেতে পারে। দুর্ভাগ্যক্রমে, ফায়ারফক্স ডিফলার বৈশিষ্ট্যটি সমর্থন করে না। ইন্টারনেট এক্সপ্লোরারে, স্ক্রিপ্টটি পিছিয়ে যেতে পারে তবে পছন্দ মতো নয় desired যদি কোনও স্ক্রিপ্ট স্থগিত করা যায় তবে এটি পৃষ্ঠার নীচেও সরানো যেতে পারে। এটি আপনার ওয়েব পৃষ্ঠাগুলি দ্রুত লোড করে তুলবে।
সম্পাদনা: ফায়ারফক্স ডিফার বৈশিষ্ট্যটি সংস্করণ 3.6 থেকে সমর্থন করে।
সূত্র:
অবশ্যই সিডিএন এর মাধ্যমে কেবল মাথার মধ্যে jQuery লোড করুন।
কেন? কিছু পরিস্থিতিতে আপনি এম্বেডড jQuery নির্ভর কোড সহ একটি আংশিক টেম্পলেট (যেমন এজ্যাক্স লগইন ফর্ম স্নিপেট) অন্তর্ভুক্ত করতে পারেন; jQuery পৃষ্ঠার নীচে লোড করা হয়, আপনি একটি "$ সংজ্ঞায়িত করা হয় না" ত্রুটি, দুর্দান্ত।
অবশ্যই এটির সাথে কাজ করার উপায় রয়েছে (যেমন কোনও জেএস এমবেড করা এবং লোড-এ-নীচে জেএস বান্ডেল সংযুক্ত করা নয়) তবে আপনি যে কোনও জায়গায় jQuery নির্ভর কোড রাখতে সক্ষম হওয়ায় অলসভাবে লোডড জেএসের স্বাধীনতা হারাবেন কেন ? জাভাস্ক্রিপ্ট ইঞ্জিন এতক্ষণ নির্ভর করে না যে কোডটি ডিওএমে কোথায় থাকে সেদিকে খেয়াল রাখে না (যেমন jQuery লোড হচ্ছে) সন্তুষ্ট হয়।
আপনার সাধারণ / ভাগ করা জেএস ফাইলগুলির জন্য, হ্যাঁ, এগুলি আগে রাখুন </body>, তবে ব্যাতিক্রমগুলির জন্য, যেখানে এইচটিএমএলের ঠিক সেই মুহূর্তে একটি jQuery নির্ভর স্নিপেট বা ফাইলের রেফারেন্সটি আঁকিয়ে রাখার জন্য এটি অ্যাপ্লিকেশন রক্ষণাবেক্ষণ বুদ্ধিমান করে তোলে, তাই করুন।
মাথায় কোনও পারফরম্যান্স হিট লোডিং জ্যাকুয়ারি নেই; গ্রহের কোন ব্রাউজারের ইতিমধ্যে ক্যাশে jQuery সিডিএন ফাইল নেই?
কিছুই না নিয়ে অনেকটা অ্যাডো, জিকুয়েরি মাথায় রেখে দিন এবং আপনার জেএসের স্বাধীনতার রাজত্ব দিন let
2%, বলুন, অর্ধ পৃষ্ঠাটি প্রথমবার লোড হওয়ার আগে চলে যাবে। এইভাবে আপনি 1%দর্শকদের হারাচ্ছেন , তবে সম্ভাব্যভাবে নিজেকে অনেক বিকাশ সময় এবং ঝামেলা সাশ্রয় করছেন। এটি আপনার ব্যবসায়ের মডেলটির সাথে
নিম্বুজ জড়িত ইস্যুটির খুব ভাল ব্যাখ্যা সরবরাহ করে তবে আমি মনে করি চূড়ান্ত উত্তরটি আপনার পৃষ্ঠার উপর নির্ভর করে: ব্যবহারকারীর পক্ষে তাড়াতাড়ি - স্ক্রিপ্ট বা চিত্রগুলি রাখা আরও গুরুত্বপূর্ণ কী?
কিছু পৃষ্ঠা রয়েছে যা চিত্রগুলি ব্যতীত কোনও অর্থই দেয় না, তবে কেবলমাত্র অপ্রয়োজনীয় স্ক্রিপ্টিং রয়েছে। সেক্ষেত্রে স্ক্রিপ্টগুলি নীচে রেখে দেওয়া বোধগম্য হয়, যাতে ব্যবহারকারীরা তাড়াতাড়ি চিত্রগুলি দেখতে এবং পৃষ্ঠার সার্থকতা শুরু করতে পারে। অন্যান্য পৃষ্ঠাগুলি কাজের জন্য স্ক্রিপ্টিংয়ের উপর নির্ভর করে। সেক্ষেত্রে ইমেজ সহ একটি অ-কার্যকারী পৃষ্ঠার চেয়ে চিত্রগুলি ছাড়া একটি কাজের পৃষ্ঠা থাকা ভাল, সুতরাং স্ক্রিপ্টগুলি শীর্ষে রাখাই বুদ্ধিমান।
আরেকটি বিষয় বিবেচনা করার বিষয় হ'ল স্ক্রিপ্টগুলি সাধারণত চিত্রগুলির চেয়ে ছোট হয়। অবশ্যই এটি একটি সাধারণীকরণ এবং এটি আপনার পৃষ্ঠায় প্রযোজ্য কিনা তা আপনাকে দেখতে হবে। যদি এটি হয় তবে আমার কাছে এটি প্রথমে থাম্বের নিয়ম হিসাবে রাখার পক্ষে যুক্তি (যেমন, অন্যথায় করার উপযুক্ত কারণ না থাকলে), কারণ চিত্রগুলি স্ক্রিপ্টগুলিকে বিলম্বিত করবে ততই তারা চিত্রগুলিকে বিলম্ব করবে না। পরিশেষে, শীর্ষে স্ক্রিপ্টটি থাকা খুব সহজ, কারণ আপনার যখন তাদের ব্যবহারের প্রয়োজন হয় তখন এগুলি এখনও লোড হয়েছে কিনা তা নিয়ে আপনার চিন্তা করার দরকার নেই।
সংক্ষেপে, আমি স্ক্রিপ্টগুলি ডিফল্টরূপে শীর্ষে রাখি এবং কেবল পৃষ্ঠাটি সম্পূর্ণ হওয়ার পরে নীচে নিয়ে যাওয়া সার্থক কিনা তা বিবেচনা করি। এটি একটি অপ্টিমাইজেশন - এবং আমি এটি অকাল আগে করতে চাই না।
বেশিরভাগ jquery কোড ডকুমেন্ট প্রস্তুতে কার্যকর করে, যা পৃষ্ঠার শেষ পর্যন্ত হয় না। তদ্ব্যতীত, পৃষ্ঠা রেন্ডারিং জাভাস্ক্রিপ্ট পার্সিং / সম্পাদন দ্বারা বিলম্বিত হতে পারে, সুতরাং পৃষ্ঠার নীচে সমস্ত জাভাস্ক্রিপ্ট স্থাপন করা ভাল অনুশীলন।
স্ট্যান্ডার্ড অনুশীলনটি হ'ল আপনার সমস্ত স্ক্রিপ্টগুলি পৃষ্ঠার নীচে রাখুন, তবে আমি বেশ কয়েকটি jQuery প্লাগইন সহ এএসপি.নেট এমভিসি ব্যবহার করি এবং আমি দেখতে পেয়েছি যে আমি যদি আমার জিক্যুরি স্ক্রিপ্টগুলি <head>মাস্টারের অংশে রাখি তবে এটি আরও ভাল কাজ করে find পাতা।
আমার ক্ষেত্রে, পৃষ্ঠাটি লোড করার সময় এমন নিদর্শনগুলি ঘটে থাকে, যদি স্ক্রিপ্টগুলি পৃষ্ঠার নীচে থাকে। আমি jQuery ট্রিভিউ প্লাগইন ব্যবহার করছি, এবং স্ক্রিপ্টগুলি শুরুতে লোড না করা হলে, প্লাগইন এটির উপর চাপানো প্রয়োজনীয় সিএসএস ক্লাস ছাড়াই গাছটি রেন্ডার করবে। পৃষ্ঠাটি প্রথমে লোড হওয়ার পরে, টিউভিউর যথাযথ উপস্থাপনা করার পরে আপনি এই মজাদার-চেহারার জগাখিচুড়ি পেতে পারেন। খুব খারাপ লাগছে। <head>মাস্টার পৃষ্ঠার বিভাগে jQuery প্লাগইন স্থাপন করা এই সমস্যাটি দূর করে।
@Html.Action, যা আংশিকভাবে আউটপুটটিতে ফলাফল লেখায়, কারণ আমার আংশিক $ is undefinedঅর্থ দেয় পরিবর্তে আংশিক লোড করার জন্য আমাকে লোড ('@ url.Action') ব্যবহার করতে হবে। তবে অতিরিক্ত অনুরোধের কারণে এটি একটি ফাউস দেয়। আপনার ইনপুট এর উপর ভিত্তি করে, আমি কেবল আমার মাস্টার পৃষ্ঠাতে রেন্ডারবডি () এর উপরে jquery স্থানান্তর করব
যদিও প্রায় সব ওয়েবসাইটই জ্যাকারি এবং অন্যান্য জাভাস্ক্রিপ্টকে শিরোনামে রাখে: ডি, এমনকি স্ট্যাকওভারফ্লো ডট কম পরীক্ষা করে।
আমি আপনাকে দেহের শেষ ট্যাগের আগে রাখার পরামর্শ দিই। উভয় জায়গায় রাখার পরে আপনি লোডিং সময়টি পরীক্ষা করতে পারেন। স্ক্রিপ্ট ট্যাগটি আপনার ওয়েবপৃষ্ঠাকে আরও লোড করতে বিরতি দেবে।
এবং পাদচরণে জাভাস্ক্রিপ্ট স্থাপনের পরে, আপনার ওয়েবপৃষ্ঠায় এটি অস্বাভাবিক চেহারা পেতে পারে যতক্ষণ না এটি জাভাস্ক্রিপ্ট লোড হয়, তাই আপনার শিরোনাম বিভাগে সিএসএস রাখুন।
ঠিক আগের </body>সবচেয়ে ভাল জায়গা অনুযায়ী ইয়াহু ডেভেলপার নেটওয়ার্ক এর আপনার ওয়েব সাইট দ্রুত গাড়ী চালানোর আপ জন্য সর্বোত্তম কার্যাভ্যাস এই লিঙ্কে , এটা জ্ঞান করে তোলে।
সবচেয়ে ভাল জিনিসটি নিজের দ্বারা পরীক্ষা করা।
আমার জন্য jQuery কিছুটা বিশেষ। আদর্শের ব্যতিক্রম হতে পারে। আরও অনেকগুলি স্ক্রিপ্ট রয়েছে যা এটির উপর নির্ভর করে, তাই এটি খুব গুরুত্বপূর্ণ যে এটি তাড়াতাড়ি লোড হয় তাই পরে আসা অন্যান্য স্ক্রিপ্টগুলি ইচ্ছাকৃতভাবে কাজ করবে। যেহেতু অন্য কেউ নির্দেশ করেছে এমনকী এই পৃষ্ঠাটি প্রধান বিভাগে jQuery লোড করে।