روزمرگی فنی
روزمرگی فنی
خواندن ۳ دقیقه·۳ سال پیش

وردپرس و رؤیای خداحافظی با jQuery

وابستگی وردپرس به کتابخانه jQuery
وابستگی وردپرس به کتابخانه jQuery

وردپرس از کتابخانه jQuery استفاده می‌کند و اگر سری به این کتابخانه بزنید می‌بینید که اندازه فایل jQuery در نسخه جدیدش 280 کیلوبایت شده که وقتی فشرده می‌شود به 90 کیلوبابت می‌رسد. اما مشکل jQuery فقط اندازه‌‌ی مدام در حال افزایشش نیست. مساله مهم‌تر اینست که این فایل نزدیک به 11 هزار خط کد دارد، در حالی که در بهترین حالت شاید فقط 10 درصدش استفاده می‌شود! بنابراین حکایت اینست که شما یک لیوان شیر نیاز دارید، ولی به جایش گاوداری به شما داده می‌شود.

مثال زیر را درنظر بگیرید. در اینجا یک لوپ داریم که عبارت «سلام دنیا» را ده هزار بار تکرار می‌کند. با این تفاوت که اولی کتابخانه jQuery را وارد پروژه کرده و دومی با جاوااسکریپت خالص یا اصطلاحا «وانیلی» نوشته شده:

مقایسه jQuery  و اسکریپت‌های «وانیلی»
مقایسه jQuery و اسکریپت‌های «وانیلی»

و اما نتیجه عملکرد این دو:

مقایسه مدت زمان لود دو اسکریپت
مقایسه مدت زمان لود دو اسکریپت

در حالت اول jQuery حدود 2.5 ثانیه زمان برده و در حالت دوم فقط 0.8 ثانیه.

در حالی که اکثر توابعی را که در jQuery نوشته‌ شده‌اند می‌توان با جاوااسکریپت محض هم نوشت (مثال‌های مختلف را از این قسمت ببینید) و مرورگرهای مختلف هم به قدر کافی توسعه پیدا کرده‌اند که اسکریپت‌های وانیلی را ساپورت کنند (حتی اگر مرورگری هم ساپورت نکند، می‌توان با اضافه کردن polyfill های مختلف نقص مرورگر را جبران کرد). علاوه بر این حتی خیلی از وظایفی که سابقا به دوش جاوااسکریپت می‌افتاد، امروز با استفاده از CSS هم می‌توان انجام داد.

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

افول jQuery و صعود React
افول jQuery و صعود React

از طرف دیگر اگر از ابزارهای تست سرعت سایت استفاده کنید، می‌بینید که فایل‌های jquery.js و jquery.min.js تقریبا همیشه پای ثابت فهرست منابعی هستند که باعث Render Blocking می‌شوند.

تست سرعت سایت و فایل‌های مسبب Render Blocking
تست سرعت سایت و فایل‌های مسبب Render Blocking

به این معنی که مرورگر هنگام لود صفحه به محض برخورد با مثلا فایل jquery.min.js باید لحظاتی متوقف شود تا بتواند این فایل را دریافت و سپس خط به خط آنالیز، تبدیل و اجرا کند. بنابراین در این فاصله زمانی کاربر امکان استفاده از صفحه را نخواهد داشت و به اصطلاح «بلاک» می‌شود. این مشکل خودش را در موبایل بیشتر نشان می‌دهد و به همین خاطر است که گوگل همیشه امتیاز سرعت لود سایت شما را در حالت موبایل کمتر از حالت دسکتاپ برآورد می‌کند.

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

اما این روش عموما برای jQuery جواب نمی‌دهد، به طوری که استفاده از ویژگی Async یا Defer یا Delay برای jQuery به احتمال زیاد باعث می‌شود که وب‌سایت شما بهم بریزد یا برخی عملکردهایش مختل شود. به همین خاطر است که اگر دقت کرده باشید افزونه‌های معروف بهینه‌ساز سایت اکثرا به صورت پیش‌فرض فایل‌های jquery.js و jquery.min.js را از بهینه‌سازی مستثنی می‌کنند.

مستثنی بودن فایل‌های jquery به صورت پیش‌فرض در افزونه بهینه‌سازی لایت‌اسپید کش
مستثنی بودن فایل‌های jquery به صورت پیش‌فرض در افزونه بهینه‌سازی لایت‌اسپید کش

بنابراین مجموع این شرایط (یعنی از کار افتادن قالب‌ها و افزونه‌ها در صورت مهاجرت از jQuery و بهم ریختن و اختلال در عملکرد سایت در صورت استفاده از ویژگی Defer برای لود jQuery) باعث می‌شود که اجبارا با کتابخانه jQuery در وردپرس به همان شکلی که هست کنار بیاییم و احتمالا رویای مهاجرت وردپرس از jQuery را با خود به گور ببریم!

وندا نوژن

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