نحوه متحرک سازی سایه های CSS Box و بهینه سازی عملکرد

در این مقاله، نحوه متحرک سازی سایه های جعبه CSS بدون کاهش عملکرد مرورگر را خواهید آموخت. در CSS، ویژگی box-shadow برای افزودن سایه‌ها به عناصر وب استفاده می‌شود و این سایه‌ها را می‌توان متحرک کرد. با این حال، انیمیشن های سایه می توانند بر عملکرد مرورگر تأثیر بگذارند و باعث تاخیر در هنگام رندر صفحه شوند. این راهنما برای توسعه دهندگان فرانت اند با دانش کاری از HTML و انیمیشن CSS در نظر گرفته شده است.

معرفی سایت: 8 روش برتر برای افزایش عملکرد وب سایت

چرا این مهم است

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

قبل از اینکه جلوتر برویم، در اینجا نمایشی از نحوه عملکرد انیمیشن‌های box-shadow در یک صفحه وب ارائه شده است. شما می توانید در میان عناصر وب پیمایش کنید و با آنها تعامل داشته باشید.

به قلم
عناصر وب با انیمیشن سایه توسط SitePoint (@SitePoint)
در CodePen.

سه رویداد اصلی CSS Box Shadow Animation

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

نقاشی. در نقاشی، مرورگر پیکسل ها را با رنگ پر می کند و box-shadow یکی از ویژگی های CSS است که این رویداد را راه اندازی می کند. اساساً در هر فریم از انیمیشن یک سایه جدید ایجاد می کند. طبق Mozilla، انیمیشن CSS ایده آل باید با سرعت 60 فریم در ثانیه اجرا شود.
طرح بندی. برخی از انیمیشن ها ساختار یک صفحه را تغییر می دهند که می تواند منجر به محاسبات مجدد سبک شود. یک مثال خوب می تواند یک نوار کناری باشد که عناصر دیگر را هنگام گسترش از مسیر خارج می کند. ویژگی‌های CSS که باعث این امر می‌شوند عبارتند از padding، margin، border.
به بیان ساده، اگر ویژگی متحرک بر عناصر دیگر تأثیر بگذارد، طرح‌بندی صفحه را تغییر می‌دهد و باعث محاسبات مجدد می‌شود – که از منابع سیستم زیادی استفاده می‌کند.
ترکیب. در کامپوزیت فقط قسمت هایی از صفحه تغییر می کند. ویژگی‌های CSS مانند opacity و transform فقط بر عنصری که روی آن اعمال می‌شود تأثیر می‌گذارد. این به معنای محاسبات مجدد سبک کمتر و انیمیشن های روان تر خواهد بود. ترکیب کردن کم‌ترین فرآیند در بین هر سه است.

با ابزار بازرس مرورگر خود، می توانید این فرآیند را در زمان واقعی مشاهده کنید. ابتدا ابزار Inspector را باز کنید (Chrome در تصویر زیر است) و روی سه نقطه در گوشه سمت راست بالای تب کلیک کنید. ابزارهای بیشتر را علامت بزنید و Rendering را انتخاب کنید.

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

می‌بینید که هر عنصری که سایه دارد، هنگامی که ماوس را روی آن می‌برید، یا وقتی صفحه را بازخوانی می‌کنید، به رنگ سبز چشمک می‌زند. همچنین می‌توانید همین آزمایش را با طرح‌بندی انجام دهید: فقط علامت چشمک زدن رنگ را بردارید و Layout Shift Regions را انتخاب کنید.

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

هدف به حداقل رساندن تغییرات نقاشی و چیدمان است، زیرا از منابع سیستم بیشتری استفاده می کنند.

بررسی عملکرد

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

یک box-shadow دارای چهار مقدار و یک رنگ است. این چهار مقدار به ترتیب عبارتند از موقعیت افقی سایه (x-offset)، موقعیت عمودی (y-offset)، گسترش و شعاع تاری. یک انیمیشن سایه معمولی شامل تغییر در یک یا چند مورد از این مقادیر است:

box-shadow: ;

بیایید یک انیمیشن ساده box-shadow ایجاد کنیم که با مقداری HTML شروع کنیم:

body>
  div کلاس="box"> div>
body>

و در اینجا مقداری CSS برای سایه اولیه و نهایی وجود دارد:

.box {
  box-shadow: px 5px 10 px px rgba(، ، ، 0.5);
  انتقال: تبدیل آسان 0.5s، box-shadow ease 0.5s ;
}
.box:hover {
  تبدیل: translateY(-5px);
  box-shadow: px 10px 20 px 2px rgba(، ، ، 0.25);
}

نتیجه اینجاست:

به قلم
سایه-سایه متحرک توسط SitePoint (@SitePoint)
در CodePen.

برای انیمیشن، مقادیر y-offset، blur و spread را تغییر می‌دهیم. ما همچنین با یک سایه نهایی شفاف تر می رویم.

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

عکس صفحه زیر آنچه را که از ابزارهای توسعه‌دهنده Chrome پیدا خواهید کرد نشان می‌دهد.

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

اکنون، این اعداد خوب به نظر می رسند، اما چه اتفاقی می افتد زمانی که CPU چهار برابر کندتر است؟ شما می توانید سرعت پردازنده خود را از تب عملکرد کاهش دهید.

تصویر زیر نشان می‌دهد که وقتی همان انیمیشن را با CPU کندتر اجرا می‌کنید چه اتفاقی می‌افتد.

loading= “تنبل”/>

در این فرآیند جدید، بارگیری 6 میلی‌ثانیه طول می‌کشد. اسکریپت تا 52 میلی‌ثانیه است، رندر بیش از دو برابر شده و به 117 میلی‌ثانیه رسیده است، و رنگ‌آمیزی اکنون 72 میلی‌ثانیه است.

همچنین می‌توانید سرعت شبکه را کاهش دهید و CPU را حتی کندتر کنید. انیمیشن های سایه از منابع سیستم زیادی استفاده می کنند، و ما به دنبال برداشتن مقداری از بار خواهیم بود.

توجه به این نکته مهم است که ویژگی transform در نحوه عملکرد CPU نقش دارد. در ادامه بیشتر در مورد این موضوع.

چگونه عملکرد بهینه را حفظ کنیم

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

ما موارد زیر را پوشش خواهیم داد:

تحریک کردن کدورت
دارای چندین لایه box-shadow
متحرک سازی یک عنصر شبه
با استفاده از ویژگی transform

تحریک کردن کدورت

هنگام استفاده از رنگ‌های rgba، کانال آلفا کدورت را کنترل می‌کند. تغییر تنها کانال آلفا هنگام متحرک سازی سایه ها به اندازه تغییر مقادیر افست و گسترش سایه برای CPU سخت نخواهد بود.

.box {
  box-shadow: px 10px 20 px px rgba(، ، ، 0.5);
  انتقال: box-shadow ease 0.5s;
}
.box:hover {
  box-shadow: px 10px 20 px px rgba(، ، ، 0.25);
}
.box-2 {
  box-shadow: px 10px 20 px px rgba(، ، ، 0.5);
  انتقال: box-shadow ease 0.5s;
}
.box-2:hover {
  box-shadow: px 20px 40 px px rgba(، ، ، 0.25);
}

در انیمیشن اول، فقط کدورت سایه در حال تغییر است، در حالی که در دومی، y-offset از 10px به 20px تغییر می‌کند و گسترش در حال تغییر است. از 20px تا 40px.

و در اینجا نحوه عملکرد آنها با کاهش سرعت 6 برابری (بنابراین می توانید نمودارهای عملکرد را به وضوح ببینید) با انیمیشن شروع می شود که در آن فقط شفافیت در حال تغییر است:

تقریباً دو ثانیه طول می کشد تا روی جعبه و خارج از آن قرار بگیرید. حالا این را با انیمیشن سایه دوم مقایسه کنید.

دوباره، دو ثانیه روشن و خاموش می شود، و افزایش قابل توجهی در زمان برای همه رویدادها وجود دارد. پیش از این 96 میلی‌ثانیه نقاشی بود و اکنون دو برابر شده و به 187 میلی‌ثانیه رسیده است. رندر که بخشی از کامپوزیت است نیز از 97 میلی‌ثانیه به 178 میلی‌ثانیه افزایش یافته است.

بنابراین، تغییر تنها کدورت سایه، انیمیشن عملکردی تری تولید می کند.

در اینجا یک نسخه نمایشی زنده از این دو انیمیشن است.

به قلم
تاریستی متحرک در مقابل افست های متحرک توسط SitePoint (@SitePoint)
در CodePen.

سایه های لایه بندی شده

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

تکثیر این افکت با یک box-shadow آسان نیست. سایه های لایه ای بسیار بهتر به نظر می رسند. آنها همچنین انیمیشن های عملکردی تری تولید می کنند، حتی با لایه سایه اضافه شده.

اجازه دهید عملکرد یک box-shadow و یک سایه چند لایه را با هم مقایسه کنیم:

.box {
  box-shadow: px 10px 20 px px rgba(، ، ، 0.5);
  انتقال: box-shadow ease 0.5s;
}
.box:hover {
  box-shadow: px 20px 40 px px rgba(، ، ، 0.25);
}

این انیمیشن دارای 148 میلی‌ثانیه رندر و 133 میلی‌ثانیه نقاشی است.

حالا بیایید یک انیمیشن سایه با دو لایه box-shadow داشته باشیم:

.box-2 {
  box-shadow: px 5px 10 px px rgba(، ، ، 0.25)،
              px 10px 20px px rgba(،  ، ، 0.5);
  انتقال: box-shadow ease 0.5s;
}
.box-2:hover {
  box-shadow: px 10px 20 px px rgba(، ، ، 0.25)،
              px 20px 40px px rgba(، ,،0.15);
}

تفاوت واضح است. سایه‌های لایه‌ای نه تنها جلوه‌های سایه‌ای با ظاهر بهتر ایجاد می‌کنند، بلکه به‌طور شگفت‌انگیزی هنگام انیمیشن بهتر عمل می‌کنند. رندر از 148 میلی‌ثانیه به 74 میلی‌ثانیه کاهش یافته است و رنگ‌آمیزی نیز از 133 میلی‌ثانیه به 74 میلی‌ثانیه کاهش یافته است.

در اینجا یک نسخه نمایشی زنده از این دو مقایسه شده است.

به قلم
انیمیشن سایه‌ای در مقابل سایه لایه‌ای توسط SitePoint (@SitePoint)
در CodePen.

اکنون، بیایید چیز متفاوتی را امتحان کنیم و سایه دوم را در طول انیمیشن اضافه کنیم:

.box-2 {
  box-shadow: px 10px 20 px px rgba(، ، ، 0.5);
  انتقال: box-shadow ease 0.5s;
}
.box-2:hover {
  box-shadow: px 10px 20 px px rgba(، ، ، 0.25)،
              px 20px 40px px rgba(، ,،0.15);
}

افزودن لایه سایه دوم در طول انیمیشن به اندازه دو لایه بودن از ابتدا کارایی ندارد، اما هنوز 100 میلی‌ثانیه نقاشی دارد در مقایسه با 133 میلی‌ثانیه با انیمیشن تکی box-shadow که یک بهبود.

در نهایت، این شما هستید که تصمیم می گیرید سایه شما چگونه به نظر برسد و از چه روشی برای ایجاد آن استفاده کنید.

متحرک سازی یک عنصر شبه

این بار، می‌خواهیم انیمیشن سایه را بدون تغییر ویژگی box-shadow تکرار کنیم. از نسخه‌های نمایشی قبلی، می‌توانیم ببینیم که هنوز نقاشی‌های زیادی در طول انیمیشن سایه در حال انجام است. اگر مقادیر box-shadow را تغییر می‌دهید، نمی‌توانید از این فرآیند اجتناب کنید.

در پایان این بخش خواهید دید که نقاشی تقریباً به طور کامل حذف خواهد شد. این شامل خطوط کد بیشتری می شود، اما ما به انیمیشن های سایه عملکرد بیشتری دست خواهیم یافت.

بنابراین، پس از استایل اولیه برای جعبه، یک عنصر شبه :after ایجاد کنید و به آن یک box-shadow بدهید که حالت نهایی سایه خواهد بود. بعد از انیمیشن:

.pseudo {
  موقعیت: نسبی;
  transition: box-shadow ease 0.5s, transform ease 0.5s;
  box-shadow: px 5px 10px px rgba(, , , 0.5)
}
.pseudo::after{
  content: "";
  position: absolute;
  border-radius: 20px;
  top: ;
  left: ;
  width: 100%;
  height: 100%;
  opacity: ;
  box-shadow: px 10px 20px 2px rgba(, , , 0.25);
  transition: opacity ease 0.5s;
}

Now, all you have to do is change the opacity of the pseudo element on :hover:

.pseudo:hover{
  transform: translateY(-10px);
}
.pseudo:hover::after{
  opacity: 1;
}

منبع: https://bamboblog.ir/8-روش-برتر-برای-افزایش-عملکرد-وب-سایت/

نوشته های مرتبط:

این نوشته را هم از دست ندهید : اینترنت پرسرعت وایرلس

نحوه متحرک سازی سایه های CSS Box و بهینه سازی عملکرد

چرا این مهم است

سه رویداد اصلی CSS Box Shadow Animation

بررسی عملکرد

چگونه عملکرد بهینه را حفظ کنیم

تحریک کردن کدورت

سایه های لایه بندی شده

متحرک سازی یک عنصر شبه

نوشته های مرتبط:

Related Articles

نکاتی که برای انتخاب وکیل باید در نظر بگیریم

افزایش اعتماد به نفس در دانش‌آموزان – راهکارها و نکات کاربردی

بهترین کتونی های آدیداس برای پیاده روی