در بخش قبل گفتیم که مرورگر چطور DOM و CSSOM را ایجاد میکند و با ترکیب آنها Render-Tree را ایجاد کرده و در نهایت با محاسبه اندازه و موقعیت هر عنصر, آنها را در صفحه نمایش میدهد. در رابطه با جاوا اسکریپت هایی که در یک صفحه استفاده می کنید نیز باید دقت داشته باشید. برای جلوگیری از کند شدن سرعت صفحه بایستی بدانیم که چطور از جاوا اسکریپت استفاده نماییم.

در استفاده از جاوا اسکریپت نکات زیر را در نظر داشته باشید :

  • موقعیت قرارگیری کد جاوااسکریپت در صفحه مهم است و در سرعت پردازش صفحه تاثیر گذار است.
  • ایجاد DOM توسط مرورگر, زمانی که پردازش خط به خط اجرا شده و به کد جاوااسکریپت می رسد تا زمان تکمیل اجرا و دانلود جاوااسکریپت متوقف می شود.
  • جاوااسکریپت امکان تغییر DOM و CSSOM را دارد.
  • اجرای جاوااسکریپت تا زمانی که CSSOM آماده نشده است به تاخیر می افتد.

بنابراین وقتی کد جاوااسکریپت را قبل از ایجاد یک عنصر قرار دهید کد مورد نظر عنصر مربوطه را نمی تواند شناسایی کند. مانند مثال زیر :

در مثال بالا متغیر jelement مقدار undefined را خواهد داشت. چرا که پردازش و ایجاد DOM هنگام اجرای جاوااسکریپت متوقف شده است. و پس از اجرا عناصر دیگر به DOM افزوده می شوند. شاید فکر کنید که اگر کد جاوااسکریپت خود را درون فایل js قرار دهید و آن فایل را با تگ script به HTML خود اضافه کنید چه اتفاقی می افتد؟ در عمل هیچ تفاوتی نمیکند که شما از داخل یک فایل اسکریپت را اجرا کنید یا به صورت inline کد مربوطه را بنویسید. تنها تفاوت این است که یک درخواست بایستی ارسال شود (ممکن است درخواست به cache مرورگر هم ارسال شود) و همین سبب می شود که از 10 تا 1000 میلی ثانیه(و گاهی بیشتر) تاخیر در پردازش انجام شود.

حال میخواهیم به مرورگر بگوییم که پردازش DOM را هنگامی که به اسکریپت خاص ما رسید متوقف نکند و “در حین” آماده سازی DOM اسکریپت را اجرا کند. برای اینکار میتوانیم از خصوصیت async در HTML استفاده نماییم. البته این خصوصیت در تمام مرورگر های غیر IE و نسخه 10 IE پشتیبانی می شود :

البته این خصوصیت در HTML5 موجود است و در XHTML میتوانید به روش زیر از آن استفاده نمایید :

حال اگر بخواهیم به مرورگر بگوییم که پردازش DOM را هنگامی که به اسکریپت خاص ما رسید متوقف نکند و “پس از” آماده سازی DOM اسکریپت را اجرا کند میتوانیم از خصوصیت defer استفاده نماییم که پشتیبانی مرورگرها مانند async است :

در HTML5 و HTML4 نیز میتوانید از این خصوصیت استفاده نمایید. البته هر دو روش فقط برای فایل های اسکریپت خارجی قابل استفاده هستند. به این معنی که فقط در مواردی که فایل اسکریپت با تگ script src به HTML افزوده شده باشد.

 

محمد باقر رستمی

برنامه نویسی رو دوست دارم و از کارم و بیشتر از اون از یادگرفتن لذت می برم. دوست دارم از این طریق برای مردم دنیا مفید باشم. فارغ از رنگ، نژاد، ملیت و جنسیت.

Latest posts by محمد باقر رستمی (see all)

facebooktwittergoogle_pluslinkedin

دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

*


− هفت = 2