درک اصول JavaScript

جاوا اسکریپت موضوعی پیچیده است که دستیابی به آن بسیار سخت است. با این حال، درک آن هرگز اهمیتی نداشته است زیرا جاوا اسکریپت به طور فزاینده ای در وب سایت هایی که مدیریت می کنیم مورد استفاده قرار میگرد. با گسترش وب استفاده از JavaScript همچنان رو به افزایش است.

نویسنده سید علی اندرزگو

درک اصول JavaScript

جاوا اسکریپت موضوعی پیچیده است که دستیابی به آن بسیار سخت است. با این حال، درک آن هرگز اهمیتی نداشته است زیرا جاوا اسکریپت به طور فزاینده ای در وب سایت هایی که مدیریت می کنیم مورد استفاده قرار میگرد. با گسترش وب استفاده از JavaScript همچنان رو به افزایش است.

متخصصان سئو ممکن است مدت زمان زیادی را پشت سر بگذارند که وب سایت ها فقط HTML و CSS ثابت و رمزگذاری شوند. با این حال، جذب وب سایت ها اغلب به تعامل نیاز دارد، که معمولاً توسط JavaScript تأمین می شود. همانطور که جان مولر تحلیلگر گوگل اظهار کرد: جاوا اسکریپت از بین نمی رود. این زبان برنامه نویسی پیرامون ما است، بنابراین باید با آن بهتر آشنا شویم. بیایید فعال باشیم و به جای ترس از آن درباره جاوا اسکریپت بیشتر بدانیم.

وب از HTML ساده شروع شده است، به عنوان یک سئو کار می توانید از آن استفاده کنید. از devs JS بیاموزید و دانش SEO را با آنها به اشتراک بگذارید. JS قرار نیس جایی برود.

اغلب این تصور غلط وجود دارد که جاوا اسکریپت به تنهایی برای توسعه دهندگان است

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

JavaScript چیست؟

JavaScript یک زبان برنامه نویسی است که به شما امکان می دهد ویژگی های پیچیده ای مانند عناصر پویا و یا تعاملی را در سایتتان پیاده سازی کنید. هنگامی که اطلاعات HTML و CSS در کد منبع تجزیه و ساخته می شود جاوااسگریپت اجرا می شود، سپس JavaScript هرگونه وقایع یا متغیرهای مشخص شده در آن را تحریک می کند Document Object Model (DOM) به روز می شود، و در آخر JavaScript در مرورگر ارائه می شود.

HTML و CSS اغلب پایه های ساختار یک صفحه را تشکیل می دهند، و JavaScript ها ترفندها و تغییرات نهایی را ایجاد می کنند.

مدل شیء اسناد (DOM)

مدل شی سند (DOM) زمانی ایجاد می‌شود که یک صفحه پر شود، و از گره‌ها و اشیایی ساخته شده‌ است که تمام عناصر و ویژگی‌های مختلف را در یک صفحه نمایش می‌دهند، این صفحه به گونه ایی طراخی می شود که سایر برنامه‌ها بتوانند صفحه را از نظر ساختار، محتوا و styling دستکاری کنند.

تغییر عناصر DOM صفحه با استفاده از زبانی مانند JavaScript امکان پذیر است.

ECMAScript

ECMAScript (ES) یک زبان برنامه نویسی است که به منظور استاندارد سازی استفاده از کد JavaScript ایجاد شده است. نسخه های مختلف ECMAScript هنگامی منتشر می که زبان به مرور زمان، مانند ES5 و ES6 (که به آن ES2015 نیز گفته می شود) منتشر می شوند.

انتقال

ترانسپلر ابزاری است که کد منبع را به یک زبان برنامه نویسی متفاوت تبدیل می کند. این مفهوم کمی شبیه به Google Translate است اما برای کدها. شما می توانید یک زبان مبداء خاص را به یک زبان هدف دیگری تبدیل کنید، به عنوان مثال JavaScript به C ++ یا Python به Ruby تبدیل کنید.

با توجه به رندرینگ و ارائه JavaScript، اغلب یک ترانسپرس برای تبدیل ES6 به ES5 توصیه می شود زیرا Google در حال حاضر از نسخه قدیمی Chrome برای ارائه استفاده می کند که هنوز از ES6 پشتیبانی نمی کند.

کروم ۴۱

هنگام ارائه صفحات، Google از یک سرویس ارائه دهنده وب استفاده می کند که مبتنی بر Chrome 41 است. این بدان معنی است که موتور ارائه دهنده Google از همان ویژگی ها و ویژگی های نسخه خاص Chrome پشتیبانی می کند. زمانی را در نظر بگیرید که به روزترین نسخه Chrome 71 را در اختیار دارید، آنگاه مشاهده کنید که بسیاری از نسخه ها از زمان اجرای Chrome 41 در سال ۲۰۱۵ به صورت زنده راه اندازی شده اند و همه این نسخه ها دارای ویژگی های جدیدی هستند. به همین دلیل سرویس ارائه دهی Google در حال حاضر از ES5 به جای نسخه ES6 بعدی این زبان پشتیبانی می کند.

برنامه تک صفحه ای (SPA)

یک برنامه تک صفحه ای (SPA)، یک وب سایت یا برنامه وب است که به جای اینکه درخواست های جداگانه ایی به سرور برای HTML و محتوای جدید ایجاد کند آن را به صورت پویا می نویسد و مجدداً صفحه را به عنوان یک کاربر با آن به تعامل می گذارد.

از چارچوب های JavaScript می توان برای پشتیبانی از عناصر تغییر پویا SPA استفاده کرد.

Angular, Polymer, React & Vue

همه اینها انواع مختلفی از فریم ورکهای جاوا اسکریپت هستند.

  • Angular و Polymer توسط گوگل توسعه داده شد.
  • React توسط فیسبوک توسعه داده شد.
  • Vue توسط Evan You ساخته شده است که قبلاً در تیم انگولار Google کار می کرد.

هر فریم ورک جاوا اسکریپت دارای جوانب مثبت و منفی است، بنابراین توسعه دهندگان تصمیم می گیرند با یکی از آنها که مناسب ترین آنها و پروژه ای است که در آن کار می کنند کار کنند.

ارائه JavaScript

رندر جاوا اسکریپت شامل گرفتن اسکریپت و دستورالعمل های موجود در آن و پردازش همه آنهاست، سپس اجرای آن به گونه ای است که خروجی مورد نیاز در مرورگر نشان داده می شود. روش های مختلفی وجود دارد که می توانید برای کنترل نحوه ارائه JavaScript استفاده کنید.

ارائه جاوا اسکریپت در یک صفحه می تواند بر دو بخش اصلی تأثیر منفی بگذارد:

  • سرعت سایت
  • موتور جستجوی خزنده و شاخص گذاری

بسته به اینکه از کدام روش رندر استفاده می کنید، می توانید سرعت بارگذاری صفحه را کاهش داده و اطمینان حاصل کنید که محتوای برای خزیدن و نمایه سازی در دسترس موتورهای جستجو است.

پیش ارائه

پیش ارائه عبارت است از ارائه مطالب در صفحه قبل از درخواست کاربر یا موتور جستجو، به طوری که آنها یک صفحه ایستا با تمام مطالب موجود در آنجا را برای دریافت آماده می کنند. با بارگیری صفحه از این طریق محتوای شما به جای موتور جستجوگر یا مرورگر کاربر در دسترس قرار خواهد گرفت.

پیش رندرینگ معمولاً برای رباتهای موتور جستجو بجای انسان استفاده می شود. این امر به این دلیل است که یک صفحه از پیش ارائه شده ثابت برای کاربران جذابیت کمتری خواهد داشت زیرا فاقد هرگونه محتوای پویا یا تعاملی خواهد بود.

ارائه سمت سرور

سرور میزبان، برداشتن سنگین را انجام می‌دهد و صفحه را طوری می‌سازد که جاوا اسکریپت شده قبلا پردازش شده‌است و محتوا برای تحویل به مرورگر کاربر یا کاوشگر موتور جستجو در زمانی که درخواست می‌شود، آماده است

این روش به کاهش هرگونه فشار در دستگاه کاربر که می تواند ناشی از پردازش JavaScript باشد منجر می شود و این باعث افزایش سرعت بار صفحه می شود. رندر سمت سرور همچنین اطمینان می دهد که محتوای کامل توسط موتورهای جستجو قابل مشاهده و نمایه سازی است.

ارائه دهنده سمت مشتری

در حین ارائه به سمت مشتری، JavaScript توسط مرورگر کاربر یا توسط موتور جستجوگر صفحه درخواست می شود. سرور درخواست اولیه را برطرف می کند، اما بقیه کار پردازش و ارائه یک صفحه روی دستگاه کاربر یا موتور جستجو قرار می گیرد.

اغلب توصیه می شود از رندر سمت مشتری استفاده کنید زیرا در صفحه های خزنده Google تأخیر وجود دارد و سپس قادر به ارائه آنها هستید. Google تا زمانی که منابع کافی برای پردازش آنها در دسترس نباشد صفحاتی را که باید در صف قرار گیرند قرار می دهد.

ارائه پویا

ارائه پویا شامل استفاده از روشهای مختلف رندر بسته به اینکه آیا مرورگر کاربر یا یک موتور جستجوگر صفحه درخواست می کند.

اگر سایت شما معمولاً سمت مشتری را ارائه می دهد ، هنگام شناسایی Googlebot ، صفحه با استفاده از یک رندر سمت کوچک مشتری (به عنوان مثال Puppeteer یا Rendertron) از قبل ارائه می شود ، بنابراین می توانید بلافاصله آن را مشاهده و ایندکس کنید.

ارائه ترکیبی

رندر هیبریدی ترکیبی از ارائه دهنده سرور و رندر سمت مشتری را شامل می شود. محتوای اصلی به صورت پیش فرض ارائه شده توسط سرور ارسال می شود ، چه این مرورگر کاربر باشد یا خزنده موتور جستجوگر که درخواست محتوا می کند.

پس از بارگیری صفحه در ابتدا جاوا اسکریپت اضافی برای هرگونه تعامل در کنار مشتری ارائه می شود.

منبع

پاسخی بگذارید

ایمیل شما منتشر نشده و نزد ما محفوظ است.