بارگیری جاوا اسکریپت ناهمزمان بارگیری جاوا اسکریپت (بدون مسدود کردن ارائه سند، بارگیری ناهمزمان)

30.07.2019 در تماس با

دلیل نوشتن این پست این بود که بیش از یک بار متوجه شدم که قرار دادن دکمه های سرویس های مختلف (به عنوان مثال: VKontakte، فیس بوک، توییتر، همکلاسی ها) در صفحه کد منجر به کندی قابل توجهی در بارگذاری و نمایش صفحه شده است. . این مورد زمانی است که از اتصال جاوا اسکریپت خارجی این سرویس های اجتماعی استفاده می شود.
اگر از دکمه های گرافیکی استاتیک ساده استفاده کنیم، مشکلی وجود ندارد، زیرا این حداقل گرافیک و اسکریپت هایی است که به صورت محلی قرار دارند (نمونه ای از پیاده سازی را می توانید در اینجا مشاهده کنید http://pervushin.com/social-button-for-blog.html). اما ما فقط نمادهای اجتماعی را می بینیم. خدمات، هیچ آماری (چند نفر صفحه ما را "لایک" کرده اند) وجود ندارد. آن ها اگر بخواهیم آمار را نیز ببینیم، باید اسکریپت های خارجی را نیز وارد کنیم. و در اینجا باید در نظر داشت که چند دکمه از این قبیل را متصل کرده ایم، مرورگر باید تعداد زیادی اسکریپت خارجی را دانلود کند، یعنی. اینها اتصالات اضافی به سرورهای خارجی هستند.

برای نشان دادن اینکه اگر صفحه دارای اسکریپت هایی در بخش باشد چه اتفاقی می افتد ، من پیشنهاد می کنم تعدادی از موارد آزمایشی را در نظر بگیریم. من از FireFox 3.6 و FireBug استفاده خواهم کرد.

بنابراین:
1) ساده ترین صفحه با یک فایل سبک، دو اسکریپت و سه تصویر:

و در اینجا نمودار بارگذاری آن است:

لطفاً توجه داشته باشید که همه تصاویر تنها پس از بارگیری "طولانی ترین" فایل جاوا اسکریپت بارگذاری می شوند.
من عمداً بارگذاری dummy_css.css و dummy_js.js را طولانی کردم. آنها فقط دو فایل هستند:

dummy_css.php
خواب (2)؛
?>
html، بدنه (
حاشیه: 0;
بالشتک: 0;
}
.img_container (
حاشیه: 0 خودکار؛ عرض: 500 پیکسل؛
}

dummy_js.php
خواب (3)؛ ?> var param = 1;

پس واضح است کهفایل js بارگذاری تمام گرافیک های دیگر را مسدود می کند.

2) همه چیز تقریباً یکسان است، اماساختگی_jsjs از یک میزبان خارجی بارگیری می شود:

وضعیت مشابه قبلی است:

3) بیایید سعی کنیم در بخش تغییر کنیمسر در جاهاییcss وفایل های js (css اکنون بعد از آن می آیدjs):

ما به نمودار بارگذاری نگاه می کنیم:

Js همچنان بارگذاری تصاویر را بدون توجه به میزبانی که از آن بارگذاری شده است مسدود می کند.

4) زمان بارگذاری را افزایش دهیدcss تا 4 ثانیه (کد html مانند موردN3):

5) مورد جالب دیگر:css قبل از آن قرار داردjs، امابارگذاری css بیشتر طول می کشد






در اینجا css از قبل بارگذاری تصاویر را مسدود می کند ...
6) انتقال یکjs داخل<
بدن>















واضح است کهساختگی_jsjs فقط سومین تصویر را که در آن قرار دارد بارگیری می کندکد html بعد از آن  اما اگربارگذاری css بیشتر طول می کشد، سپس بارگذاری گرافیک ها را مسدود می کند.تصور اینکه اسکریپت های خارجی قابل اتصال می توانند تا حد زیادی سرعت بارگذاری و رندر صفحه را کاهش دهند، سخت نیست، به خصوص اگر سرور راه دور به دلایلی زمان زیادی را برای پاسخگویی نیاز دارد.
قرار دادن اسکریپت های خارجی قبل ازبدن>
که بلافاصله خود را نشان می دهد ... همه اسکریپت هایی که بارگذاری آنها برای صفحه حیاتی نیست باید درست قبل از برچسب بسته شدن قرار گیرند....  اما این کار را می توان برای آن دسته از اسکریپت هایی انجام داد که تمام منطق در آنها وجود دارد و هیچ تماس خارجی از کد html وجود ندارد.  اگر برخی از توابع از کد html از اسکریپت هایی که هنوز بارگذاری نشده اند فراخوانی شوند، چنین موقعیت هایی باید به روشی خاص مدیریت شوند، زیرا  شما باید دانلود را پیگیری کنید
اما یک مشکل دیگر وجود دارد که با یک مثال توضیح می دهم:


 





اگر js قبلازمان زیادی طول می کشد تا بارگذاری شود، سپس با کلیک بر روی تصاویر قبل از بارگذاری کامل این اسکریپت به چیزی منجر نمی شود، زیرا  $ (document) .ready () فقط پس از بارگیری کامل js فعال می شود.  بنابراین اگر صفحات دارای نوعی منطق هستند که مدیریت رویداد را فراهم می کند، این روش چندان مناسب نیست.
پس چه راهی لازم است غیر مسدود کردندر حال بارگیری اسکریپت ها ...
async.js را ایجاد کنید:


script.src = "dummy_js.js"; 


و آن را وصل کنید:









 



 

اگر تماس async.js در آن قرار گیرد، قبل از این نه، سپس نمودار به شکل زیر خواهد بود: 
اما اگر در کد باز هم راحت تر است که async.js را در آن قرار دهید ، سپس باید کمی محتوای async.js را تغییر دهید: 

$ (سند) .ready (تابع () ( 
var script = document.createElement ("اسکریپت"); 
script.src = "dummy_js.js"; 
document.getElementsByTagName ("سر") .appendChild (اسکریپت); 
} 
);
بنابراین، مسئله بارگذاری ناهمزمان حل شده است، اما موضوع همگام سازی بارگذاری اسکریپت های خارجی و کدی که از آنها استفاده می کند باز است.  بیایید با اتصال دکمه های رسانه های اجتماعی آن را عملی کنیم.
) من در مورد تأثیر فایل های جاوا اسکریپت در مسیر رندر بحرانی (CRP) نوشتم.

جاوا اسکریپت یک منبع مسدود کننده برای تجزیه کننده است.  این بدان معناست که جاوا اسکریپت تجزیه خود سند HTML را مسدود می کند.  وقتی تجزیه‌کننده به تگ اگر چندین فایل جاوا اسکریپت را در صفحه بارگذاری کنیم، این رفتار می تواند مشکل ساز باشد، زیرا زمان رندر اولیه را افزایش می دهد، حتی اگر سند واقعاً به آن فایل ها وابسته نباشد.

خوشبختانه عنصر
 
یک فراخوانی اسکریپت ناهمزمان به شکل زیر است:
 
 
 اکنون اسکریپت ها کاربران شما را منتظر دانلود کامل خود نمی کنند، همه چیز به صورت موازی اجرا می شود.
 چگونه فرآیند را خودکار کنیم؟
 واضح است که اگر اسکریپت ها را به صورت دستی متصل می کنید و تعداد زیادی از آنها وجود ندارد، می توانید این کار را با قلم ها انجام دهید، فقط با افزودن ویژگی مناسب به کد تماس.  اما اگر به عنوان مثال، وردپرس با مجموعه ای از اسکریپت ها را دارید که علاوه بر این، به طور خودکار فراخوانی می شوند، چگونه می توان این تجارت را خودکار کرد؟
 ما فایلی را پیدا می کنیم که قبلاً برای ما آشناست functions.phpموضوع خود را و کد زیر را در آنجا وارد کنید (مثلاً در انتها):
// تابع جاوا اسکریپت ناهمزمان wcs_defer_javascripts ($ url) (اگر (FALSE === strpos ($ url, ".js")) $ url را برگرداند؛ اگر (strpos ($ url، "jquery.js")) $ url را برگرداند. بازگشت "$ url" async = "async";) add_filter ("clean_url", "wcs_defer_javascripts", 11, 1);
نتیجه
 آنچه را که می توان در جمع بندی اضافه کرد.  این اسکریپت ممکن است برای همه مناسب نباشد، زیرا، چه کسی می داند، کدام اسکریپت ها به طور خاص برای شما متصل شده اند، بنابراین، تنظیم و آزمایش کنید.  هیچ نقطه ضعفی برای چنین اسکریپتی وجود ندارد، به جز اینکه با یک سایت خاص به دلیل ویژگی های آن ناسازگار است.  این یک گام کوچک دیگر برای بهینه سازی وب سایت شما بود.
یک راه خروج وجود دارد: خطوط جاوا را در انتهای سند 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 و پایین تر)، متاسفانه بارگذاری ناهمزمان کار نمی کند، اما عملاً چنین کاربرانی وجود ندارد.  همه مرورگرها و سرویس های دیگر با موفقیت از بارگیری تسریع شده مدرن صفحات وب استفاده می کنند.
ناهمزمانی در جاوا اسکریپت قاعده ای است که طبق آن بلوک های کد JS به موازات بارگذاری DOM توسط مرورگر پردازش می شوند - یعنی.  ساختار صفحه وب یا پس از بارگذاری DOM. 


کد JS شناخته شده است که بین تگ ها قرار می گیرد...  در این مورد، کد می تواند در هر دو موجود باشد سرسند و در بدن- همزمان در هر قسمت از سند.  همچنین جاوا اسکریپت را می توان از دامنه های دیگر بارگذاری کرد.
معمولاً JS دقیقاً به این دلیل در انتهای صفحه قرار می گیرد که پردازش کد به زمان معینی نیاز دارد - بارگذاری صفحه در همان زمان به حالت تعلیق در می آید - DOM نمی تواند بارگیری شود زیرا منتظر اجرای اسکریپت جاوا اسکریپت است. کامل.
اگر در همان زمان اسکریپت با خطا نوشته شود یا از یک سرور خارجی که در دسترس نبود بارگیری شود، صفحه هرگز بارگیری نمی شود.  اگر کد JS به سادگی ضعیف بهینه سازی شده باشد و اجرای آن به زمان زیادی نیاز دارد - صفحه تا جایی که اسکریپت متصل است بارگیری می شود - سپس دانلود متوقف خواهد شد تا زمانی که اجرای اسکریپت کامل شود...  بازدیدکنندگان سایت می توانند متوجه این موضوع شوند، به خصوص اگر از اتصال اینترنت کند استفاده می کنند.
اغلب اوقات، بازدیدکننده‌ای از سایتی که صفحه آن به نصف بارگذاری نشده است، بدون اینکه منتظر بماند تا اسکریپت تا پایان اجرا شود، آن را ترک می‌کند.  بنابراین تاخیرها بسیار نامطلوب هستند.
برای اصلاح این وضعیت، این گزینه ارائه شده است. ناهمگامبه شما امکان می دهد JS را به صورت ناهمزمان بارگذاری کنید.  ساختار سند هنگام استفاده از سند و تمام عناصر صفحه منتظر اتمام اجرای اسکریپت نخواهد بود.
اسکریپت شروع می شود، حتی اگر اسکریپت کار خود را تمام نکرده باشد، صفحه به بارگیری ادامه می دهد.  در این حالت، برخی از عملکردهای صفحه ممکن است به درستی کار نکند (اگر خطاهایی در جاوا اسکریپت ایجاد شود) - به طور کلی، صفحه بارگذاری می شود و بازدید کننده سایت می تواند با آن کار کند.

شایان ذکر است که async توسط برخی از نسخه‌های اینترنت اکسپلورر پشتیبانی نمی‌شود، اما از آنجایی که تعداد بسیار کمی از کاربران از آن استفاده می‌کنند، معمولاً نادیده گرفتن این موضوع و استفاده از ناهمزمانی در جاوا اسکریپت منطقی است.
جایگزینی برای async می تواند باشد به تعویق انداختن...  هنگام استفاده از این ویژگی، اسکریپت تنها پس از بارگیری DOM اجرا می شود.  این دستورالعمل توسط همه مرورگرها پشتیبانی می شود، ویژگی آن این است که اسکریپت های JS را به ترتیب اتصال آنها پردازش می کند.
این می تواند هم یک مثبت و هم منفی باشد.  اگر ترتیب اجرای اسکریپت ها مهم است - به تعویق انداختن- راه حل بهتر. Async را می توان به اجبار غیرفعال کرد: script.async = نادرست;
نکته منفی این است که اگر یک اسکریپت از یک منبع خارجی غیرقابل دسترسی متصل شود، بقیه اسکریپت ها پردازش نخواهند شد.  آنها هر چقدر هم که به طور کلی مهم باشد منتظر این خواهند ماند.