পারফরম্যান্স অনুকূল করতে কোনও পৃষ্ঠাতে জাভাস্ক্রিপ্ট লোড করার সর্বোত্তম উপায় কী?
উত্তর:
আপনি করতে পারেন এমন কয়েকটি জিনিস রয়েছে:
জাভাস্ক্রিপ্টের আগে এইচটিএমএল এবং সিএসএস লোড করুন। এটি ব্রাউজারটি পৃষ্ঠাটি ছড়িয়ে দেওয়ার এবং রেন্ডার করার জন্য প্রয়োজনীয় সমস্ত কিছু দেয়। এটি ব্যবহারকারীকে এই ধারণা দেয় যে পৃষ্ঠাটি সুন্দর is স্ক্রিপ্ট ট্যাগ বা ব্লকগুলি যতটা সম্ভব ক্লোডিং বডি ট্যাগের কাছে রাখুন।
একটি সিডিএন ব্যবহার বিবেচনা করুন। আপনি যদি জিকিউরির মতো জনপ্রিয় কোনও লাইব্রেরি ব্যবহার করছেন তবে অনেকগুলি সংস্থা (যেমন গুগল, ইয়াহু) বিনামূল্যে সিডিএন পরিচালনা করে যা আপনি লাইব্রেরি লোড করতে ব্যবহার করতে পারেন।
এম্বেড থাকা স্ক্রিপ্টের পরিবর্তে একটি বহিরাগত ফাইলকে লোড কোড করুন। এটি ব্রাউজারটিকে জেএস সামগ্রীটি ক্যাশে করার সুযোগ দেয় এবং এটিকে মোটেও লোড না করে। ধারাবাহিক পৃষ্ঠার বোঝা দ্রুত হবে।
ওয়েব সার্ভারে জিপ সংক্ষেপণ চালু করুন।
ইয়াহুতে পরামর্শগুলির একটি দুর্দান্ত পৃষ্ঠা রয়েছে যা পৃষ্ঠা লোডের সময়গুলি হ্রাস করতে সহায়তা করতে পারে।
মিনিফাইং, জিজিপিং এবং সিডিএনিং (নতুন শব্দ?) ছাড়াও। আপনার মুলতুবি লোডিং বিবেচনা করা উচিত। মূলত এটি যা করে তা হ'ল স্ক্রিপ্টগুলি গতিশীলভাবে যুক্ত করা এবং ব্লক করা রোধ করা, সমান্তরাল ডাউনলোডের অনুমতি দেওয়া।
এটি করার অনেকগুলি উপায় রয়েছে, এটি আমি পছন্দ করি
<script type="text/javascript">
function AttachScript(src) {
window._sf_endpt=(new Date()).getTime();
var script = document.createElement("script");
document.getElementsByTagName("body")[0].appendChild(script);
script.src = src;
}
AttachScript("/js/scripts.js");
AttachScript("http://www.google-analytics.com/ga.js");
</script>এটি ক্লোজিং বডি ট্যাগের ঠিক আগে রাখুন এবং প্রতিটি জেএস ফাইল লোড করতে সংযুক্তি স্ক্রিপ্ট ব্যবহার করুন।
এখানে আরও কিছু তথ্য http://www.stevesouders.com/blog/2009/04/27/loading-scriptts-without-blocking/
গুগল যেভাবে অ্যানালিটিকাগুলি লোড করে সেদিকেও নজর দিতে চাইবে:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>যেহেতু এটি "সেরা অনুশীলন" ধরণের স্ক্রিপ্ট হিসাবে বিবেচিত হয়:
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/
গুগল ভাওয়াদের একটি দম্পতি ভেলোসিটি ২০১০-তে একটি নতুন ওপেন সোর্স প্রকল্পের ঘোষণা করেছে যার নাম ডেফেবল । ডিফেবল কেবল জেএস, এইচটিএমএল এবং সিএসএসের অংশগুলি ক্রমবর্ধমানভাবে প্রকাশ করতে কিছু জাদু সম্পাদন করে যা ব্যবহারকারীর ক্যাশে সংরক্ষিত সংস্করণ থেকে পরিবর্তিত হয়েছে যা কোনও নতুন সংস্করণ প্রকাশিত হওয়ার পরে সম্পূর্ণ নতুন ফাইল প্রেরণের চেয়ে।
এই কৌশলটি অত্যন্ত উন্মত্ত, এবং বর্তমানে আপনি ছোট ঘন ঘন কোড পরিবর্তন সহ একটি বৃহত জাভাস্ক্রিপ্ট কোড বেস ব্যবহার করছেন এমন ওয়েবসাইটগুলিতে সর্বাধিক কার্যকর (এবং প্রচেষ্টার পক্ষে মূল্যবান)। গুগল ম্যাপের মতো অ্যাপ্লিকেশনগুলিতে এটি বিশেষত ভাল প্রযোজ্য, যা প্রতি মঙ্গলবার কমপক্ষে একটি রিলিজ হয় এবং বছরে গড়ে প্রায় 100 টি নতুন রিলিজ হয়। এইচটিএমএল 5 স্থানীয় স্টোরেজ আরও বিস্তৃত হয়ে উঠলে এটি সাধারণভাবে অনেক অর্থবোধ করে।
বিটিডাব্লু, আপনি যদি গুগলের মাইকেল জোনস পরিবর্তনের বিষয়ে কথা বলতে না দেখেন (ভূ-প্রাকৃতিক প্রেক্ষাপটে) জিওওয়েব ২০০৯-এ তার পুরো মূল বক্তব্যটি দেখার পক্ষে মূল্যবান ।
এই প্রশ্নের একটি আপডেট দিতে। আমি মনে করি যে আধুনিক সময়ে, অবরুদ্ধকরণ লোড করার উপায়ের আর দরকার নেই, ব্রাউজারটি এটি আপনার জন্য করবে।
আমি স্ট্যাকওভারফ্লোতে একটি প্রশ্ন যুক্ত করেছি, আমি এখানে সামগ্রীতে যুক্ত করব।
পার্থক্যটি হ'ল লোড ইভেন্টটি সামান্য আগে বরখাস্ত করা হবে, তবে ফাইলগুলি লোড করা নিজেরাই একই থাকে। আমি এটিও যুক্ত করতে চাই যে এমনকি অনলোডটি এমনকি অ-ব্লক করা স্ক্রিপ্টের আগেও আগুন জ্বলে, এর অর্থ এই নয় যে জেএস ফাইলগুলি আগে ফায়ার করা হয়েছে। আমার ক্ষেত্রে স্বাভাবিক সেটআপটি সবচেয়ে ভালভাবে বেরিয়ে আসে
এখন প্রথমে স্ক্রিপ্টগুলি এগুলি দেখতে:
<script>
(function () {
var styles = JSON.parse(myObject.styles);
for( name in styles ){
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', styles[name]);
document.getElementsByTagName('head')[0].appendChild(link);
}
var scripts = JSON.parse(myObject.scripts);
for( name in scripts ){
var e = document.createElement('script');
e.src = scripts[name];
e.async = true;
document.getElementsByTagName('head')[0].appendChild(e);
}
}());
</script>myObject.styles এখানে কেবল এমন একটি বস্তু রয়েছে যা সমস্ত ফাইলের জন্য সমস্ত url ধারণ করে।
আমি ৩ টি পরীক্ষা চালিয়েছি, ফলাফল এখানে:
সাধারণ সেটআপ
এটি কেবলমাত্র সাধারণ সেটআপ, আমাদের মাথার মধ্যে 4 টি CSS ফাইল এবং পৃষ্ঠার নীচে 3 সিএসএস ফাইল রয়েছে।
এখন আমি কিছুতেই ব্লক করতে দেখছি না। আমি এটি দেখতে পাচ্ছি যে একই সাথে সবকিছু লোড হচ্ছে।
নন-ব্লকিং জেএস
এখন আরও কিছুটা এগিয়ে নিতে, আমি কেবল জেএস ফাইলগুলি অ-ব্লক করে রেখেছি। এটি উপরের স্ক্রিপ্ট সহ। আমি হঠাৎ দেখতে পাচ্ছি যে আমার সিএসএস ফাইলগুলি লোডটি ব্লক করছে। এটি আশ্চর্যজনক, কারণ এটি প্রথম উদাহরণে কোনও কিছুকে ব্লক করছে না। সিএসএস হঠাৎ করে লোডকে বাধা দিচ্ছে কেন?
অ-ব্লকিং সবকিছু Everything
অবশেষে আমি একটি পরীক্ষা করেছি যেখানে সমস্ত বাহ্যিক ফাইলগুলি একটি অবরোধবিহীন উপায়ে লোড করা হয়। আমাদের প্রথম পদ্ধতির সাথে এখন আমি কোনও পার্থক্য দেখছি না। তারা উভয় একই চেহারা।
উপসংহার
আমার উপসংহারে এই ফাইলগুলি ইতিমধ্যে একটি অবরুদ্ধকরণ উপায়ে লোড করা হয়েছে, আমি বিশেষ স্ক্রিপ্ট যুক্ত করার প্রয়োজন দেখছি না।
নাকি আমি এখানে কিছু মিস করছি?
আরও:
- নিবন্ধ: http://www.yuiblog.com/blog/2008/07/22/non-blocking-scriptts/
- প্রশ্ন: /programming/
- প্রশ্ন: /programming/5765113/do-modern-browsers-still-limit- সমান্তরাল- ডাউনলোড
- কোড: http://cocolate.perfplanet.com/2010/the-truth-about-non-blocking- জাভাস্ক্রিপ্ট /
- কোড: http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/