دوستان کد گوگل پلاس دارید رو سرعت لود تاثیر نداشته باشه خیلی ؟
تو کدوم قسمت کد رو بزارم تا سرعت لود رو خیلی پایین نیاره
به خاطر درک بهتر یک توضیج کلی در مورد اجرا و تجزیه یک وب سایت توسط مرورگر میدم.
وفتی شما یک وب سایت رو توسط مرورگر باز میکنید ، این مراحل اتفاق میفته:
1.دریافت صفحه html
2.شروع تجزیه صفحه html
3.مواجه تجزیه گر با تگ <script> که به یک فایل خارجی اشاره داره
4.درخواست فایل اسکریپت خارجی توسط مرورگر ، در همین جال بلاک شدن تجزیه گر و توقف تجزیه سایر اجزای html
5.بعد از یک مدت زمانی فایل اسکریپت دانلود شده و متعاقبا فایل اجرا شده
6.تچزیه گر به تجزیه ادامه فایل html می پردازه.
همونطور که دید مرحله 4 اساسا بارگذاری سایت شما تا زمانی که فایل ها دانلود بشه متوقف میشه و این از نظر تجربه کاربری بسیار بد هست.
راه حل قدیمی : این هست که فایل های جاوا اسکریپت تون رو اخر <body> بزارید ، اینجوری اول کل صفجه لود میشه بعد فایل های جاوا اسکریپت دانلود میشن.
یک مشکلی که این روش داره ، برای سایت های با فایل های اسکریپت بزرگ اینکه فایل جاوا اسکریپت در سریع ترین زمان ممکن لود بشه از نظر کارایی حیاتی هست.
دیدید که یک سری سایت ها یک بخش هایی اش به جاوا اسکریپت وابسته هست ، تا زمانی که فایل جاوا اسکریپت لود نشه درست عمل نمیکنه ، حالا فکر کن اون سایت صفحه اش محتوای زیادی داشته باشه تا بخواهد اون صفحه دانلود بشه و کاربر کفری میشه.
راه حل مدرن : الان مرورگر ها از یک ویژگی async و defer پشتیبانی میکنن ، اینها نحوه کارشون به این صورت هست که میان به تجزیه گر میگن ، زمانی که اون فایل های جاوا اسکریپت در حال دانلود هست ، می تونی بری ادامه html رو تجزیه کنی ، به عبارت دیگه تجزیه گر بلاک نمیشه ، به صورت موازی کارشو انجام میده.
نمونه async
کد:
<script type="text/javascript" src="your_script1.js" async></script>
<script type="text/javascript" src="your_script2.js" async></script>
تو این حالت اسکریپت ها به صورت نا به همگام اجرا میشن ، یعنی به محض اینکه دانلود شدن اجرا میشن بدون بلاک کردن مرورگر. تو این حالت این احتمال وجود داری اسکریت دومی زودتر از اولی اجرا بشه.
در حال حاضر 80 درصد مرورگر ها از این حالت پیشتبانی میکنن.
http://caniuse.com/#search=async
نمونه defer
کد:
<script type="text/javascript" src="your_script1.js" defer></script>
<script type="text/javascript" src="your_script2.js" defer></script>
تو این حالت اسکریپت به ترتیب اجرا میشن و مرورگر بلاک نمیشه ، بر خلاف async این جالت زمانی کل داکیومنت لود شد ، اسکریپت ها اجرا میشن.
در حال حاضر 88 درصد مرورگر ها از این حالت پشتیبانی میکنن.
http://caniuse.com/#search=defer
نتیجه گیری
بهترین مکتن برای قرار دادن اسکریپت تو صفحه ، بخش <head> به همرا استفاده از async یا defer هست .
خوبیش اینکه هنوز هم سایتتون برای اون 20 درصد مرورگرهایی گه از این ویژگی ها پشتیبانی نمیکنن به درستی لود میشه و در عین حال برای اون 80 درصد دیگه بهینه هست.
