"জাভাস্ক্রিপ্ট নীচে রেখে" ডকুমেন্টের উদ্দেশ্যকে পরাস্ত করে?

26

আমি জানি যে পৃষ্ঠার নীচে জাভাস্ক্রিপ্ট স্থাপন করার প্রস্তাব দেওয়া হয়েছে, তবে আমি যদি jQuery ব্যবহার করছি তবে এটি ডিওএম লোড হওয়ার সাথে সাথে চালানোর উদ্দেশ্যে এটির পরাস্ত করে না?

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

সুখী মাধ্যম আছে, সম্ভবত?

javascript performance jquery

— DisgruntledGoat
সূত্র

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

3

এই প্রশ্নটি কি স্ট্যাকওভারফ্লো-এর বেশি নয়?

— মার্কো ডেমাইও

30

ডকুমেন্ট.ডিডি কোনও জাভাস্ক্রিপ্ট চালানোর আগে ডিওএম লোড হওয়ার জন্য অপেক্ষা করে (http://www.learningjquery.com/2006/09/introducing-docament- तैयार)।

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

সমস্ত কিছু লোড হয়ে যাওয়ার পরে জেএস এখনও চালায়, তা শুরুতে বা শেষ পর্যন্ত হোক।

— Callan
সূত্র

6

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

এটি দস্তাবেজকে প্রভাবিত করে না ready প্রস্তুতির হিসাবে, যখন ব্রাউজারটি কোনও পৃষ্ঠার জন্য ডোম প্রস্তুত করা শেষ করে। যে কোনও উপায়ে, এখনও সবকিছু প্রথমে লোড করা দরকার।

— Macha
সূত্র

3

এইচটিএমএল লোডিং শেষ না হওয়া পর্যন্ত স্ক্রিপ্টটির কোনও আসল ব্যবহার নেই - এইচটিএমএল লোড না হওয়া পর্যন্ত একটি স্ক্রিপ্ট DOM পরিবর্তন করতে পারে না। document.readyDOM লোড হওয়ার জন্য অপেক্ষা করে। সুতরাং, স্টাইলশিটগুলির মতো গুরুত্বপূর্ণ বিষয়গুলি ধরে রাখার কোনও মানে নেই।

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

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

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

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

ব্যবহারকারীকে অপেক্ষা না করে জাভাস্ক্রিপ্ট লোড করার জন্য একটি ঝরঝরে কৌশল রয়েছে, আপনি <script/>ডিওএম createElement()পদ্ধতিটি ব্যবহার করে একটি উপাদান তৈরি করতে পারেন এবং এটি ক্লোজিং </body>ট্যাগের ঠিক আগে পৃষ্ঠাতে যুক্ত করতে পারেন :

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

ব্রাউজারটি নতুন <script/>উপাদানটি পৃষ্ঠাটিতে যুক্ত না হওয়া পর্যন্ত জেএস স্ক্রিপ্টটি ডাউনলোড শুরু করে না । ডাউনলোড শেষ হয়ে গেলে ব্রাউজারটি এর মধ্যে থাকা জাভাস্ক্রিপ্ট কোডটি ব্যাখ্যা করে।

— টম
সূত্র

1

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

— স্কানলিফ

1

হ্যাঁ। আপনি যদি নীচে স্ক্রিপ্টগুলি রাখেন, doc.ready( DOMContentLoadedইভেন্ট) আর প্রয়োজন হয় না - আপনার স্ক্রিপ্টটি সমস্ত পূর্ববর্তী ডিওএম যেভাবেই লোড হওয়ার পরে কার্যকর করা হবে।

যেহেতু শেষে স্ক্রিপ্টগুলি কর্মক্ষমতা উন্নত করে (HTML পার্সিং এবং সিএসএস এবং চিত্রগুলি লোড করা স্ক্রিপ্টগুলি দ্বারা অবরুদ্ধ করা হয়নি) আমি ব্যবহারের পরিবর্তে নীচে স্ক্রিপ্টগুলি রাখার পরামর্শ দিই doc.ready।

— Kornel
সূত্র