درک اصول جاوا اسکریپت به منزله ی برگ برنده

جاوا اسکریپت موضوع پیچیده ای است که رسیدگی به آن بسیار دشوار است.

با این حال، درک آن هرگز مهمتر از امروز نبوده است زیرا جاوا اسکریپت به طور فزاینده ای در وب سایت هایی که ما مدیریت می کنیم کاربرد پیدا کرده است.

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

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

تعداد بایت های جاوا اسکریپت در سراسر وب در سه سال گذشته 35 درصد در دسکتاپ و 62.7 درصد در تلفن همراه افزایش یافته است.

همانطور که جان مولر، تحلیلگر Google Webmaster Trends می گوید: جاوا اسکریپت "از بین نمی رود."

این زبان برنامه نویسی در اطراف ما وجود دارد پس بهتر است با آن بیشتر آشنا شویم. فعال باشیم و جاوا اسکریپت را بیشتر یاد بگیریم.

وب از HTML ساده نقل مکان کرده است - به عنوان یک SEO کار آن را بپذیرید. از توسعه دهندگان JS بیاموزید و دانش SEO را با آنها به اشتراک بگذارید. JS از بین نمی رود.

جان مولر - 8 آگوست 2017

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

من استدلال می‌کنم که اینطور نیست، زیرا می‌تواند برای هر کسی که می‌خواهد کاربران و موتورهای جستجو به محتوای وب‌سایت خود دسترسی داشته باشند، مشکل ایجاد کند.

اگر به طور کامل با جاوا اسکریپت آشنا نیستید، یا حتی هیچ ایده ای ندارید که این جاوا اسکریپت چیست، نگران نباشید.

من واژه نامه ای از اصطلاحات کلیدی و مفاهیم اساسی ضروری برای کمک به شما را در شروع مقاله گردآوری کرده ام.

جاوا اسکریپت چیست؟

جاوا اسکریپت یک زبان برنامه نویسی است که به شما امکان می دهد ویژگی های پیچیده ای مانند عناصر پویا یا تعامل گرا را در یک وب سایت پیاده سازی کنید.

جاوا اسکریپت زمانی اجرا می شود که اطلاعات HTML و CSS موجود در کد منبع تجزیه و ساخته شود.

سپس جاوا اسکریپت هر رویداد یا متغیری را که در آن مشخص شده است راه اندازی می کند، Document Object Model (DOM) به روز می شود، و در نهایت، جاوا اسکریپت در مرورگر ارائه می شود.

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

Document Object Model (DOM) چیست؟

Document Object Model (DOM) زمانی ایجاد می‌شود که صفحه بارگذاری می‌شود و از گره‌ها و اشیایی تشکیل شده است که همه عناصر و ویژگی‌های مختلف یک صفحه را ترسیم می‌کنند.

صفحه به این شکل ترسیم شده است تا سایر برنامه ها بتوانند صفحه را از نظر ساختار، محتوا و استایل آن تغییر داده و دستکاری کنند.

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

ECMAScript چیست؟

ECMAScript (ES) یک زبان برنامه نویسی است که برای استفاده استاندارد از کد جاوا اسکریپت ایجاد شده است.

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

ترانسپیلینگ (Transpiling) چیست؟

ترانسپایلر ابزاری است که کد منبع را به یک زبان برنامه نویسی متفاوت تبدیل می کند. این مفهوم کمی شبیه ترنسلیت گوگل است، اما برای کد.

شما می توانید یک زبان مبدأ خاص را به یک زبان مقصد متفاوت تبدیل کنید، به عنوان مثال، جاوا اسکریپت به C++ یا پایتون به روبی (Ruby).

با توجه به رندر جاوا اسکریپت، زمانی که گوگل از نسخه قدیمی کروم برای رندر استفاده می کرد و از نسخه جدیدتر ECMAScript، ES6 پشتیبانی نمی کرد، ترانسپایلری برای تبدیل ES6 به ES5 توصیه می شد.

کرومیوم (Chromium) چیست؟

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

برای انجام این کار، گوگل از Chromium استفاده می کند که یک پروژه متن باز است و کد آن مبنای مرورگر کروم را تشکیل می دهد.

با به روز رسانی کروم، نسخه های جدید مرورگر با ویژگی های جدید منتشر می شود. تا ماه می سال 2019، Googlebot از یک WRS مبتنی بر کروم 41 استفاده می کرد که در سال 2015 منتشر شد.

از آن زمان، گوگل اعلام کرد که Googlebot را همیشه سبز می کند، به این معنی که WRS آن به طور مداوم هر بار که نسخه جدیدی از کروم منتشر می شود، به روز می شود.

ingle-Page Application (SPA) چیست؟

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

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

Angular، Polymer، React و Vue چیست؟

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

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

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

اگر می‌خواهید در مورد چگونگی اندازه‌گیری چارچوب‌های مختلف بیشتر بدانید، این راهنما مقایسه دقیقی ارائه می‌دهد.

رندر جاوا اسکریپت (JavaScript Rendering) چیست؟

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

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

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

• سرعت سایت
• خزش و نمایه سازی موتورهای جستجو

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

پیش رندر

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

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

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

رندر سمت سرور

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

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

رندر از سوی سرور همچنین تضمین می کند که محتوای کامل می تواند توسط موتورهای جستجو دیده و فهرست شود.

رندر سمت کاربر

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

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

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

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

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

رندر پویا (دینامیک)

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

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

رندر ترکیبی

رندر هیبریدی یا ترکیبی شامل ترکیبی از رندر سمت سرور و رندر سمت کاربر است.

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

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

نتیجه

امیدواریم این راهنما برای شما مفید بوده و به شما کمک کرده باشد تا بتوانید اصول جاوا اسکریپت و نحوه تأثیر آن بر وب سایت ها را بهتر درک نمایید.

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