බ්‍රව්සරයක් <script>ටැගයක් සහිත වෙබ් අඩවියක් පටවන විට සිදු වන්නේ කුමක්ද :
- HTML පිටුව ලබා ගන්න (උදා: index.html)
- HTML විග්රහ කිරීම ආරම්භ කරන්න
<script>බාහිර ස්ක්‍රිප්ට් ගොනුවක් යොමු කරන ටැගයක් විග්‍රහකයාට හමු වේ.- බ්රව්සරය ස්ක්‍රිප්ට් ගොනුව ඉල්ලා සිටී. මේ අතර, ඔබේ පිටුවෙහි අනෙක් HTML විග්රහ කිරීම විග්රහ කරන්නා අවහිර කරයි.
- ටික වේලාවකට පසු ස්ක්‍රිප්ට් බාගත කර පසුව ක්රියාත්මක කරනු ලැබේ.
- HTML ලේඛනයේ ඉතිරි කොටස විග්රහ කරන්නා දිගටම විග්රහ කරයි.
පියවර # 4 නරක පරිශීලක අත්දැකීමක් ඇති කරයි. ඔබ සියලු ස්ක්‍රිප්ට් බාගත කරන තෙක් ඔබේ වෙබ් අඩවිය පැටවීම නවත්වයි. පරිශීලකයින් වෛර කරන එක් දෙයක් තිබේ නම් එය වෙබ් අඩවියක් පූරණය වන තෙක් බලා සිටී.
මෙය පවා සිදුවන්නේ ඇයි?
ඕනෑම ස්ක්‍රිප්ටයකට තමන්ගේම HTML හරහා document.write()හෝ වෙනත් DOM හැසිරවීම් ඇතුළත් කළ හැකිය . මෙයින් ගම්‍ය වන්නේ, ලේඛනයේ ඉතිරි කොටස ආරක්ෂිතව විග්රහ කිරීමට පෙර, පිටපත බාගත කර ක්රියාත්මක කරන තෙක් විග්‍රහකයාට බලා සිටිය යුතු බවයි. සියල්ලට පසු, ස්ක්‍රිප්ටයට තමන්ගේම HTML ලේඛනයක් ඇතුළත් කිරීමට ඉඩ තිබුණි.
කෙසේ වෙතත්, බොහෝ ජාවාස්ක්‍රිප්ට් සංවර්ධකයින් ලේඛනය පූරණය වන විට තවදුරටත් DOM හසුරුවන්නේ නැත . ඒ වෙනුවට, ලේඛනය වෙනස් කිරීමට පෙර එය පටවන තුරු ඔවුන් බලා සිටී. උදාහරණයක් වශයෙන්:
<!-- index.html -->
<html>
<head>
<title>My Page</title>
<script src="my-script.js"></script>
</head>
<body>
<div id="user-greeting">Welcome back, user</div>
</body>
</html>
ජාවාස්ක්‍රිප්ට්:
// my-script.js
document.addEventListener("DOMContentLoaded", function() {
// this function runs when the DOM is ready, i.e. when the document has been parsed
document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});
ඔබගේ බ්රව්සරය නොදන්නා නිසා my-script.js ලේඛනය බාගත කර ක්රියාත්මක කරන තුරු එය වෙනස් කිරීමට යන්නේ නැත, විග්‍රහකය විග්රහ කිරීම නවත්වයි.
පැරණි නිර්දේශය
මෙම ගැටළුව විසඳීම සඳහා පැරණි ප්රවේශය <script>වූයේ ඔබේ පතුලේ ටැග් තැබීමයි <body>, මන්දයත් මෙය අවසානය දක්වාම විග්‍රහකය අවහිර නොකරන බව සහතික කරයි.
මෙම ප්‍රවේශයට තමන්ගේම ගැටළුවක් ඇත: සම්පූර්ණ ලේඛනය විග්රහ කරන තුරු බ්‍රව්සරයට ස්ක්‍රිප්ට් බාගත කිරීම ආරම්භ කළ නොහැක. විශාල ස්ක්‍රිප්ට් සහ ස්ටයිල් ෂීට් ඇති විශාල වෙබ් අඩවි සඳහා, හැකි ඉක්මනින් ස්ක්‍රිප්ට් බාගත කර ගැනීම කාර්ය සාධනය සඳහා ඉතා වැදගත් වේ. ඔබේ වෙබ් අඩවිය තත්පර 2 ක් තුළ පූරණය නොවන්නේ නම්, මිනිසුන් වෙනත් වෙබ් අඩවියකට යනු ඇත.
ප්රශස්ත විසඳුමක දී, බ්රව්සරය හැකි ඉක්මනින් ඔබගේ ස්ක්‍රිප්ට් බාගත කිරීම ආරම්භ කරන අතරම ඔබේ ලේඛනයේ ඉතිරි කොටස් විග්රහ කරයි.
නූතන ප්රවේශය
අද, බ්‍රව්සර් ස්ක්‍රිප්ට් වල asyncසහ deferගුණාංග වලට සහය දක්වයි. මෙම ගුණාංග බ්‍රව්සරයට පවසන්නේ ස්ක්‍රිප්ට් බාගත කරන අතරතුර දිගටම විග්රහ කිරීම ආරක්ෂිත බවයි.
අසින්ක්
<script src="path/to/script1.js" async></script>
<script src="path/to/script2.js" async></script>
අසින්ක් ගුණාංගය සහිත ස්ක්‍රිප්ට් අසමමුහුර්තව ක්රියාත්මක වේ. මෙයින් අදහස් කරන්නේ ස්ක්‍රිප්ට් එක බාගත කළ විගසම බ්රව්සරය අවහිර නොකර ක්රියාත්මක වන බවයි.
මෙයින් ගම්‍ය වන්නේ ස්ක්‍රිප්ට් 2 ස්ක්‍රිප්ට් 1 ට පෙර බාගත කර ක්රියාත්මක කළ හැකි බවයි.
Http://caniuse.com/#feat=script-async ට අනුව , සියලුම බ්‍රව්සර් වලින් 97.78% ක් මේ සඳහා සහය දක්වයි.
කල් දමන්න
<script src="path/to/script1.js" defer></script>
<script src="path/to/script2.js" defer></script>
විලම්බිත ගුණාංගය සහිත ස්ක්‍රිප්ට් පිළිවෙලට ක්රියාත්මක වේ (එනම් පළමු ස්ක්‍රිප්ට් 1, පසුව ස්ක්‍රිප්ට් 2). මෙය ද බ්රව්සරය අවහිර නොකරයි.
අසින්ක් ස්ක්‍රිප්ට් මෙන් නොව, විස්තාරණ ස්ක්‍රිප්ට් ක්රියාත්මක කරනු ලබන්නේ සම්පූර්ණ ලේඛනය පූරණය කිරීමෙන් පසුව පමණි.
Http://caniuse.com/#feat=script-defer ට අනුව , සියලුම බ්‍රව්සර් වලින් 97.79% ක් මේ සඳහා සහය දක්වයි. 98.06% ක් අවම වශයෙන් අර්ධ වශයෙන් එයට සහාය දක්වයි.
බ්‍රව්සරයේ ගැළපුම පිළිබඳ වැදගත් සටහනක්: සමහර අවස්ථාවන්හිදී IE <= 9 විසින් කල් දැමූ ස්ක්‍රිප්ට් පිළිවෙලට ක්රියාත්මක කළ හැකිය. ඔබට එම බ්‍රව්සර් සඳහා සහය දැක්වීමට අවශ්‍ය නම් කරුණාකර මෙය පළමුව කියවන්න !
නිගමනය
වර්තමාන නවීනතම දෙය නම් ස්ක්‍රිප්ට් <head>ටැග් එකට දමා asyncහෝ deferගුණාංග භාවිතා කිරීමයි . මෙය ඔබගේ බ්රව්සරය අවහිර නොකර ඔබගේ ස්ක්‍රිප්ට් ඉක්මනින් බාගත කිරීමට ඉඩ දෙයි.
හොඳ දෙය නම්, ඔබේ වෙබ් අඩවිය තවමත් මෙම ගුණාංගවලට සහය නොදක්වන 2% බ්‍රව්සර් මත නිවැරදිව පැටවිය යුතු අතර අනෙක් 98% වේගවත් කිරීමයි.