შევძელი?

3
დღეს სერიოზულად დავფიქრდი, თუ რა არის სინამდვილეში დეველოპერის პასუხისმგებლობა. მთავრდება კი ჩვენი საქმე იქ, სადაც კოდი უბრალოდ მუშაობს, შეცდომების გარეშე? თუ არსებობს უფრო ღრმა, უფრო მნიშვნელოვანი ფენა, რომელსაც ხშირად ყურადღებას არ ვაქცევთ?
დღეს აქტიური ვებსაიტების რაოდენობა დაახლოებით 200 მილიონია. (მსოფლიოში 1.1 მილიარდზე მეტი საიტია, მაგრამ უმეტესობა არააქტიური, ამიტომ ვიყოთ კონსერვატიულები).
თითო საიტზე "ზედმეტი" მონაცემი დიდ სხვაობას გვაძლევს, პირობითად ავიღოთ 16 კილობაიტი (KB). ეს შეიძლება იყოს ცუდად ოპტიმიზებული სურათი, არასაჭირო JavaScript ბიბლიოთეკა, ან თუნდაც ზედმეტი თრექინგ-სკრიპტი.
მოდი ვთქვათ, რომ ყველა საიტს დღეში 500 მომხმარებელზე მეტი არ ჰყავს (რეალურად ეს რიცხვი მინიმუმია).

აქტი 1. დავიწყოთ გამოთვლა:

მოდით, გამოვთვალოთ, რა რაოდენობის "ციფრულ ნაგავს" ვაგენერირებთ ყოველდღიურად:
200,000,000 საიტი × 500 მომხმარებელი × 16 KB = 1,600,000,000,000 KB
გამოგვივიდა 1.6 კვადრილიონი კილობაიტი. მოდით, ეს რიცხვი ადამიანურ ენაზე ვთარგმნოთ: 1.6 პეტაბაიტი (PB) დღეში ანუ 1,600,000 gigabytes (GB).
რომ წარმოიდგინოთ, 1 პეტაბაიტი არის:
1. 223,000 სრულმეტრაჟიანი ფილმი 4K ხარისხით.
2. 13.3 წლის განუწყვეტელი HD ვიდეო.
ეს ნიშნავს, რომ ყოველდღე, კაცობრიობა ქმნის და გადასცემს "ციფრული ნაგვის" ეკვივალენტს, რომელიც 223,000 ფილმს უტოლდება. წელიწადში ეს თითქმის 584 პეტაბაიტია.

აქტი 2: ენერგიის შავი ხვრელი

ახლა ყველაზე მთავარი – რა ღირს ამ უსარგებლო მონაცემთა ენერგია?
სხვადასხვა კვლევის მიხედვით, 1 გიგაბაიტი (GB) მონაცემის გადაცემა ინტერნეტით (მონაცემთა ცენტრიდან საბოლოო მომხმარებლამდე) საშუალოდ 0.06 კილოვატ-საათ (kWh) ენერგიას მოიხმარს.
გადავიყვანოთ ჩვენი დღიური ნაგავი გიგაბაიტებში:
1.6 პეტაბაიტი = 1,600,000 გიგაბაიტი (GB)
გამოვთვალოთ დღიური ენერგიის ხარჯი:
1,600,000 GB × 0.06 kWh/GB = 96,000 kWh დღეში.
გამოვთვალოთ წლიური ენერგიის ხარჯი:
96,000 kWh × 365 დღე = 35,040,000 kWh წელიწადში.
35 მილიონი კილოვატ-საათი წელიწადში. ეს რიცხვი თავისთავად არაფერს გვეუბნება, ამიტომ მოდით, მასშტაბი მივცეთ.

ფინალი: Mind Blow – რას უდრის ეს ყველაფერი?

ეს 35 მილიონი kWh წელიწადში არის ენერგია, რომელიც საკმარისია:
1. 3,247 საშუალო ამერიკული ოჯახის ელექტროენერგიით მოსამარაგებლად მთელი წლის განმავლობაში.
2. Tesla Model 3-ით დედამიწის გარშემო 4,400-ჯერ შემოსავლელად.
3. iPhone 15-ის 2.7 მილიარდჯერ სრულად დასატენად.
...და ეს მხოლოდ დასაწყისია.
ჩვენ ვითვლით მხოლოდ გადაცემის ენერგიას. ჩვენ არ გაგვითვალისწინებია:
1. სერვერების ენერგია: მილიონობით სერვერის პროცესორის დამატებითი დატვირთვა.
2. მომხმარებლის ენერგია: 200 მილიონ საიტზე შესული 500-500 მომხმარებლის მოწყობილობის (ტელეფონი, კომპიუტერი) პროცესორის დატვირთვა და ბატარეის ხარჯი.
3. ნახშირბადის ანაბეჭდი: ეს 35 მილიონი kWh, ენერგიის წყაროდან გამომდინარე (საშუალო გლობალური მაჩვენებლით), უდრის დაახლოებით 14,366 ტონა CO₂-ის ატმოსფეროში გაფრქვევას. ეს იგივეა, რაც 3,100 მანქანის წლიური გამონაბოლქვი.

საბოლოო ვერდიქტი

ყოველი დეველოპერი, რომელიც წერს ზედმეტ, არაოპტიმიზებულ კოდს, არის არა უბრალოდ არაპროფესიონალი, არამედ გლობალური "ციფრული დამაბინძურებელი".
ის 16 კილობაიტი არ არის უბრალოდ კოდი. ეს არის პატარა, მაგრამ კოლექტიური წვლილი პლანეტის რესურსების უაზრო ხარჯვაში. ეს არის მილიონობით ადამიანისთვის წართმეული ბატარეის წამები და ინტერნეტის სიჩქარის დაკარგული მეგაბიტები.
ეს არის უხილავი ფასი, რომელსაც ყველა ვიხდით.

ჩემი პირადი გამოცდილება:

მე ავიღე სტანდარტული JavaScript კოდი, რომელიც პასუხისმგებელია ვებგვერდის სანავიგაციო მენიუს ადაპტირებაზე სხვადასხვა ზომის ეკრანისთვის (Responsive) და დავფიქრდი — შესაძლებელია თუ არა იგივე ამოცანის შესრულება უფრო ჭკვიანურად, სწრაფად და ნაკლები რესურსით?
ეს არის კოდი, რომლითაც დავიწყე. ის მუშაობს, მაგრამ იყენებს ბევრ ცალკეულ ფუნქციასა და მსმენელს (event listener), რაც ქმნის დამატებით დატვირთვას.
const showMenu = (toggleId, navId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
toggle.addEventListener('click', () =>{
nav.classList.toggle('show-menu')
toggle.classList.toggle('show-icon')
})
}
showMenu('nav-toggle', 'nav-menu')
const dropdownItems = document.querySelectorAll('.dropdown__item')
dropdownItems.forEach((item) =>{
const dropdownButton = item.querySelector('.dropdown__button')
dropdownButton.addEventListener('click', () =>{
const showDropdown = document.querySelector('.show-dropdown')
toggleItem(item)
if(showDropdown && showDropdown!== item){
toggleItem(showDropdown)
}
})
})
const toggleItem = (item) =>{
const dropdownContainer = item.querySelector('.dropdown__container')
if(item.classList.contains('show-dropdown')){
dropdownContainer.removeAttribute('style')
item.classList.remove('show-dropdown')
} else{
dropdownContainer.style.height = dropdownContainer.scrollHeight + 'px'
item.classList.add('show-dropdown')
}
}
const mediaQuery = matchMedia('(min-width: 1118px)'),
dropdownContainer = document.querySelectorAll('.dropdown__container')
const removeStyle = () =>{
if(mediaQuery.matches){
dropdownContainer.forEach((e) =>{
e.removeAttribute('style')
})
dropdownItems.forEach((e) =>{
e.classList.remove('show-dropdown')
})
}
}
addEventListener('resize', removeStyle)

ოპტიმიზებული ვერსია (The "After")

აქ კი არის ჩემი ვერსია — რადიკალურად შემცირებული, მინიმალისტური და ელვისებურად სწრაფი. ლოგიკა იგივეა, მაგრამ შესრულების გზა ბევრად ეფექტური.
m=document.getElementById('navigation-menu');
T=i=>(c=i.querySelector('.dropdown__container'), c.style.height=i.classList.toggle('show-dropdown')?c.scrollHeight+'px':0);
document.onclick=e=>{g=e.target, t=g.closest('#navigation-toggle'), i=g.closest('.dropdown__item');t?(t.classList.toggle('show-icon'), m.classList.toggle('show-menu')):g.closest('.dropdown__button')&&i&&((o=m.querySelector('.show-dropdown'))&&o!=i&&T(o), T(i))};
matchMedia('(width>1117px)').onchange=e=>e.matches&&m.querySelectorAll('.show-dropdown').forEach(T);

დასკვნა: რატომ არის ეს მნიშვნელოვანი?

ეს არ არის უბრალოდ კოდის შემცირება. ეს არის ციფრული ეკოლოგია.
1. სისწრაფე: ნაკლები კოდი ნიშნავს ბრაუზერის მიერ ნაკლები სამუშაოს შესრულებას. ვებგვერდი უფრო სწრაფად იტვირთება...
2.რესურსების დაზოგვა: მცირდება პროცესორის დატვირთვა და მეხსიერების მოხმარება...
3. გლობალური გავლენა: წარმოიდგინეთ, რომ ამ კოდს მილიონი მომხმარებელი ნახულობს. ყოველი დაზოგილი ბაიტი და პროცესორის ციკლი, გამრავლებული მილიონებზე, რეალურ გავლენას ახდენს სერვერებისა და მომხმარებლების მოწყობილობების მიერ მოხმარებული ენერგიის რაოდენობაზე.
ასე რომ, დიახ, როდესაც ჩვენ ვწერთ ელეგანტურ და ეფექტურ კოდს, ჩვენ არა მხოლოდ პროფესიონალურ უნარებს ვაუმჯობესებთ, არამედ მცირე, მაგრამ მნიშვნელოვანი წვლილი შეგვაქვს უფრო მდგრადი ციფრული მომავლის შექმნაში.

დაფიქრდით ამაზე, როდესაც შემდეგ კოდს დაწერთ.ხოლო მათ, ვინც კოდს არ წერს, შეუძლიათ დაფიქრდნენ იმაზე, რომ ნებისმიერ სფეროში მცირე გაუმჯობესებას უდიდესი შედეგი მოაქვს, ხოლო უმნიშვნელო გაუარესებას — კოლოსალური დანაკარგი.

3