এইচটিএমএল ফাইলে জাভাস্ক্রিপ্ট কোথায় রাখবেন?

210

বলুন আমার কাছে মোটামুটি মোটা জাভা স্ক্রিপ্ট ফাইল রয়েছে, এটি প্রায় 100 কিলোব্যাক বা আরও বেশি প্যাক করে। ফাইল দ্বারা আমার অর্থ এটি একটি বাহ্যিক ফাইল যা <script src="...">এইচটিএমএলটিতে আটকানো হবে না via

এটি এইচটিএমএল রাখার সেরা জায়গাটি কোথায়?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

প্রতিটি বিকল্পের মধ্যে কোনও কার্যকরী পার্থক্য থাকবে?

javascript  html  optimization 
— nickf
সূত্র
— ইভার

উত্তর:

175

ইয়াহু! ব্যতিক্রমী পারফরম্যান্স টিম ব্রাউজারগুলির উপাদানগুলি ডাউনলোড করার কারণে আপনার পৃষ্ঠার নীচে স্ক্রিপ্টগুলি রাখার পরামর্শ দেয় ।

অবশ্যই লেবির মন্তব্য "আপনার প্রয়োজনের ঠিক আগে এবং খুব শীঘ্রই না" সত্যই সঠিক উত্তর, অর্থাৎ "এটি নির্ভর করে"।

— ওয়াল্টার রুমসবি
সূত্র
4
উদাহরণস্বরূপ, আপনি যদি গুগল জিকুয়েরি স্টাফগুলি করতে চলেছেন তবে লাইব্রেরিটি এটি ব্যবহারের চেষ্টা করার আগে আপনার বোঝার দরকার হবে।
— ব্রায়ানএইচ
58
এছাড়াও, ইয়াহু ইপিটি নীচের দিকে জেএস স্থাপনের পরামর্শ দেওয়ার কারণ হ'ল জেএস লোড হওয়ার পরে ব্রাউজারটি একক থ্রেডযুক্ত মোডে যেতে হবে এবং তারপরে এক্সিকিউট করে। যদি স্ক্রিপ্টটি মাথা বা কন্টেন্টের মাঝে থাকে তবে ব্রাউজারটি জেএসের সাথে ডিল করার সময় "বিরতি" দেবে। নীচে JS স্থাপন করে, সামগ্রীটি লোড হবে এবং সাধারণত দৃশ্যমান হবে যাতে ব্যবহারকারী এটি পড়তে শুরু করতে পারে যখন ব্রাউজারটি এখনও জেএস নিয়ে কাজ করে।
— ব্রায়ানএইচ
1
ওহে. আমরা $(function () {...})কি পৃষ্ঠার নীচের অংশে এই জাতীয় কোডটি রেখেছি, না এটি ভিতরে থাকতে হবে <head>?
— থাং ফাম
7
আমি আশা করি এখানে "আপনার পৃষ্ঠার নীচে" উল্লেখ করা এর বাইরে নয় </body>?
— মিস্টার_গ্রীন
1
আধুনিক ব্রাউজারগুলি "ডিফার" বৈশিষ্ট্যটিও পড়তে পারে। আপনি <body> এর নীচে নেই এমন স্ক্রিপ্ট ট্যাগগুলিতে ডিফার = "ডিফার" সেট করতে পারেন এবং ব্রাউজারটি যখন এটি দেখবে, এটি প্রথমে এইচটিএমএলের বাকী অংশটি লোড করা শেষ করবে এবং তারপরে ফিরে যাবে এবং এর লিখিত সামগ্রীগুলির ব্যাখ্যা করবে স্ক্রিপ্ট ট্যাগ আপনি যদি এমন কোনও কাঠামো ব্যবহার করেন যেখানে পৃষ্ঠার সম্পূর্ণ নিয়ন্ত্রণ নেই। তবে এটি সহায়ক। : এই নিবন্ধ এবং মনে রাখবেন যে একটি জীবন্ত দলিল তাই তথ্য কিছু পুরানো মধ্যে খনন stackoverflow.com/questions/5250412/...
— LinuxDisciple
75

এটির জন্য সর্বোত্তম জায়গাটি আপনার প্রয়োজনের ঠিক আগে এবং খুব শীঘ্রই নয়।

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

আপনার জেএসএস স্ক্রিপ্টটি কি jQuery বা প্রোটোটাইপের মতো একটি সাধারণভাবে ব্যবহৃত লিব? যদি তা হয় তবে গুগল এবং ইয়াহুর মতো বেশ কয়েকটি সংস্থার কাছে রয়েছে এমন একটি সরঞ্জাম যা আপনার জন্য বিতরণ করা নেটওয়ার্কে এই ফাইলগুলি সরবরাহ করে।

— লেভি রোসোল
সূত্র
60

থাম্বের নিয়ম হিসাবে, <script>ট্যাগ লাগানোর সেরা ট্যাগ হ'ল পৃষ্ঠার নীচে </body>। এটার মতো কিছু:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

কেন?

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

সিএসএস

কিছুটা অফ-টপিক, তবে ... স্টাইলশিটগুলি শীর্ষে রাখুন।

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

আরও পড়া

ইয়াহু সত্যিই একটি দুর্দান্ত গাইড প্রকাশ করেছেন যা কোনও ওয়েবসাইটকে দ্রুততর করার জন্য সেরা অনুশীলনগুলির তালিকা করে। অবশ্যই পাঠযোগ্য মূল্য: https://developer.yahoo.com/performance/rules.html

— martynas
সূত্র
1
"স্ক্রিপ্টগুলির ফলে সমস্যা হ'ল তারা সমান্তরাল ডাউনলোডগুলি ব্লক করে।" - এটি আর সত্য নয়: w3.org/TR/html5/scriptting-1.html#attr-script-async
— কোয়ান্টিন
4

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

তবে আমি উল্লেখ করতে চাই যে সাধারণত, আধুনিক ব্রাউজারগুলি জিজিপ পেড জাভাস্ক্রিপ্ট ফাইলগুলি গ্রহণ করে! কেবল x.jsফাইলটি জিজপ করুন x.js.gzএবং srcএট্রিবিউটটিতে এটি নির্দেশ করুন । এটি স্থানীয় ফাইল সিস্টেমে কাজ করে না, এটির কাজ করার জন্য আপনার একটি ওয়েবসভার দরকার। তবে স্থানান্তরিত বাইটে সঞ্চয় বিপুল পরিমাণে হতে পারে।

আমি এটি ফায়ারফক্স 3, এমএসআইই 7, অপেরা 9 এবং গুগল ক্রোমে সফলভাবে পরীক্ষা করেছি। এটি সাফারি 3 তে দৃশ্যত কাজ করে না।

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

— Bart
সূত্র
8
আপনি ওপির প্রশ্নটি ভুল বুঝে গেছেন। তিনি জিজ্ঞাসা করছিলেন যে এইচটিএমএলটিতে স্ক্রিপ্ট ট্যাগটি কোথায় রাখা উচিত। তিনি ইতিমধ্যে স্ক্রিপ্টটি অন্তর্ভুক্ত না করে একটি বাহ্যিক ফাইল ব্যবহার করছিলেন। স্বীকারোক্তিভাবে, এপ্রিল '09-এ তাঁর প্রশ্ন সম্পাদনার আগে এটি কম স্পষ্ট ছিল। সম্ভবত এই উত্তরটি মুছবেন?
— মার্ক অ্যামেরি
@ লিন্ড্রো আমি এটি অনুমান করি কারণ লোকেরা সবসময় আসল প্রশ্নটি মাথায় রাখে না তবুও উত্তরগুলি যেমন দরকারী এটি বিবেচনা করে। তা সত্ত্বেও, এই উত্তর হল দরকারী নয় কিন্তু অগত্যা প্রাসঙ্গিক। ভোট আপের সরঞ্জামদণ্ডে আরও স্পষ্ট শব্দযুক্ত শব্দ থাকলে এটি আরও ভাল কাজ করতে পারে, যেমন 'এই উত্তরটি দরকারী এবং প্রাসঙ্গিক'।
— WynandB
1
গাজিপড জাভাস্ক্রিপ্টে: আপনি নিজের ওয়েবসারভারটিও এটি সঙ্কুচিত করতে কনফিগার করতে পারেন ... (বা nginx এর gzip_static মডিউল / বিকল্পের মতো কিছু ব্যবহার করুন) (এবং অন্য ক্লায়েন্টদের জন্য একটি গানজিপ) যা কমপক্ষে সঠিক কন্টেন্ট-টাইপ শিরোনাম প্রেরণ করা উচিত, জিজিপ হিসাবে চিহ্নিত এনকোডিং সহ, সম্ভবত আরও ভাল ব্রাউজার সমর্থন ফলাফল
— জার্ট ভ্যান ড্যান বার্গ
4

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

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

— ম্যাথিয়াস ওয়ান্ডেল
সূত্র
3

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

— স্যাম হাসলার
সূত্র
1

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

— GustyWind
সূত্র
0

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

আমি আপনাকে সত্যিকারের প্রতিটি শেষ এমএস আউট করা দরকার তবে আপনার সম্ভবত ইয়াহু যা বলেছে তা করা উচিত।

— পাগল
সূত্র
0

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

— জোসে সালগাদো
সূত্র
0

প্রশ্নের উত্তর নির্ভর করে। এই পরিস্থিতিতে 2 টি পরিস্থিতি রয়েছে এবং আপনার উপযুক্ত দৃশ্যের উপর ভিত্তি করে আপনাকে একটি পছন্দ করতে হবে।

দৃশ্য 1 - সমালোচনামূলক স্ক্রিপ্ট / প্রয়োজনীয় স্ক্রিপ্ট

আপনি যে স্ক্রিপ্টটি ব্যবহার করছেন তা ওয়েবসাইট লোড করা গুরুত্বপূর্ণ, এটি আপনার এইচটিএমএল ডকুমেন্টের শীর্ষে স্থাপন করার প্রস্তাব দেওয়া হয়েছে, <head> ,। কয়েকটি উদাহরণের মধ্যে রয়েছে - অ্যাপ্লিকেশন কোড, বুটস্ট্র্যাপ, হরফ ইত্যাদি include

পরিস্থিতি 2 - কম গুরুত্বপূর্ণ / বিশ্লেষণ স্ক্রিপ্ট

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

বোনাস - async / স্থগিত

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

যেমন। <script async src="script.js"></script>

— প্রবীণ তিরুমুরুগান
সূত্র
-1

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

— টিমোথি ট্রসডাল
সূত্র
-1

আমি বলব যে এটি জাভাস্ক্রিপ্ট কোড দিয়ে আপনি কী অর্জন করার পরিকল্পনা করেছিলেন তা নির্ভর করে:

  • যদি আপনি আপনার জেএস স্ক্রিপ্ট (গুলি) বহিরাগত সন্নিবেশ করানোর পরিকল্পনা করে থাকেন তবে সেরা স্থানটি পৃষ্ঠার শীর্ষে
  • আপনি যদি স্মার্টফোনে পৃষ্ঠাগুলি ব্যবহার করার পরিকল্পনা করে থাকেন, তবে পৃষ্ঠার নীচে, ট্যাগের ঠিক আগে।
  • তবে, যদি আপনি সমন্বয় এইচটিএমএল এবং জেএস তৈরি করার পরিকল্পনা করে থাকেন (উদাহরণস্বরূপ, গতিশীলভাবে তৈরি এবং পপুলেটেড এইচটিএমএল টেবিল) তবে আপনার এটি যেখানে দরকার সেখানে এটি অবশ্যই রেখে দিতে হবে।
— লুডুস এইচ
সূত্র
আমি কি বললাম বিয়োগের প্রাপ্য !? গীজ।
— লুডাস এইচ
স্ক্রিপ্ট মাথায় রেখেই বাহ্যিক হওয়ার কী সম্পর্ক? কেন পৃষ্ঠার নীচে স্মার্ট ফোনগুলির জন্য বিশেষত স্ক্রিপ্টগুলি রাখার জন্য ভাল জায়গা? জেএস থেকে গতিশীলভাবে এইচটিএমএল তৈরির বিষয়ে আপনার বক্তব্যটি কেবলমাত্র যদি আপনি ব্যবহার করছেন তবে সত্য document.write, যা আপনার সম্ভবত হওয়া উচিত নয়।
— কোয়ান্টিন
আমি কী ভেবেছিলাম তা আপনি "অনুমান" করেছিলেন এবং এর ফলে আমার উত্তরটি বিয়োগ পেয়েছে? আপনি সম্ভবত মনে করেন যে আপনার অনুমানটি আমার ব্যাখ্যা থেকে ভাল, তাই না? আমি কেবল সংক্ষিপ্ত ব্যাখ্যা দেওয়ার পরিকল্পনা করেছিলাম, যদি কেউ বুঝতে অক্ষম হয় তবে সে আরও তথ্যের জন্য জিজ্ঞাসা করবে। আমার মন্তব্যে আমি জেএসকে স্মার্ট ফোন এবং ট্যাবলেটগুলির জন্য পৃষ্ঠার শেষ প্রান্তে রাখার পরামর্শ দিয়েছিলাম, শরীরের শেষের আগে পুরো পৃষ্ঠাটি লোড করা দ্রুত হয় কারণ ব্রাউজারকে "একক থ্রেড" মোডে স্যুইচ করার প্রয়োজন হয় না, পৃষ্ঠার সামগ্রী প্রদর্শিত শুরু হবে পর্দায় ... তবে আপনি সম্ভবত এটি জানেন।
— লুডাস এইচ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.