آموزش بهینه سازی Defer parsing of JavaScript

Page Speed: تاخیر در فراخوانی جاوا اسکریپت

اسم فاکتور: تاخیر در فراخوانی java script
نوع فاکتور: JS
اهمیت: بالا
حد میانگین: ۶۴%

چکیده Defer parsing :

در بارگذاری یک صفحه از سایت، مرورگر باید تمامی محتوای درون تگ script را فراخوانی کند که این کار زمان زیادی به زمان بارگذاری سایت اضافه میکند.با استفاده کمتر از کد جاوا اسکریپت در صفحات سایت ، و تاخیر در فراخوانی جاوا اسکریپت که نیازی به آن در ظاهر سایت نیست میتوان سرعت بارگذاری سایت را بهینه کرد.

Overview

In order to load a page, the browser must parse the contents of all script tags, which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed, you can reduce the initial load time of your page.

اطلاعات بیشتر در مورد defer parsing of javascript از گوگل

چند تکنیک برای تاخیر در فراخوانی جاوا اسکریپت میتوان استفاده کرد.ساده ترین و بهترین تکنیک به تاخیر انداختن بارگذاری جاوا اسکریپت تا وقتی که نیاز به اجرا کد جاوا اسکریپت مورد نظر داشته باشیم.تکنیک دوم استفاده از ویژگی async در تگ script است ، که با اینکار فراخوانی جاوا اسکریپتهایی که باعث توقف کوتاه مدت بارگذاری سایت میشوند، را تا وقتی که بارگذاری اولیه سایت انجام نشده باشد به تاخیر می‌اندازد.اگر هیچ کدام از این دو روش برای سایت شما کارساز نبود میتوانید از تکنیک‌های زیر که بیشتر برای صفحات مخصوص موبایل استفاده می‌شود استفاده کنید:

وقتی در حال ساخت یک برنامه برای موبایل باشید، بارگذاری همه ی جاوا اسکریپت مورد نیاز یک up frontبرنامه ی کاربردی می تواند لازم و ضروری باشد، بنابراین برنامه ی کاربردی می تواند در هنگامی که کاربر آفلاین است، به کار خود ادامه دهد. در این حالت، برخی برنامه های کاربردی، مانند جی میل تلفن همراه، بارگذاری جاوا اسکریپت در کامنت ها و بعد از آن eval() جاوا اسکریپت در زمان لازم را مفید می دانند. این رویکرد تضمین می کند که کل جاوا اسکریپت ، در خلال بارگذاری اولیه ی صفحه، بارگذاری می شود، در حالی که نیازمند تجزیه و تفسیر جاوا اسکریپت نیست.
یک گزینه برای ذخیره ی کد در کامنت ها، ذخیره ی کد در رشته های لفظی جاوا اسکریپت است. هنگام استفاده از این تکنیک، جاوا اسکریپت فقط در صورت نیاز تجزیه و تفسیر می شود، که باز هم به وسیله فراخوانی eval() در رشته ی لفظی انجام می شود. این تکنیک همچنین این امکان را برای یک برنامه کاربردی فراهم می کند که جاوا اسکریپت را زود بارگذاری کند، اما تجزیه و تفسیر آن را تا زمانی که لازم باشد به تاخیر بیندازد.
توجه کنید که منتقل کردن برچسب های اسکریپتتان به پایان صفحه، غیربهینه است، زیرا تا زمانی که صفحه، تجزیه و تفسیر این جاوا اسکریپت را تمام کند، مرورگر، یک شاخص مشغول را نشان می دهد. ممکن است کاربران قبل از تعامل با صفحه، تا زمانی که شاخص بارگذاری صفحه نشان دهد که بارگذاری صفحه کامل شده است صبر کنند، بنابراین مهم است که جاوا اسکریپت به طریقی بلرگذاری شود که زمانی را که طول می کشد تا مرورگر، بارگذاری کامل صفحه را نشان دهد، به حداقل برساند.
در آزمون های خود ما که در اوایل ۲۰۱۱ انجام شد، ما متوجه شدیم که در دستگاه های تلفن همراه مدرن، هر کیلوبایت اضافه ی جاوا اسکریپت، حدود ۱ میلی ثانیه ی زمان تجزیه و تفسیر را به کل زمان بارگذاری صفحه اضافه می کند. بنابراین، ۱۰۰ کیلو بایت جاوا اسکریپتی که در بارگذاری صفحه ی اولیه گنجانده می شود، ۱۰۰ میلی ثانیه ی زمان بارگذاری را برای کاربرانتان اضافه می کند. از آنجایی که جاوا اسکریپت باید در هر بار بارگذاری یک صفحه، تجزیه و تفسیر شود، این زمان بارگذاری اضافی، بخشی از هر بارگذاری صفحه خواهد بود، چه از شبکه بارگذاری شود، چه از طریق کش مرورگر، چه در حالت آفلاین HTML5.

Details from Google

There are several techniques that can be used to defer parsing of JavaScript. The simplest and preferred technique is to simply Defer loading of JavaScript until it is needed. A second technique is to use the script async attribute where appropriate, which prevents parsing from blocking the initial page load by deferring it until the browser’s UI thread is not busy doing something else. If neither of these techniques is suitable, there are some additional techniques commonly used in mobile applications, described below:

When building mobile applications, it can be necessary to load all of the JavaScript needed by an application up front, so the application can continue to work when the user is offline. In this case, some applications, such as mobile Gmail, find it useful to load JavaScript in comments and later eval() the JavaScript when it is needed. This approach guarantees that all JavaScript is loaded during the initial page load, while not requiring that JavaScript to be parsed.

An alternative to storing code in comments is storing code in JavaScript string literals. When using this technique, the JavaScript is only parsed when needed, again by calling eval() on the string literal. This technique also allows an application to load JavaScript early, but defer parsing until it is needed.

Note that moving your script tags to the end of the page is sub-optimal, since the browser will continue to show a busy indicator until the page has finished parsing this JavaScript. Users may wait until the page load indicator shows that the page load is complete before interacting with the page, so it is important to load JavaScript in a way that minimizes the time it takes for the browser to indicate that the page load is complete.

In our own tests conducted in early 2011, we found that on modern mobile devices, each additional kilobyte of JavaScript adds about 1ms of parse time to the overall page load time. So 100kB of JavaScript included in the initial page load would add 100ms of load time for your users. Because JavaScript must be parsed on every visit to a page, this added load time will be part of every page load, whether loaded from the network, via the browser cache, or in HTML5 offline mode.

منابع:

آموزش بهینه سازی Defer parsing of JavaScript 4.38/5 - 8

نوشته شده توسط تیم سئو قالبفا در تاریخ ۲۰ فروردین ۱۳۹۳ دسته : آموزش بهینه سازی سرعت سایت