یک راه خروج وجود دارد: خطوط جاوا را در انتهای سند html قرار دهید (بنابراین، پس از ترسیم کل صفحه بارگذاری می شوند) و تنها پس از آن محتوای بلوک ها در مکان های مناسب نمایش داده می شود. نامیده می شود. همه پروژه‌های جدی امروزه در تلاش هستند تا در سریع‌ترین زمان ممکن به فناوری بارگیری جدید روی بیاورند. علاوه بر این، کاملاً آسان است.
چندین رویکرد وجود دارد. به ترتیب شروع میکنم
script src = type = "text / javascript">
بارگیری اسکریپت ناهمزمان HTML5
استاندارد HTML5 از قابلیت بارگذاری اسکریپت ها به صورت ناهمزمان پشتیبانی می کند، که می تواند به طور قابل توجهی زمان بازیابی صفحه را افزایش دهد. فقط اضافه کن ناهمگامیا به تعویق انداختن.
< script async src= "http://www.site.ru/script.js" type = "text / javascript">
< script defer src= "http://www.site.ru/script.js" type = "text / javascript">
چگونه ویژگی‌های async و defer متفاوت هستند
در هر دو مورد، ما بارگیری ناهمزمان اسکریپت ها را دریافت می کنیم. تنها تفاوت لحظه ای است که اسکریپت شروع به اجرا می کند. اسکریپت با ویژگی ناهمگامدر اسرع وقت پس از بارگذاری کامل، اما قبل از بارگذاری شی پنجره اجرا می شود. در صورت استفاده از صفت به تعویق انداختن- اسکریپت ترتیب اجرای خود را نسبت به سایر اسکریپت ها به هم نمی زند و اجرای آن پس از بارگیری کامل و تجزیه صفحه، اما قبل از رویداد DOMContentLoaded شی سند رخ می دهد.
متأسفانه، این مکانیسم در حال حاضر در همه مرورگرها (به خصوص IE) کار نمی کند. همچنین اگر در فایل باشد کار نخواهد کرد script.jsخطوط وجود دارد سند.نوشتن.
بارگیری ناهمزمان اسکریپت جاوا اسکریپت از گوگل
همانطور که همه صنعتگران می دانند، گوگل به سرعت بارگذاری سایت ها توجه ویژه ای دارد و سرعت های کند را در نتایج جستجو کاهش می دهد. برای کمک، گوگل یک اسکریپت ویژه ایجاد کرده است که با آن می توانید بارگذاری جاوا اسکریپت ناهمزمان را انجام دهید.
برای استفاده، فقط تعویض کنید
در قدیمی ترین نسخه های IE (6 و پایین تر)، متاسفانه بارگذاری ناهمزمان کار نمی کند، اما عملاً چنین کاربرانی وجود ندارد. همه مرورگرها و سرویس های دیگر با موفقیت از بارگیری تسریع شده مدرن صفحات وب استفاده می کنند.
اسکریپت های همزمان بد هستند، مرورگر را مجبور می کنند ساخت درخت DOM را مسدود کند: ابتدا باید اسکریپت را دریافت کنید، آن را اجرا کنید و تنها پس از آن به پردازش بقیه صفحه ادامه دهید. مطمئناً این برای شما خبری نیست و دلیل اینکه چرا ما به عنوان مبشر استفاده از اسکریپت ناهمزمان را تبلیغ کرده ایم. در اینجا یک مثال ساده آورده شده است:
<اسکریپت src =>اسکریپت> <اسکریپت> var script = document .createElement ("script"); script.src = "http://somehost.com/awesome-widget.js"; document .getElementsByTagName ("head") .appendChild (اسکریپت);اسکریپت>تفاوت در چیست؟ در نسخه "بد"، ساخت درخت DOM را مسدود می کنیم، صبر می کنیم تا اسکریپت بارگیری شود، اجرا شود، و تنها پس از آن ما به پردازش بقیه سند ادامه می دهیم. در مثال دوم، ما بلافاصله شروع به اجرای یک اسکریپت می کنیم که یک عنصر اسکریپت را با اشاره به یک منبع خارجی ایجاد می کند، آن را به سند اضافه می کنیم و به پردازش DOM ادامه می دهیم. تمایز ظریف است، اما بسیار مهم است: اسکریپت های تولید شده به صورت پویا مسدود نمی شوند.
بنابراین، این عالی است، درست است؟ اسکریپت های تولید شده به صورت پویا یک چیز هستند! نه خیلی سریع.
جاوا اسکریپت جاسازی شده یک دام کوچک اما مهم (و اغلب نادیده گرفته می شود) دارد: CSSOM قبل از اجرا آن را مسدود می کند. چرا؟ مرورگر نمی داند که چنین اسکریپتی دقیقاً قصد دارد چه کاری انجام دهد، و از آنجایی که جاوا اسکریپت می تواند ویژگی های CSS را دستکاری کند، مسدود می شود و منتظر می ماند تا CSS تجزیه شود و CSSOM ساخته شود. بهتر است یک بار ببینید تا صد بار، به مثال زیر توجه کنید:
یک لحظه صبر کن، چه خبر است؟ هر دو اسکریپت از قبل بارگیری می شوند و 2.7 ثانیه پس از بارگذاری صفحه اجرا می شوند.توجه داشته باشید که اسکریپت‌ها همچنان تنها پس از در دسترس بودن CSS (2.7 ثانیه) اجرا می‌شوند، اما از آنجایی که اسکریپت‌ها از قبل با در دسترس قرار گرفتن CSSOM بارگیری شده‌اند، می‌توانیم آنها را بلافاصله اجرا کنیم و بیش از یک ثانیه در زمان پردازش صرفه‌جویی کنیم. آیا همه این کارها را اشتباه انجام دادیم؟
قبل از پاسخ به این سوال، اجازه دهید به مثال دیگری نگاه کنیم، این بار با ویژگی "async":
<اسکریپت src = "http://udacity-crp.herokuapp.com/time.js?rtt=1&a" async>اسکریپت> <اسکریپت src = "http://udacity-crp.herokuapp.com/time.js?rtt=1&b" async>اسکریپت>
با وجود ویژگی async، اسکریپت به محض در دسترس بودن به صورت ناهمزمان اجرا می شود. اگر مشخصه وجود نداشته باشد، ... سپس اسکریپت بلافاصله بارگیری و اجرا می شود، قبل از اینکه تجزیه و تحلیل بیشتر سند ادامه یابد.
ویژگی async در تگ اسکریپت دو ویژگی مهم را پیاده سازی می کند: به مرورگر می گوید که ساخت DOM را مسدود نکند یا اجرای اسکریپت را قبل از ساخته شدن CSSOM مسدود نکند. در نتیجه، اسکریپت ها بلافاصله پس از بارگذاری (~ 1.6 ثانیه) بدون انتظار برای CSSOM اجرا می شوند. لیست کوتاه نتایج:
پس چرا ما تا کنون استفاده از قالبی را پیشنهاد کرده‌ایم که از اسکریپت‌های تولید شده به صورت پویا استفاده می‌کند؟
مقاله اصلی: «اسکریپت‌های ناهمگام» تزریق‌شده با اسکریپت مضر تلقی می‌شوند مقاله خوانده شده توسط: visitorFM، zenwalker، FMRobotدر Html
و مثال های زیر نحوه قرار دادن (یک اسکریپت درون خطی) را در داخل نشان می دهد
بازگشتی ماژول
مرورگرهایی که از مقدار ماژول برای ویژگی type پشتیبانی می کنند، هر اسکریپت با ویژگی nomodule را نادیده می گیرند. این به شما امکان می‌دهد از اسکریپت‌های ماژول استفاده کنید، در حالی که اسکریپت‌های بازگشتی با علامت‌گذاری nomodule را برای مرورگرهای غیرپشتیبانی نیز ارائه می‌دهد.
