სკრიპტი - როგორ კითხულობს ბრაუზერი კოდს
როდესაც ვებგვერდზე შევდივართ, ამ დროს ბრაუზერის მთავარი ამოცანაა წაიკითხოს და გაიგოს კოდი, რომელიც ბრჭყალებში რომ ვთქვათ ხატავს ამ გვერდს. კოდი იწერება HTML, CSS და JavaScript-ში და თითოეული ენა ემსახურება კონკრეტულ მიზანს ვებგვერდის ვიზუალური და ინტერაქტიული ელემენტების შესაქმნელად. როგორც აქამდე ბევრჯერ ვახსენე ეტაპსაც კომპლექსური პროცესები ახლავს თან. ბრაუზერი ამ პროცესს პირველად იწყებს ვებსაიტის ჰოსტ ანუ მასპინძელი სერვერიდან HTML დოკუმენტის მოთხოვნით. ის აგზავნის მოთხოვნას HTTP პროტოკოლის გამოყენებით და ელის პასუხს. პასუხის მიღების შემდეგ კი ბრაუზერი იწყებს HTML კოდის დამუშავებას. აქვე გაგახარებთ და გეტყვით რომ ესეც კომპლექსური პროცესია და მოდით ესეც გავშალოთ.
მომდევნო ეტაპს რასაც ბრაუზერი აკეთებს დოკუმენტის ობიექტის მოდელის აგება ჰქვია. ამ ეტაპზე ბრაუზერი აანალიზებს HTML კოდს, ყველა თეგს, ყველა ატრიბუტს, ყველა კლასს და მიმაგრებულ ბიბლიოთეკას თუ გარე ფაილს და აყალიბებს დოკუმენტის ობიექტის მოდელს იგივე (DOM)-ს. ამ ტერმინს ამ კურსის განმავლობაში ხშირად შეხვდებით. DOM არის HTML დოკუმენტის ხის მსგავსი წარმოდგენა, სადაც კოდის თითოეული ელემენტი ამ ხის ერთ-ერთი ტოტია. DOM ის აგებით ბრაუზერს აქვს საშუალება გაიგოს გვერდის ელემენტების სტრუქტურა და და მათ შორის რელაციური კავშირები. ეს არის ერთგვარი კონვერტაცია და გზა რითიც ბრაუზერი იგებს რა გიწერიათ და ცდილობს კოდი ვიზუალად გარდაქმნას.
DOM-ის აშენებისას ბრაუზერი HTML ის გაპარსვის შემდეგ, ის ასევე ხვდება CSS კოდსაც. ანუ მომდევნო ეტაპზე ბრაუზერი ჰოსტ სერვერისგან ითხოვს CSS ფაილს ან ფაილებს. აქვე ავღნიშნოთ რომ პარსი ფუნქციაა რეალურად და ამას წვერის გაპარსვასთან არანაირი კავშირი არ აქვს, პარსერი არის კოდის კითხვის პროცესი ბრაუზერისთვის. თემას რომ დავუბრუნდეთ ისევ, ბრაუზერი ამუშავებს CSS-ს HTML-თან ერთად, რათა განსაზღვროს თითოეული ელემენტის სტილი, განლაგება და კონტენტის ვიზუალური პრეზენტაცია. ამ პროცესს რენდერი ეწოდება და ამ სიტყვასაც ხშირად შეხვდებით როგორც ამ კურსში ასევე სამუშაო პროცესში. ბრაუზერი ითვლის თითოეული ელემენტის პოზიციას, ზომას და გარეგნობას CSS წესების საფუძველზე რომელიც კოდშია გაწერილი.
მომდევნო ეტაპზე HTML და CSS დამუშავების შემდეგ, ბრაუზერი გადადის JavaScript კოდზე. უკვე JavaScript უზრუნველყოფს ვებგვერდების ინტერაქტიულობას და დინამიურ ქცევას. ბრაუზერი ასევე პარსავს JavaScript კოდს, რომელსაც შეუძლია შეცვალოს DOM, გამოიყენოს ანიმაციები, აწარმოოს მომხმარებელთა ინტერაქცია ან მოიტანოს მონაცემები სერვერებიდან. ჯავასკრიპტი უკვე პროგრამირების ენაა როგორც იცით და მას შეძლია მანიპულაციები აკეთოს დომზე. ჩაამატოს, წაშალოს ან ჩაასწოროს დომში აგებული html ან CSS უკვე მომხმარებლის მხარეს სერვერთან ცვლილების მოთხოვნის გარეშე რაც პროცესს ბევრად უფრო ამარტივებს და აჩქარებს. ანუ უფრო მოკლედ რომ ვთქვათ სად ის რომ ველოდებით სერვერიდან პასუხი როდის მოვა და სად ის რომ დაჭერისთანავე ვხედავთ შედეგს ბრაუზერში. ამას აკეთებს ჯავასკრიპტი.
ბრაუზერები უსმენენ სხვადასხვა მოვლენებს რომელსაც JSში ივენთებს ვეძახით, ივენთები შეიძლება იყოს ნებისმიერი ინტერაქცია როგორიცაა მაუსზე დაწკაპუნება, აშვება, სხვადასხვა ღილაკზე დაჭერა ან გვერდის ჩატვირთვა. როდესაც ხდება მოვლენა, ბრაუზერი ამუშავებს ამ მოვლენასთან დაკავშირებულ შესაბამის JavaScript კოდს. ეს საშუალებას აძლევს ბრაუზერს მომხმარებლის ქცევის მიხედვით გადაწყვიტოს რა უნდა დაარენდეროს შემდეგი, მაგალითად ამაზონზე კალათას რომ დაააჭერთ და ჩამოიშლება კალათაში ჩაგდებული ელემენტები ეგ რეალურად ჯავასკრიპტის ფუნქციაა რომელიც მაუს ქლიქზე გამშლელ ფუნქციას უშვებს და ბრაუზერი შესაბამის შედეგს გირენდერებთ ვიზუალურად.
ბრაუზერები მართავენ ვებგვერდზე არსებულ სხვადასხვა რესურსებს, მათ შორის სურათებს, შრიფტებს, სტილის ფაილებს და სკრიპტებს. ისინი საჭიროებისამებრ იღებენ ამ რესურსებს სერვერიდან და აქეშირებენ მათ მომავალი გამოყენებისთვის ანუ ინახავენ საკუთარ მეხსიერებაში, ეს პროცესი აუმჯობესებს ჩატვირთვის პროცესებს მომდევნო ეტაპზე და ამცირებს ზედმეტი მოთხოვნების რაოდენობას სერვერთან და ბაზასთან.
თქვენთვის როგორც მომავალი ვებ დეველოპერებისთვის ძალიან მნიშვნელოვანია იცოდეთ, თუ როგორ კითხულობენ ბრაუზერები კოდს. ამ პროცესის შესახებ ინფორმაციის მიღებით, ჩვენ შეგვიძლია ჩვენი კოდის ოპტიმიზაცია და მუშაობის პროცესების გაუმჯობესება.