প্রসেস এবং কনস কী: জাভাস্ক্রিপ্ট মাথায় রেখে দেহের ঠিক সামনে দেবার আগে


87

বেশিরভাগ জাভাস্ক্রিপ্ট এবং ওয়েব ডেভলপমেন্ট বই / নিবন্ধগুলি বলছে যে আপনাকে অবশ্যই পৃষ্ঠার নীচে হেড ট্যাগে এবং জাভাস্ক্রিপ্টে রাখতে হবে।

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

উভয় পদ্ধতির প্রো এবং কনস কী এবং কখন ব্যবহার করবেন?

একই ইস্যুটির জন্য আরও একটি প্রশ্ন পেয়েছি: আমার পৃষ্ঠায় ব্যবহৃত জাভাস্ক্রিপ্ট ফাইলগুলি কোথায় ঘোষণা করব? <মাথা> <<<> বা কাছে <<>



উত্তর:


63

আপনার ওয়েব সাইটের গতি বাড়ানোর জন্য ইয়াহুর সেরা অনুশীলনগুলি থেকে :

স্ক্রিপ্টগুলির কারণে সমস্যাটি হ'ল তারা সমান্তরাল ডাউনলোডগুলি ব্লক করে। এইচটিটিপি / ১.১ স্পেসিফিকেশনটি পরামর্শ দেয় যে ব্রাউজারগুলি প্রতি হোস্টনামের সমান্তরালে দুটি চেয়ে বেশি উপাদান ডাউনলোড করে না। আপনি যদি একাধিক হোস্ট-নেম থেকে আপনার চিত্রগুলি পরিবেশন করেন তবে আপনি সমান্তরালে ঘটতে আরও দুটি ডাউনলোড পেতে পারেন। কোনও স্ক্রিপ্ট ডাউনলোড করার সময়, ব্রাউজারটি অন্য কোনও ডাউনলোড শুরু করবে না, এমনকি বিভিন্ন হোস্টনামে।

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

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

অতএব, সাধারণভাবে, তাদের নীচে স্থাপন করা পছন্দনীয়। যাইহোক, এটা সবসময় সম্ভব হয় না, এবং এটি প্রায়ই দেখা যায় না যে যাহাই হউক না কেন একটি পার্থক্য অনেক।


আমার একটি উদাহরণ আছে যা ক্যানভাসের চারদিকে স্কোয়ার সরিয়ে নিয়ে যায় এবং আমি যদি জাভাস্ক্রিপ্টটি এইচটিএমএলের প্রধান অংশে রাখি তবে এটি কার্যকর হবে না। ক্যানভাস ঘোষণার পরে এটি শরীরের নীচে থাকতে হবে। এর কোনও কারণ আছে বা আমি কীভাবে আমার সমস্ত জাভাস্ক্রিপ্ট ফাইলের <হেড> বিভাগে রাখব।
ডগ হাউফ

@ ডাওগহফ নিশ্চিত নন যে আমি এটি সম্পর্কে সঠিক কিনা তবে আপনি কি ডমকন্টেন্টলয়েড শ্রোতা যুক্ত করেছেন? আমি জিজ্ঞাসা করছি কারণ যদি আপনার স্ক্রিপ্টটি নীচে থাকে এবং এটি ক্যানভাসে রেন্ডার করে; এটি কারণ আপনি এটিতে লেখার চেষ্টা করার আগে ক্যানভাসটি ইতিমধ্যে স্ক্রিনে লোড হয়ে গিয়েছিল। এখন আপনি যদি স্ক্রিপ্টটি শিরোনামটিতে রাখেন তবে এটি ক্যানভাসে আঁকবে না কারণ ক্যানভাসটি এখনও নেই। সুতরাং আপনি যদি শ্রোতাদের যোগ করেন তবে এটি আপনার ক্যানভাস কোডটি ক্যানভাসটি লোড করার পরে চালিত করবে।
ম্যাথু ডি অল্ড

4
আপনি যে দস্তাবেজটি উদ্ধৃত করছেন তা কত পুরানো তা আমি জানি না, তবে মনে হচ্ছে ডিফার অ্যাট্রিবিউটটি বেশ কিছু সময়ের জন্য ফায়ারফক্সে সমর্থিত
ব্যবহারকারী 2428118

আপনাকে ধন্যবাদ, এটি আমাকে অনেক সাহায্য করে
টনিডেলিয়ন

31

অন্য লোকেরা যেমন বলেছে, আপনি যখন জাভাস্ক্রিপ্টটি মাথায় রাখেন তখন স্ক্রিপ্টগুলি লোড হওয়ার পরে পৃষ্ঠার রেন্ডারিংয়ে বিলম্ব হয়, যার অর্থ পৃষ্ঠাটি লোড হতে আরও বেশি সময় নিতে পারে - বিশেষত আপনি যদি বড় স্ক্রিপ্ট ফাইলগুলি ডাউনলোড করছেন।

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

আপনি যদি শৈলী বা উপাদান যুক্ত করছেন (ইত্যাদি সমৃদ্ধ সম্পাদকের কোনও ফর্মের সাথে পাঠ্যক্ষেত্রগুলি স্যুইচ করছেন) এটি ফ্লিকারিং হিসাবে ব্যবহারকারীদের কাছে দৃশ্যমান হবে be

যদি আপনি উপাদানগুলিতে ক্লিক ইভেন্টগুলি যুক্ত করে থাকেন তবে উপাদানগুলি দৃশ্যমান হওয়ার পরে কিছুক্ষণ তারা ক্লিকযোগ্য হবে না।

কখনও কখনও এই সমস্যাগুলির জন্য আপনার স্ক্রিপ্টগুলি মাথায় রাখার প্রয়োজন হয়, অন্য সময় নীচের অংশে এটি স্টিক করে আপনি ভাল হয়ে থাকবেন।

আইএমএইচও (পুরোপুরি ওয়াইস্লো এবং চতুর লোকদের বিরুদ্ধে) আপনার স্ক্রিপ্টগুলি প্রধান ট্যাগে রাখা উচিত এবং বেশিরভাগ সময় ক্যাশে হওয়ার জন্য কেবল তাদের উপর নির্ভর করা উচিত।


9

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

পৃষ্ঠার নীচে স্ক্রিপ্টগুলি স্থাপন করার চেষ্টা করার আরেকটি কারণ হ'ল সিঙ্গেল পয়েন্টস অফ ব্যর্থতা বা এসপিওএফ। এখানেই কোনও স্ক্রিপ্ট কল আউট হয়ে যায় বা অন্য কোনও কারণে পৃষ্ঠার কার্য সম্পাদনকে অবরুদ্ধ করে। এটি তৃতীয় পক্ষের বিজ্ঞাপন লাইব্রেরি ইত্যাদির সাথে অনেক কিছু ঘটতে পারে

হ্যাঁ আপনি কীভাবে আপনার অ্যাপ্লিকেশনটি আর্কিটেক্ট করেন সে সম্পর্কে আপনাকে আরও কঠোরভাবে চিন্তা করতে হতে পারে তবে আমি এটি খুব দ্রুত আমার কাছে খুব স্বাভাবিক হয়ে উঠতে পেরেছি। আমি স্ক্রিপ্টটি নীচে গত 4 বছরে কয়েকশ ওয়েব অ্যাপ তৈরি করেছি এবং আমি পার্থক্যটি বলতে পারি can আমি 500ms হতে পারে এটি 5000 মিমি হতে পারে তবে এটি সমস্ত বিষয়।


5

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


4

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


4
আপনি কী উল্লেখ করতে পারেন যে কীভাবে jQuery এই সমস্যাটি আগ্রহের বাইরে সমাধান করে?
ম্যাথু লক

jQuery ইভেন্টগুলিতে বাধ্যতামূলক হ্যান্ডলারগুলির জন্য একটি এপিআই রয়েছে
ড্রইমন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.