İnternet brauzeri necə işləyir? Veb səhifələrə baxmaq proqramlar - brauzerlər tərəfindən həyata keçirilir

Veb necə işləyir kompüterinizdə və ya telefonunuzda veb-brauzerdə veb-səhifəyə baxdığınız zaman baş verənlərin sadələşdirilmiş görünüşünü təqdim edir.

Bu nəzəriyyə qısa müddətdə veb kodu yazmaq üçün vacib deyil, lakin çox keçmədən arxa planda baş verənləri başa düşməkdən həqiqətən faydalanmağa başlayacaqsınız.

Müştərilər və serverlər

İnternetə qoşulan kompüterlərə müştərilər və serverlər deyilir. Onların qarşılıqlı əlaqəsinin sadələşdirilmiş diaqramı belə görünə bilər:

Müştərilər tipik veb istifadəçisinin internetə qoşulmuş cihazlarıdır (məsələn, Wi-Fi-a qoşulmuş kompüteriniz və ya mobil şəbəkənizə qoşulmuş telefonunuz) və həmin cihazlarda mövcud olan veb-giriş proqramı (adətən Firefox kimi veb-brauzer) və ya Chrome).
Serverlər veb səhifələri, saytları və ya proqramları saxlayan kompüterlərdir. Müştəri cihazı veb-səhifəyə daxil olmaq istədikdə, veb-səhifənin surəti istifadəçinin veb brauzerində göstərilmək üçün serverdən müştəri maşınına endirilir.

Alətlər qutusunun digər hissələri

Yuxarıda təsvir etdiyimiz müştəri və server bütün hekayəni izah etmir. İştirak edən bir çox başqa hissələr var və biz onları aşağıda təsvir edəcəyik.

Hələlik təsəvvür edək ki, internet bir yoldur.Yolun bir ucunda sizin evinizə bənzəyən müştəri var.Yolun digər ucunda isə server, hansısa bir şey almaq istədiyiniz mağazadır.

Müştəri və serverdən əlavə, biz də salam verməliyik:

İnternet bağlantınız: İnternetdə məlumat göndərmək və qəbul etmək imkanı verir. Bu, əsasən evinizlə dükan arasındakı küçəyə bənzəyir.
TCP/IP : Transmissiya İdarəetmə Protokolu və İnternet Protokolu məlumatların internetdə necə hərəkət etməsini təyin edən rabitə protokollarıdır. Bu, sifariş vermək, mağazaya getmək və mallarınızı almaq imkanı verən nəqliyyat mexanizmlərinə bənzəyir. Bizim nümunəmizdə bu, avtomobil və ya velosipedə bənzəyir (və ya başqa yerdə gəzə bilərsiniz).
DNS: Domen adı serverləri vebsaytlar üçün ünvan kitabçası kimidir. Brauzerinizdə veb ünvanı yazdığınız zaman brauzer vebsaytı əldə edə bilməmişdən əvvəl vebsaytın həqiqi ünvanını tapmaq üçün DNS-ə baxır. Brauzer vebsaytın hansı serverdə yaşadığını öyrənməlidir ki, HTTP mesajları göndərə bilsin. doğru yerə (aşağıya bax) Bu, mağazanın ünvanını axtarmağa bənzəyir ki, ona daxil olasınız.
HTTP: Hypertext Transfer Protocol, müştərilərin və serverlərin bir-biri ilə danışması üçün dili müəyyən edən proqram protokoludur. Bu, mallarınızı sifariş etmək üçün istifadə etdiyiniz dil kimidir.
Komponent faylları: Veb sayt mağazadan aldığınız malların müxtəlif hissələri kimi çoxlu müxtəlif fayllardan ibarətdir. Bu fayllar iki əsas növdə olur:
- Kod faylları: Veb saytlar əsasən HTML, CSS və JavaScript-dən qurulur, baxmayaraq ki, bir az sonra digər texnologiyalarla tanış olacaqsınız.
- Aktivlər : Bu, veb-saytı təşkil edən bütün digər əşyaların, məsələn, şəkillər, musiqi, video, Word sənədləri və PDF-lər üçün ümumi addır.

Bəs, tam olaraq nə baş verir?

Brauzerinizə veb ünvanı daxil etdiyiniz zaman (mağazaya getmək kimi bənzətməmiz üçün):

Brauzer DNS serverinə gedir və vebsaytın yaşadığı serverin həqiqi ünvanını tapır (mağazanın ünvanını tapa bilərsiniz).

Brauzer serverə HTTP sorğu mesajı göndərir və ondan veb saytın surətini müştəriyə göndərməsini xahiş edir (siz mağazaya gedib mallarınızı sifariş edirsiniz). Bu mesaj və müştəri ilə server arasında göndərilən bütün digər məlumatlar TCP/IP istifadə edərək internet bağlantınız vasitəsilə göndərilir.

Əgər server müştərinin sorğusunu təsdiq edərsə, server müştəriyə “200 OK” mesajı göndərir, yəni “Əlbəttə ki, həmin vebsayta baxa bilərsiniz! Budur" və sonra veb-saytın fayllarını məlumat paketləri adlanan bir sıra kiçik hissələr şəklində brauzerə göndərməyə başlayır (mağaza sizə mallarınızı verir və siz onları evinizə qaytarırsınız).

Brauzer kiçik parçaları tam vebsaytda toplayır və onu sizə göstərir (mallar qapınıza çatır - yeni parlaq şeylər, zəhmli!).

DNS izah etdi

Həqiqi veb ünvanlar sevimli veb-saytlarınızı tapmaq üçün ünvan çubuğunuza daxil etdiyiniz gözəl, yaddaqalan sətirlər deyil. Onlar bu kimi görünən xüsusi nömrələrdir: 63.245.215.20 .

Paketlər izah edildi

Əvvəllər verilənlərin serverdən müştəriyə göndərildiyi formatı təsvir etmək üçün “paketlər” terminindən istifadə edirdik. Burada nə demək istəyirik? Əsasən, məlumatlar internet üzərindən göndərildikdə, bir çox fərqli veb istifadəçisi eyni veb-saytı eyni vaxtda yükləyə bilməsi üçün minlərlə kiçik hissələr şəklində göndərilir. Veb saytlar tək böyük hissələr kimi göndərilsəydi, yalnız bir istifadəçi eyni anda birini yükləyə bilərdi ki, bu da açıq şəkildə interneti çox səmərəsiz edər və istifadəsi çox da əyləncəli olmazdı.

Veb səhifələr HTML (Hyper Text Markup Language) adlı proqramlaşdırma dili ilə yaradılır. Belə səhifələrə baxmaq üçün xüsusi proqramlardan - brauzerlərdən istifadə olunur. Ən populyar brauzerlər Microsoft Internet Explorer, Fire Fox, Opera, Google Chrome-dur. Brauzerlər veb-səhifədə yerləşdirilən hər hansı məlumatı (mətn, şəkil, animasiya, video) yalnız ekranda təkrar istehsal edə bilməz, həm də səsi dinamiklərə və ya qulaqlıqlara göndərə bilər. Brauzerdən necə istifadə edəcəyinizi öyrəndikdən sonra sizə lazım olan məlumatları İnternetdə tapa biləcəksiniz. İnternetdə effektiv işləmək üçün brauzer seçimi vacibdir. Brauzer seçərkən diqqət etməli olduğunuz əsas xüsusiyyətlər: təhlükəsizlik, funksionallıq, sürət.

Brauzer əvvəllər sorğu göndərdiyiniz xüsusi saytda veb səhifəni axtarır və onu ekranda göstərir. Deyə bilərik ki, veb-sayt kitab kimidir, burada bütün səhifələr tematik olaraq təşkil edilir və bir yerdə saxlanılır. Hər bir veb saytın ana səhifə adlanan əsas səhifəsi var. Onu jurnalın üz qabığı və ya qəzetin birinci səhifəsi ilə müqayisə etmək olar. Tipik olaraq, belə bir səhifə saytın ideyasını təcəssüm etdirən orijinal, xüsusi hazırlanmış dizayna malikdir. Məhz burada xəritə və ya naviqasiya panelindən istifadə edərək saytın məzmunu ilə tanış ola bilərsiniz. Bu elementlərin məqsədi ziyarətçinin saytdakı digər veb səhifələrə daxil olmasına kömək etməkdir. Brauzerinizdə bir veb-səhifədən digərinə keçmək çox asandır. Bu proses tez-tez veb-sörfinq adlanır. Brauzeri ilk dəfə işə saldıqda, onun pəncərəsində kompüter parametrlərində (daha doğrusu, brauzerin xüsusiyyətlərində) ev kimi təyin edilmiş veb səhifə görünür. Bu halda, “ev” termini avtomatik olaraq açılmaq üçün nəzərdə tutulmuş veb səhifədir.

Brauzer imkanları. Nümunə olaraq Internet Explorer-dən istifadə edən brauzerlərin əsas xüsusiyyətlərinə baxaq:

Həm mətn məlumatını göstərir, həm də video, animasiya və səsi oynayır.

Əvvəllər ziyarət edilmiş qovşaqların siyahısının avtomatik yaradılması.

Əvvəllər baxılmış veb səhifələrə keçin (“Geri” və “İrəli” düymələrindən istifadə etməklə).

Açar söz və ya sözlərdən istifadə edərək veb saytları axtarın.

Qısayolları sistemin Sevimlilər qovluğunda saxlamaqla sevimli veb səhifələrinizlə işləyin.

Internet Explorer fayl meneceri kimi çıxış edir (Windows-da Explorer-ə bənzəyir).

Internet Explorer brauzeri iki əsas rejimdə işləyir: onlayn və oflayn. Oflayn rejimdə (məsələn, İnternet bağlantısı olmadan) siz qovluqlar və fayllarla əməliyyatlar həyata keçirə, həmçinin sabit diskinizdə saxlanan veb səhifələrə baxa bilərsiniz.

Brauzer pəncərəsi. Qeyd edək ki, bütün brauzerlərin pəncərələrində oxşar elementlər var, lakin onlar bir qədər fərqli görünə və yerləşə bilər.
Nümunə olaraq Internet Explorer brauzerinə baxaq:

Internet Explorer menyusu aşağıdakı elementlərdən ibarətdir: Fayl, Redaktə, Görünüş, Sevimlilər, Alətlər, Yardım.

Ümumi Düymələr panelinə aşağıdakı alətlər daxildir:

Geri - əvvəllər baxılmış veb sənədi göstərmək;

İrəli - növbəti səhifəni göstərin;

Stop - veb səhifənin yüklənməsini dayandırmaq;

Əsas səhifə - ana səhifəyə qayıt;

Axtarış - axtarış çubuğunu aktivləşdirin;

Sevimlilər - "sevimlilərə" əlavə edilmiş resursların siyahısını göstərir;

Log - əvvəllər baxılmış qovşaqların siyahısını göstərir;

Mail - e-poçt tətbiqi pəncərəsini açır;

Çap - cari veb səhifəni çap edin.

"Daimi Düymələr" panelinin altında ünvanı daxil etmək üçün sahə və əvvəllər ziyarət edilmiş İnternet resursları ilə açılan siyahı olan "Ünvan" paneli var. Ünvan sətrində siz ziyarət edəcəyiniz yeni resursu və ya brauzer vasitəsilə baxmaq istədiyiniz diskdəki faylın adını daxil edə bilərsiniz.

Brauzer pəncərəsinin əsas (böyük) hissəsini İnternet Explorer-dən istifadə etməklə açılmış cari veb səhifəni və ya sənədi əks etdirən sənəd zonası tutur.

Internet Explorer pəncərəsinin aşağı hissəsində proqram tərəfindən yerinə yetirilən cari əməliyyatlar (məsələn, əlaqə yaratmaq, səhifə yükləmək və s.) haqqında məlumatların yer aldığı status paneli var.

Brauzeriniz bu məqalədəki funksiyaları dəstəkləməyə bilər.

ForEach.call(document.querySelectorAll("başlıq .tarix a"), funksiya(elem, i) ( elem.textContent += " (" + ["müəllif","redaktor"][i] + ")"; ) );

Ön söz

WebKit və Gecko-nun daxili işlərinə dair bu müfəssəl bələdçi israilli veb proqramçı Tali Qarsiel tərəfindən aparılan geniş tədqiqatın nəticəsidir. Brauzerlərin necə işlədiyinə dair bütün dərc edilmiş məlumatları izləmək üçün bir neçə il sərf etdi (bölməyə baxın) və onların mənbə kodunu təhlil etməyə çox vaxt sərf etdi. Tali özü yazır:

Kompüterlərin 90%-də IE quraşdırıldıqda, biz bunun sirli bir qara qutu olduğunu qəbul etməli olduq, lakin indi istifadəçilərin yarıdan çoxu açıq mənbəli brauzerləri seçdiyinə görə, onların içində, milyonlarla sətirdə nəyin gizləndiyini anlamağın vaxtı gəldi. proqram kodu C++... Tali tədqiqatın nəticələrini öz saytında dərc etdi, lakin biz onların daha geniş auditoriyanın diqqətinə layiq olduğuna inanırıq, ona görə də bəzi ixtisarlarla onları burada yerləşdiririk.

Brauzerlərin daxili işləri ilə tanış olan veb tərtibatçısı daha yaxşı qərarlar qəbul edir və müəyyən alətlərin niyə seçilməli olduğunu başa düşür. Bu kifayət qədər uzun sənəddir, lakin biz onu mümkün qədər diqqətlə oxumağı tövsiyə edirik və peşman olmayacağınıza zəmanət veririk. Paul Irish, Chrome Developer Əlaqələri

Giriş

Veb brauzerlər bəlkə də ən çox yayılmış proqramlardır. Bu təlimatda onların necə işlədiyini izah edirəm. Siz ünvan çubuğuna google.ru yazdığınız andan Google səhifəsi ekranınızda görünənə qədər nə baş verdiyini daha yaxından nəzərdən keçirəcəyik.

Hansı brauzerləri nəzərdən keçirəcəyik?

Bu gün beş əsas brauzer var: Internet Explorer, Firefox, Safari, Chrome və Opera. Nümunələr açıq mənbə brauzerlərindən istifadə edir: Firefox, Chrome və Safari (qismən açıq mənbə). StatCounter saytında brauzerdən istifadə statistikasına əsasən, 2011-ci ilin avqust ayına olan məlumata görə, Firefox, Safari və Chrome brauzerləri ümumilikdə cihazların 60%-də quraşdırılıb. Beləliklə, açıq mənbəli brauzerlər bu gün çox güclü mövqeyə malikdirlər.

Əsas brauzer funksiyaları

Brauzerin əsas məqsədi veb resurslarını göstərməkdir. Bunun üçün serverə sorğu göndərilir və nəticə brauzer pəncərəsində göstərilir. Resurslar ümumiyyətlə HTML sənədlərinə istinad edir, lakin onlar PDF faylı, şəkil və ya digər məzmun da ola bilər. Resursun yeri URI (Vahid Resurs İdentifikatoru) ilə müəyyən edilir.

Brauzerin HTML fayllarını emal etmə və göstərmə üsulu HTML və CSS spesifikasiyaları ilə müəyyən edilir. Onlar Konsorsium tərəfindən hazırlanır W3Cİnternet üçün standartları həyata keçirən .
Uzun illər ərzində brauzerlər spesifikasiyaların yalnız bir hissəsinə cavab verdi və onlar üçün ayrıca genişlənmələr yaradıldı. Veb tərtibatçıları üçün bu, ciddi uyğunluq problemləri demək idi. Bu gün əksər brauzerlər az və ya çox dərəcədə bütün spesifikasiyalara cavab verir.

Müxtəlif brauzerlərin istifadəçi interfeysləri çoxlu ortaq cəhətlərə malikdir. Brauzer interfeysinin əsas elementləri aşağıda verilmişdir.

URI daxil etmək üçün ünvan çubuğu
Geri və İrəli naviqasiya düymələri
Əlfəcinlər
Səhifə yükləmə düymələrini təzələyin və dayandırın
Əsas səhifəyə keçmək üçün əsas səhifə düyməsi

Qəribədir ki, brauzerin istifadəçi interfeysi standartlarını müəyyən edən heç bir spesifikasiya yoxdur. Müasir interfeyslər çoxillik təkamülün nəticəsidir, eləcə də tərtibatçıların bir-birini qismən kopyalaması faktıdır. HTML5 spesifikasiyası brauzer interfeysinin nəyi ehtiva etməsini müəyyən etmir, lakin bəzi əsas elementləri sadalayır. Bunlara ünvan paneli, status paneli və alətlər paneli daxildir. Əlbəttə ki, Firefox-da yükləmə meneceri kimi xüsusi xüsusiyyətlər də var.

Üst səviyyəli quruluş

Brauzerin əsas komponentləri () aşağıda verilmişdir.

İstifadəçi interfeysi - ünvan çubuğu, geri və irəli düymələr, əlfəcin menyusu və s. daxildir. Buraya tələb olunan səhifənin göstərildiyi pəncərədən başqa hər şey daxildir.

Brauzer Mühərriki – interfeys və displey modulu arasında qarşılıqlı əlaqəni idarə edir.

Ekran modulu – tələb olunan məzmunun ekranda göstərilməsinə cavabdehdir. Məsələn, HTML sənədi tələb olunarsa, renderer HTML və CSS kodunu təhlil edir və nəticəni ekranda göstərir.

Şəbəkə komponentləri - HTTP sorğuları kimi şəbəkə zəngləri etmək üçün nəzərdə tutulmuşdur. Onların interfeysi platforma tipindən asılı deyil, hər birinin öz tətbiqi var.

İstifadəçi interfeysinin ön hissəsi pəncərələr və birləşdirilmiş qutular kimi əsas vidjetləri göstərmək üçün istifadə olunur. Onun universal interfeysi platforma tipindən də müstəqildir. İcra hissəsi həmişə müəyyən bir əməliyyat sisteminin istifadəçi interfeysi üsullarını tətbiq edir.

JavaScript Tərcüməçisi – JavaScript kodunu təhlil etmək və icra etmək üçün istifadə olunur.

Məlumatların saxlanması - prosesin davamlılığı üçün lazımdır. Brauzer sizin sərt diskinizdə kukilər kimi müxtəlif növ məlumatları saxlayır. Yeni HTML spesifikasiyası (HTML5) "veb verilənlər bazası" terminini tam hüquqlu (yüngül də olsa) brauzer əsaslı verilənlər bazası kimi müəyyən edir.

Rəsm. Əsas brauzer komponentləri.

Qeyd etmək lazımdır ki, Chrome, əksər brauzerlərdən fərqli olaraq, hər bir tabda bir olmaqla, ayrı-ayrı proseslər olan rendererin çoxsaylı nümunələrindən istifadə edir.

Ekran modulu

Adından təxmin edə bildiyiniz kimi, displey modulu tələb olunan məzmunun brauzer ekranında göstərilməsinə cavabdehdir.

Varsayılan olaraq, o, HTML və XML sənədlərini, eləcə də şəkilləri göstərməyə qadirdir. Xüsusi plaginlər (brauzer uzantıları) PDF faylları kimi digər məzmunu göstərməyə imkan verir. Bununla belə, bu fəsil əsas funksionallığa diqqət yetirir: HTML sənədlərinin və CSS üslubları ilə formatlanmış şəkillərin göstərilməsi.

Ekran modulları

Bizi maraqlandıran brauzerlər (Firefox, Chrome və Safari) iki displey modulundan istifadə edir. Firefox Mozilla-nın öz Gecko-dan istifadə edir, Safari və Chrome isə WebKit-dən istifadə edir.

WebKit, əvvəlcə Linux platforması üçün hazırlanmış və Apple tərəfindən Mac OS və Windows üçün uyğunlaşdırılmış açıq mənbə renderdir. Əlavə məlumat üçün webkit.org saytına daxil olun.

Əsas iş sxemi

Ekran modulu tələb olunan sənədin məzmununu adətən 8 KB-lıq hissələrdə şəbəkə səviyyəsi protokolu vasitəsilə qəbul edir.

Ekran modulunun sonrakı işləmə diaqramı aşağıdakı kimi görünür.

Rəsm. Ekran modulunun iş sxemi.

Renderer HTML sənədini təhlil edir və teqləri məzmun ağacındakı qovşaqlara çevirir. Stil məlumatı həm xarici CSS fayllarından, həm də stil elementlərindən alınır. HTML faylındakı bu məlumat və ekran təlimatları başqa bir ağac yaratmaq üçün istifadə olunur - .

Rəng və ölçü kimi vizual atributları olan düzbucaqlıları ehtiva edir. Düzbucaqlılar ekranda göstərilməli olduğu ardıcıllıqla düzülür.

Ekran ağacını yaratdıqdan sonra elementlər başlayır, bu müddət ərzində hər bir node ekranda görünməli olduğu nöqtənin koordinatları təyin olunur. Sonra istifadəçi interfeysinin icra hissəsindən istifadə edərək ekran ağacının qovşaqlarının ardıcıl olaraq çəkildiyi yerinə yetirilir.

Bunun ardıcıl bir proses olduğunu başa düşmək vacibdir. İstifadəçinin rahatlığı üçün renderer məzmunu mümkün qədər tez ekrana çatdırmağa çalışır, beləliklə, HTML kodunun təhlili tamamlanmazdan əvvəl ekran ağacının yaradılması və tərtibatı başlaya bilər. Sənədin bəzi hissələri təhlil edilir və ekranda göstərilir, digərləri isə yalnız şəbəkə üzərindən ötürülür.

İş nümunələri Şəkil. WebKit displey modulunun iş sxemi. Rəsm. Mozilla Gecko displey modulunun iş sxemi ().

Şəkil 3 və 4-dən göründüyü kimi, WebKit və Gecko fərqli terminologiyadan istifadə edir, lakin onların işləmə sxemləri demək olar ki, eynidir.

Gecko-da vizual formatlaşdırılmış elementlərdən ibarət ağac hər bir elementin çərçivə olduğu çərçivə ağacı adlanır. WebKit render obyektlərindən ibarət render ağacından istifadə edir. WebKit-də elementlərin yerləşdirilməsi layout və ya layout, Gecko-da isə reflow adlanır. Ekran ağacı yaratmaq üçün DOM qovşaqlarını və vizual atributlarını birləşdirməyə WebKit-də əlavə deyilir. Gecko-da semantika ilə heç bir əlaqəsi olmayan kiçik bir fərq, HTML faylı ilə DOM ağacı arasında başqa bir təbəqənin olmasıdır. O, məzmun sink adlanır və DOM elementlərini yaratmaq üçün istifadə olunur. İndi işin hər bir mərhələsi haqqında daha ətraflı danışaq.

Təhlil: Ümumi məlumat

Təhlil displey modulunun işində mühüm mərhələ olduğundan ona daha ətraflı baxaq. Qısa bir girişlə başlayaq.

Sənədin təhlili onu oxuna bilən və icra edilə bilən struktura çevirmək deməkdir. Təhlilin nəticəsi adətən sənədin strukturunu təmsil edən qovşaqlar ağacıdır. Buna təhlil ağacı və ya sadəcə sintaksis ağacı deyilir.

Məsələn, 2 + 3 – 1 ifadəsini təhlil etmək belə bir ağacla nəticələnə bilər:

Rəsm. Riyazi ifadə üçün ağac qovşağı. Qrammatika

Sənədin dili (formatı) ilə müəyyən edilən müəyyən qaydalar əsasında işlərin təhlili. Hər bir formatın lüğət və sintaksisdən ibarət qrammatik qaydaları var. Onlar sözdə əmələ gətirirlər. . Təbii dillər kontekstsiz qrammatika qaydalarına tabe olmur, buna görə də standart təhlil üsulları onlar üçün uyğun deyil.

Parser və leksik analizatorlar

Leksik təhlil sintaktik təhlillə birlikdə istifadə olunur.

Leksik təhlil məlumatın işarələrə və ya leksemə bölünməsidir. Tokenlər müəyyən bir dilin lüğətini təşkil edir və sənədlərin yaradılması üçün konstruktiv elementlərdir. Təbii dildə tokenlər lüğətlərdə tapıla bilən bütün sözlər olardı.

Təhlildə məqsəd dilin sintaktik qaydalarını tətbiq etməkdir.

Sənədin təhlili adətən iki komponent tərəfindən həyata keçirilir: simvolların daxil edilməsi ardıcıllığını etibarlı tokenlərə ayıran leksik analizator və verilmiş dilin sintaktik qaydalarına uyğun olaraq sənədin strukturunu təhlil edən və sintaksis ağacını yaradan parser. Analizator boşluqlar və sətir fasilələri kimi qeyri-informativ simvollara məhəl qoymur.

Rəsm. Mənbə sənəddən sintaksis ağacına keçid.

Təhlil təkrarlanan prosesdir. Təhlilçi adətən lekserdən yeni işarə tələb edir və onun sintaksis qaydalarına uyğun olub olmadığını yoxlayır. Uyğunluq yaranarsa, token üçün sintaksis ağacında yeni bir qovşaq yaradılır və təhlilçi növbəti işarəni tələb edir.

Token heç bir qaydaya uyğun gəlmirsə, təhlilçi onu kənara qoyur və növbəti tokenləri soruşur. Bu, bütün təxirə salınmış tokenlərə uyğun gələn qayda tapılana qədər davam edir. Belə bir qayda tapılmasa, analizator bir istisna atır. Bu o deməkdir ki, sənəddə sintaksis səhvləri var və onu tam emal etmək mümkün deyil.

Tərcümə

Sintaksis ağacı həmişə son nəticə deyil. Giriş sənədinin istənilən formata tərcüməsi prosesində tez-tez təhlildən istifadə olunur. Bir nümunə kompilyasiya ola bilər. Mənbə kodunu maşın koduna çevirən kompilyator əvvəlcə onu təhlil edərək sintaksis ağacını təşkil edir və yalnız bundan sonra bu ağac əsasında maşın kodu ilə sənəd yaradır.

Rəsm. Kompilyasiya mərhələləri. Təhlil nümunəsi

Şəkil 5-də riyazi ifadəyə əsaslanan sintaksis ağacı göstərilir. Elementar riyazi dili müəyyən edək və təhlil prosesini nəzərdən keçirək.

Lüğət: Dilimizdə tam ədədlər, müsbət və mənfi işarələr ola bilər.

Sintaksis

Dilin tikinti blokları ifadələr, operandlar və operatorlardır.

Dildə istənilən sayda ifadə ola bilər.

İfadə operand, operator və digər operanddan ibarət ardıcıllıqdır.

Operator artı və ya mənfi işarədir.

Operand tam ədəd və ya ifadədir.

2 + 3 – 1 simvollarının daxil edilməsi ardıcıllığını nəzərdən keçirin.
Qaydaya uyğun gələn ilk element 2-dir (5-ci qaydaya görə, bu operanddır). İkinci belə element 2 + 3-dür (operand, operator və digər operanddan ibarət ardıcıllıq 3 nömrəli qayda ilə müəyyən edilir). Növbəti uyğunluğu ən sonunda tapacağıq: 2 + 3 – 1 ardıcıllığı bir ifadədir. 2+3 operand olduğundan, ifadənin tərifinə uyğun gələn operand, operator və başqa bir operanddan ibarət ardıcıllıq alırıq. Sətir 2 ++ qaydalara uyğun gəlmir və buna görə də etibarsız sayılacaq.

Lüğət və sintaksisin formal tərifi

Yuxarıdakı nümunədəki dil belə müəyyən edilə bilər:

INTEGER:0|* PLUS: + MINUS: - Gördüyünüz kimi, tam ədədlər müntəzəm ifadə ilə müəyyən edilir.

Sintaksis adətən BNF formatında təsvir edilir. Yuxarıdakı nümunədəki dil aşağıdakı kimi təsvir edilə bilər:

İfadə:= müddətli əməliyyat müddəti əməliyyat:= PLUS | MINUS müddəti:= BÜTÜN | ifadə

Artıq qeyd edildiyi kimi, dil qrammatikası varsa, standart parserlərdən istifadə etməklə işlənə bilər kontekstsiz, yəni BNF formatında tam ifadə oluna bilər. Kontekstsiz qrammatikanın rəsmi tərifini bu Vikipediya məqaləsində tapmaq olar.

Təhlilçilərin növləri

İki növ təhlilçi var: yuxarıdan aşağıya və aşağıdan yuxarı. Birincilər yuxarıdan aşağıya, ikincilər isə aşağıdan yuxarıya analiz aparır. Yuxarıdan aşağı təhlilçilər yuxarı səviyyəli strukturu təhlil edir və sintaktik qaydaları axtarır. Aşağıdan yuxarı təhlilçilər əvvəlcə simvolların daxil edilməsi ardıcıllığını emal edir və orada aşağı səviyyəli qaydalardan başlayaraq yüksək səviyyəli qaydalara qədər tədricən sintaktik qaydaları müəyyən edirlər.

İndi gəlin görək bu iki növ analizator bizim nümunəmizi necə idarə edəcək.

Yuxarıdan aşağı təhlilçi yuxarı səviyyəli qayda ilə başlayacaq və 2 + 3-ün ifadə olduğunu müəyyən edəcək. Daha sonra 2 + 3 – 1-in də bir ifadə olduğunu müəyyən edəcək (ifadələr təyin olunduqca, digər qaydalara uyğunluqlar da müəyyən edilir, lakin həmişə birinci səviyyəli qayda nəzərə alınır).

Aşağıdan yuxarı təhlilçi, aşkar edilmiş fraqmenti əvəz edə biləcək uyğun qayda tapana qədər simvollar ardıcıllığını emal edərdi və s. ardıcıllığın sonuna qədər. Qismən uyğunluğu olan ifadələr daha sonra analizator yığınına yerləşdirilir.

Belə analizator işləyərkən simvolların daxil edilməsi ardıcıllığı sağa sürüşdürülür (təsəvvür edin ki, kursor ardıcıllığın əvvəlində yerləşdirilir və təhlil zamanı sağa sürüşdürülür) və tədricən sintaktik qaydalara endirilir. Parserlərin avtomatik yaradılması

Generatorlar adlanan parserlərin yaradılması üçün xüsusi proqramlar var. Generatora dilin qrammatikasını (leksika və sintaksis qaydaları) yükləmək kifayətdir və o, avtomatik olaraq analizator yaradacaq. Təhlilçi yaratmaq onun necə işlədiyini dərindən başa düşməyi tələb edir və bunu əl ilə etmək o qədər də asan deyil, ona görə də generatorlar çox faydalı ola bilər.

DOM

Yaranan sintaksis ağacı DOM elementlərindən və atribut qovşaqlarından ibarətdir. DOM - Sənəd Obyekt Modeli - HTML sənədini və HTML elementlərinin JavaScript kodu kimi xarici obyektlərə interfeysini təmsil etməyə xidmət edir.
Ağacın kökündə Sənəd obyekti yerləşir.

DOM işarələmə ilə demək olar ki, eynidir. İşarələmə nümunəsinə baxaq:

Salam Dünya

Bu işarələmə üçün DOM ağacı belə görünür: Şəkil. Nümunədən işarələmə üçün DOM ağacı.

“Ağacda DOM qovşaqları var” dedikdə, ağacın DOM interfeyslərindən birini həyata keçirən elementlərdən ibarət olduğunu nəzərdə tuturuq. Brauzerlər daxili istifadə üçün əlavə atributları olan xüsusi tətbiqlərdən istifadə edirlər.

Təhlil alqoritmi

Əvvəlki bölmələrdə müzakirə edildiyi kimi, HTML kodunu təhlil etmək standart yuxarıdan-aşağıya və ya aşağıdan yuxarı analizatorlardan istifadə etməklə həyata keçirilə bilməz.

Bunun səbəbləri aşağıda verilmişdir.

Dil "zərif" xarakterə malikdir.

Brauzerlərdə HTML kodundakı bəzi ümumi səhvləri idarə etmək üçün daxili mexanizmlər var.

Təhlil dövrü yenidən daxil olma imkanı ilə xarakterizə olunur. Mənbə sənəd adətən təhlil prosesi zamanı dəyişmir, lakin HTML halda, document.write ehtiva edən skript teqləri yeni işarələr əlavə edə bilər, buna görə də mənbə kodu dəyişə bilər.

Standart analizatorlar HTML üçün uyğun olmadığı üçün brauzerlər öz analizatorlarını yaradırlar.

Təhlil alqoritmi HTML5 spesifikasiyasında ətraflı təsvir edilmişdir. O, iki mərhələdən ibarətdir: leksik təhlil və ağac qurma.

Leksik təhlil zamanı simvolların daxil edilməsi ardıcıllığı tokenlərə bölünür. HTML tokenlərinə açılış və bağlanma teqləri, həmçinin atribut adları və dəyərlər daxildir.

Leksik analizator işarəni aşkar edir, onu ağac konstruktoruna ötürür və daxiletmə ardıcıllığının sonuna qədər əlavə işarələr axtaran növbəti simvola keçir.

Rəsm. HTML kodunu təhlil etmək üçün addımlar (mənbə: HTML5 spesifikasiyası). Leksik analiz alqoritmi

Alqoritmin nəticəsi HTML işarəsidir. Alqoritm sonlu sayda vəziyyətə malik avtomat kimi ifadə edilir. Hər bir vəziyyətdə giriş ardıcıllığının bir və ya bir neçə simvolu işlənir, bunun əsasında növbəti vəziyyət müəyyən edilir. Bu, leksik təhlil mərhələsindən və ağac əmələ gəlmə mərhələsindən asılıdır, yəni eyni xarakterin işlənməsi mövcud vəziyyətdən asılı olaraq müxtəlif nəticələrə (müxtəlif vəziyyətlərə) səbəb ola bilər. Alqoritm burada ətraflı təsvir etmək üçün kifayət qədər mürəkkəbdir, ona görə də onun necə işlədiyini daha yaxşı başa düşmək üçün sadələşdirilmiş nümunəyə baxaq.

Sadə HTML kodunun leksik təhlilini aparaq:

Salam dünya

İlkin vəziyyət "məlumat"dır. Parser bir simvol aşkar etdikdə< , состояние меняется на "открытый тег" . Если далее обнаруживается буква (a–z), создается токен открывающего тега, а состояние меняется на "название тега" . Оно сохраняется, пока не будет обнаружен символ >. Simvollar yeni tokenin adına bir-bir əlavə edilir. Bizim vəziyyətimizdə nəticə html işarəsidir.

> simvolu ilə qarşılaşdıqda, token hazır sayılır və analizator “məlumat” vəziyyətinə qayıdır. Etiket tamamilə eyni şəkildə işlənir. Beləliklə, analizator artıq html və bədən teqlərini yaratmış və "məlumat" vəziyyətinə qayıtmışdır. Salam dünya ifadəsində H hərfinin aşkarlanması simvol işarəsinin yaranması ilə nəticələnir. Analizator simvola çatana qədər qalan hərflərlə də eyni şey olur< в теге . Для каждого символа фразы Hello world создается свой токен.

Sonra analizator "açıq etiket" vəziyyətinə qayıdır. / simvolunun aşkarlanması bağlanma teq işarəsinin yaradılması və "teq adı" vəziyyətinə keçidlə nəticələnir. > simvolu ilə qarşılaşana qədər davam edir. Bu zaman yeni teq tokeni yaradılır və analizator “məlumat” vəziyyətinə qayıdır. Simvol ardıcıllığı yuxarıda göstərildiyi kimi işlənir.

Rəsm. Simvolların daxil edilməsi ardıcıllığının leksik təhlili. Ağac tikmə alqoritmi

Parser yaradıldıqda, Sənəd obyekti yaradılır. Tikinti mərhələsində bu obyektin kökündə yerləşdiyi DOM ağacı dəyişdirilir və ona yeni elementlər əlavə edilir. Leksik analizator tərəfindən yaradılan hər bir qovşaq ağac konstruktoru tərəfindən işlənir. Hər bir token spesifikasiya ilə müəyyən edilmiş öz DOM elementinə malikdir. Elementlər yalnız DOM ağacına deyil, həm də yanlış daxil edilmiş və ya bağlanmamış teqləri düzəltməyə xidmət edən ictimai element yığınına əlavə olunur. Alqoritm həm də daxiletmə rejimləri adlanan sonlu sayda vəziyyətə malik avtomat kimi ifadə edilir.

Aşağıdakı kod parçası üçün ağac yaratmaq addımlarına nəzər salaq:

Salam dünya

Ağacın qurulması mərhələsinin başlanğıcında leksik təhlil nəticəsində əldə edilmiş işarələrin ardıcıllığı var. Birinci vəziyyət başlanğıc adlanır. Html işarəsi qəbul edildikdə, vəziyyət "html-dən əvvəl" olaraq dəyişir, bundan sonra token bu vəziyyətdə yenidən işlənir. Bu, HTMLHtmlElement yaradır və onu kök Sənəd obyektinə əlavə edir.

Dövlət "başdan əvvəl" olaraq dəyişir. Analizator bədən işarəsini aşkar edir. Kodumuzda baş etiketi olmasa da, HTMLHeadElement avtomatik olaraq yaradılacaq və ağaca əlavə olunacaq.

Vəziyyət "başın içərisinə" , sonra "başdan sonra" dəyişir. Bədən işarəsi yenidən işlənir, HTMLBodyElement yaradılır, ağaca əlavə edilir və vəziyyət "bədən daxilində" olaraq dəyişdirilir.

İndi Hello world simli nişanlarının növbəsidir. Bunlardan birincisinin tapılması, qalan simvolların əlavə olunduğu Mətn qovşağının yaradılmasına və daxil edilməsinə gətirib çıxarır.

Bağlanan bədən işarəsi qəbul edildikdə, vəziyyət "bədəndən sonra" olaraq dəyişir. Parser bağlanan html teqinə çatdıqda vəziyyət "bədəndən sonra" olaraq dəyişir. Faylın sonu nişanı alındıqda təhlil başa çatır.

Rəsm. Nümunədən HTML kodu üçün ağacın qurulması. Təhlildən sonra hərəkətlər

Bu nöqtədə, brauzer sənədi interaktiv olaraq qeyd edir və sənədin təhlili tamamlandıqdan sonra icra edilməli olan təxirə salınmış skriptləri təhlil etməyə başlayır. Sonra sənədin vəziyyəti "hazır" vəziyyətinə dəyişdirilir və yükləmə hadisəsi qaldırılır.

Gəlin bir neçə nümunəyə baxaq.
Leksik qrammatika (lüğət) hər bir işarə üçün müntəzəm ifadələrlə müəyyən edilir:

Şərh \/\*[^*]*\*+([^/*][^*]*\*+)*\/ num +|*"."+ nonascii [\200-\377] nmstart [_a -z]|(nonascii)|(escape) nmchar [_a-z0-9-]|(nonascii)|(qaçma) adı (nmchar)+ identifikator (nmstart)(nmchar)*

Ident sinifin adı kimi istifadə olunan identifikatordur. Ad id elementidir və hash simvolu (#) ilə istinad edilir.

Sintaksis qaydaları BNF formatında təsvir edilmişdir.

Qaydalar dəsti: seçici [ "," S* seçici ]* "(" S* bəyanı [ ";" S* bəyanı ]* ")" S* ; seçici: simple_selector [kombinator seçici | S+ [kombinator? seçici ]? ]? ; sadə_seçici: element_adı [HASH | sinif | attrib | psevdo ]* | [HASH | sinif | attrib | psevdo ]+ ; sinif: "." IDENT; element_adı: IDENT | "*" ; attrib: "[" S* IDENT S* [ [ "=" | DAXİLDİR | DASHMATCH ] S* [ IDENT | STRING ] S* ] "]" ; psevdo: ":" [ IDENT | FUNCTION S* ")" ] ; Qaydalar dəsti aşağıda təsvir edilən quruluşa malikdir. div.error , a.error ( color:red; font-weight:bold; ) div.error və a.error elementləri seçicilərdir. Verilmiş dəst üçün etibarlı qaydalar əyri mötərizələrə əlavə edilmişdir. Formal olaraq bu struktur aşağıdakı kimi müəyyən edilir: qaydalar dəsti: seçici [ "," S* seçici ]* "(" S* bəyanı [ ";" S* bəyanı ]* ")" S* ; Bu o deməkdir ki, qaydalar toplusu seçici və ya vergül və boşluqlarla ayrılmış çoxlu seçici kimi çıxış edir (S boşluq deməkdir). Qaydalar dəsti nöqtəli vergüllə ayrılmış bir və ya daha çox bəyannamədən ibarətdir. Onlar qıvrım mötərizələrə bağlanır. “Bəyannamə” və “selektor” terminləri aşağıda müəyyən edilmişdir.

WebKit CSS Parser

WebKit avtomatik olaraq CSS analizatorlarını yaratmaq üçün generatorlardan istifadə edir. Artıq qeyd edildiyi kimi, Bison simvolların giriş ardıcıllığını sağa sürüşdürən aşağıdan yuxarı analizatorlar yaratmaq üçün istifadə olunur. Firefox Mozilla təşkilatı tərəfindən hazırlanmış yuxarıdan aşağı təhlilçidən istifadə edir. Hər iki halda, CSS faylı CSS qaydaları olan StyleSheet obyektlərinə təhlil edilir. CSS qaydaları obyekti seçici və bəyannaməni, həmçinin CSS qrammatikasına xas olan digər obyektləri ehtiva edir.

Rəsm. CSS təhlili. Skriptlər və stil cədvəlləri üçün emal sifarişi Skriptlər

Veb sənədləri sinxron modelə əməl edir. Güman edilir ki, analizator teq aşkarlayan kimi skriptlər təhlil ediləcək və icra ediləcək. Sənədin təhlili skript icrasını tamamlayana qədər təxirə salınır. Xarici skriptdən danışırıqsa, ilk növbədə şəbəkə resurslarını tələb etməliyik. Bu, həm də sinxron şəkildə həyata keçirilir, təhlil resurslar mövcud olana qədər təxirə salınır. Bu model uzun illərdir istifadə olunur və hətta HTML 4 və 5 spesifikasiyalarına daxil edilib.İzləyici skripti təxirə salınma teqi ilə qeyd edə bilər ki, skript icrası tamamlanmazdan əvvəl sənəd təhlil oluna bilsin. HTML5 skripti asinxron kimi qeyd etmək qabiliyyətini təqdim etdi ki, o, başqa bir mövzuda təhlil edilsin və icra olunsun.

İlkin təhlil

Bu optimallaşdırma mexanizmi həm WebKit, həm də Firefox-da istifadə olunur. Skriptlər icra edildikdə, lazımi resursları qiymətləndirmək və onları şəbəkədən yükləmək üçün sənədin qalan hissələri başqa mövzuda təhlil edilir. Beləliklə, resurslar paralel iplərə yüklənir, bu da ümumi emal sürətini yaxşılaşdırır. Diqqət edin: indikativ təhlilçi DOM ağacını dəyişdirmir (bu, əsas təhlilçinin işidir), ancaq xarici skriptlər, üslub cədvəlləri və şəkillər kimi xarici resurslara istinadları emal edir.

Stil vərəqləri

Stil vərəqləri fərqli bir modelə əsaslanır. Onlar DOM ağacında dəyişiklik etmədikləri üçün onların işlənməsini gözləmək üçün sənədlərin təhlilini dayandırmaq nəzəri cəhətdən mənasızdır. Bununla belə, skriptlər sənədin təhlili zamanı üslub məlumatını tələb edə bilər. Stil hələ yüklənməyib və təhlil edilməyibsə, skript yanlış məlumat ala bilər. Təbii ki, bu, bir sıra problemlərə gətirib çıxaracaq. Firefox hələ yüklənməmiş və təhlil edilməmiş üslub cədvəli ilə qarşılaşarsa, bütün skriptlər dayanır. WebKit-də onlar yalnız yüklənməmiş cədvəllərdə müəyyən edilə bilən stil xassələrini əldə etməyə cəhd etdikdə dayanırlar.

Təqdimat ağacının qurulması

DOM ağacını qurarkən, brauzer başqa bir struktur yaradır - ekran ağacı. Vizual elementləri ekranda göstərilməsi lazım olan ardıcıllıqla yerləşdirir. Bu sənədin vizual təsviridir. Ekran ağacı məzmunun düzgün ardıcıllıqla göstərilməsini təmin etmək üçün istifadə olunur.

Firefox-da ekran ağacı elementi "çərçivə" adlanır. WebKit render obyekti terminindən istifadə edir.
Hər bir displey obyektinin özü və uşaqları haqqında render məlumatları var.
WebKit-də əsas render obyekti sinfi olan RenderObject sinfi aşağıdakı kimi müəyyən edilmişdir:

Sinif RenderObject( virtual boş yerləşdirmə(); virtual boşluq boyası(PaintInfo); virtual boşluq düz repaintRect(); Node* node; //DOM node RenderStyle* üslubu; // hesablanmış üslub RenderLayer* containgLayer; //tərkibində z - indeks təbəqəsi)

Hər bir ekran obyekti CSS2 spesifikasiyasında təsvir olunduğu kimi CSS node pəncərəsinə uyğun düzbucaqlı sahədir. O, genişlik, hündürlük və mövqe kimi həndəsi məlumatları ehtiva edir.
Pəncərənin növü bu node təyin edilmiş stil obyektinin ekran atributundan asılıdır (bölməyə baxın). Aşağıda WebKit-in displey xassəsinin atributuna əsaslanaraq DOM node üçün hansı növ ekran obyektinin yaradılmasını müəyyən etmək üçün istifadə etdiyi kod verilmişdir.

RenderObject* RenderObject::createObject(Node* node, RenderStyle* stil) ( Sənəd* sənəd = node->document(); RenderArena* arena = doc->renderArena(); ... RenderObject* o = 0; keçid (üslub) ->display()) ( hal NONE: fasilə; INLINE halı: o = yeni (arena) RenderInline(qovşaq); fasilə; hadisə BLOCK: o = yeni (arena) RenderBlock(qovşaq); fasilə; INLINE_BLOCK: o = yeni (arena) RenderBlock(node); break; case LIST_ITEM: o = new (arena) RenderListItem(node); break; ... ) return o; ) Elementin növü də nəzərə alınır: məsələn, xüsusi çərçivələr forma nəzarətləri və cədvəllər üçün istifadə olunur.
WebKit-də element fərdi render yaratmağa cəhd edərsə, createRenderer metodu ləğv ediləcək. Ekran obyektləri qeyri-həndəsi məlumatları ehtiva edən üslub obyektlərinə işarə edir.

Ekran ağacının DOM ağacı ilə əlaqəsi Emal obyektləri DOM elementlərinə uyğundur, lakin onlarla eyni deyil. Qeyri-vizual DOM elementləri ekran ağacına daxil edilmir (məsələn, baş elementdir). Əlavə olaraq, ekran atributunun heç biri təyin olunmadığı elementlər ağaca daxil edilmir (gizli atributlu elementlər daxil edilir).

Eyni zamanda bir neçə vizual obyektə uyğun gələn DOM elementləri də var. Adətən bunlar bir düzbucaqlı ilə təsvir edilə bilməyən mürəkkəb quruluşa malik elementlərdir. Məsələn, seçmə elementində üç vizual obyekt var: biri ekran sahəsi üçün, biri açılan siyahı üçün və biri düymə üçün. Bundan əlavə, mətn bir sətirə sığmırsa və fraqmentlərə bölünürsə, müstəqil nümayiş obyektləri kimi yeni sətirlər əlavə olunur.
Çoxsaylı displey obyektlərinin istifadə edildiyi başqa bir misal zəif yazılmış HTML kodudur. CSS spesifikasiyasına görə, daxili element ya yalnız blok, ya da yalnız daxili elementləri ehtiva edə bilər. Məzmun qarışıqdırsa, o zaman anonim blok obyektləri daxili obyektlər üçün sarğı kimi yaradılır.

Bəzi displey obyektlərində müvafiq DOM node var, lakin onların ağacdakı mövqeləri uyğun gəlmir. Üzən elementlər və mütləq koordinatları olan elementlər ümumi prosesdən xaric edilir, ağacın ayrıca hissəsinə yerləşdirilir və sonra onlar həqiqətən yer tutucu çərçivədə göstərilməli olduqda standart çərçivədə göstərilir.

Rəsm. Ekran ağacı və ona uyğun DOM ağacı(). Viewport əsas konteynerdir. WebKit-də o, RenderView obyekti ilə təmsil olunur. Ağac tikmə prosesi

Firefox-da vizual görünüş DOM yeniləmə dinləyicisi kimi qeydə alınıb. Çərçivələrin yaradılması üslubları müəyyən edən (bax) və çərçivəni yaradan FrameConstructor-a həvalə edilir.

WebKit-də üslubun müəyyən edilməsi və ekran obyektinin yaradılması prosesi əlavə adlanır. Hər bir DOM qovşağının əlavə metodu var. Hizalama sinxron şəkildə həyata keçirilir; DOM ağacına yeni bir qovşaq əlavə edildikdə, əlavə metodu ona çağırılır.

Html və bədən teqlərinin işlənməsi nəticəsində displey ağacının kök obyekti yaradılır. CSS spesifikasiyasında ona konteyner deyilir - bütün digər blokları ehtiva edən üst səviyyəli blok. Onun ölçüləri baxış sahəsini, yəni məzmunun göstəriləcəyi brauzer pəncərəsinin hissəsini təşkil edir. Firefox-da o, ViewPortFrame, WebKit-də isə RenderView adlanır. Bu, sənədin işarə etdiyi ekran obyektidir. Ağacın qalan hissəsi ona DOM qovşaqlarını əlavə etməklə qurulur.

Emal modelinin təfərrüatları CSS2 spesifikasiyasında verilmişdir.

Üslubların hesablanması

Ekran ağacı qurmaq üçün hər bir obyektin vizual xüsusiyyətlərini hesablamaq lazımdır. Bunun üçün hər bir elementin üslub xüsusiyyətləri hesablanır.

Üslub müxtəlif üslub cədvəlləri, daxili stil elementləri və HTML sənədindəki vizual xassələrlə (məsələn, bgcolor) müəyyən edilir. Sonuncular CSS xüsusiyyətlərinə tərcümə olunur.

Stil vərəqləri brauzer, veb səhifə tərtibatçısı və ya istifadəçi tərəfindən təqdim edilə bilər, hansı ki, brauzerdə öz üstünlük verdiyi üslubu seçə bilər (məsələn, Firefox-da bu stil cədvəlini Firefox Profil qovluğuna yerləşdirməklə edilə bilər).

Üslubların hesablanması ilə bağlı bir sıra çətinliklər var.

Stil məlumatları bir çox xüsusiyyətləri ehtiva edir və çox həcmli ola bilər, bu da yaddaş problemlərinə səbəb ola bilər.

Aşağıdakı üslub qaydaları ilə bir nümunəyə baxaq:

P.error (rəng:qırmızı) #messageDiv (hündürlük:50px) div (margin:5px) Birinci qayda sinif xəritəsində, ikinci qayda id xəritəsində və üçüncü qayda teq xəritəsində yerləşdiriləcək.
Aşağıdakı HTML kodunu nəzərdən keçirin:

xəta baş verdi

bu bir mesajdır

Əvvəlcə p elementi üçün qaydaları tapaq. Sinif xəritəsində p.error qaydasını tapdığımız açar xətası var. Div elementinə uyğun olan qaydalar identifikator xəritəsində (id düyməsi ilə) və teq xəritəsində var. Yalnız düymələrdən tapılan qaydalardan hansının uyğun olduğunu müəyyən etmək qalır.
Deyək ki, div elementi üçün qayda belədir:

Cədvəl div (margin:5px) Ən sağdakı seçici açar olduğu üçün biz onu hər halda teq xəritəsindən götürərdik, lakin bu div üçün işləməyəcək, çünki onun üçün əsas cədvəl yoxdur.

Bu optimallaşdırma həm WebKit, həm də Firefox-da istifadə olunur.

Prioritet sırasına görə qaydaları tətbiq edin

Stil obyektinin xüsusiyyətləri bütün vizual atributlara uyğundur (bütün CSS atributları, lakin daha universal səviyyədə). Əgər xassə hər hansı uyğun qaydalarla müəyyən edilməyibsə, bəzi hallarda o, ana stil obyektindən miras alına bilər. Digər hallarda, standart dəyər istifadə olunur.

Çətinlik birdən çox tərif olduqda başlayır və sonra münaqişənin həlli üçün prioritet sırası müəyyən edilməlidir.

Stil vərəqlərinin prioritet sırası Stil obyektinin xassə bəyannaməsi bir anda bir neçə stil cədvəlində, bəzən bir cədvəldə bir neçə dəfə ola bilər. Bu vəziyyətdə qaydaların düzgün tətbiqi qaydasını qurmaq çox vacibdir. Bu sıra kaskad adlanır. CSS2 spesifikasiyası aşağıdakı üstünlük sırasını (artan) müəyyən edir.

Brauzer reklamları

Daimi istifadəçi elanları

Daimi müəllif elanları

Əhəmiyyətli müəllif elanları

Vacib İstifadəçi Elanları

Brauzer reklamları ən aşağı prioritetə malikdir və istifadəçi reklamları müəllif reklamlarından daha vacibdir, əgər onlar vacibdir! Eyni prioritetə malik reklamlar , sonra isə müəyyən olunma sırasına görə sıralanır. HTML vizual atributları müvafiq CSS bəyannamələrinə tərcümə edilir və aşağı prioritet müəllif qaydaları kimi qəbul edilir.

Spesifiklik

Selektorun spesifikliyi CSS2 spesifikasiyasında aşağıdakı kimi müəyyən edilir.

Bəyannamə selektorlu qaydada deyil, stil atributundadırsa, dəyər 1-dir, əks halda 0 (= a).
Selektor daxilində ID atributlarının sayı (= b).
Selektor daxilində digər atributların və psevdosinflərin sayı (= c).
Selektor daxilində element adlarının və psevdo-elementlərin sayı (= d).

Bu dəyərləri a-b-c-d ardıcıllığına birləşdirmək (daha böyük radix say sistemində) spesifikliyi müəyyən edir.

Say sisteminin əsası kateqoriyaların hər hansı birində ən böyük ədədlə müəyyən edilir.
Məsələn, a=14 olarsa, hexadecimal istifadə edilə bilər. Əgər a=17 olarsa (bu mümkün deyil), sizə 17 əsaslı say sisteminə ehtiyacınız olacaq.Bu tip bir seçiciniz varsa bu vəziyyət yarana bilər: html body div div p... Amma 17 teq olması ehtimalı azdır. seçicinin içərisində.

Aşağıda bəzi nümunələr verilmişdir.

* () /* a=0 b=0 c=0 d=0 -> spesifiklik = 0,0,0,0 */ li () /* a=0 b=0 c=0 d=1 -> spesifiklik = 0,0,0,1 */ li:birinci sətir () /* a=0 b=0 c=0 d=2 -> spesifiklik = 0,0,0,2 */ ul li () /* a=0 b=0 c=0 d=2 -> spesifiklik = 0,0,0,2 */ ul ol+li () /* a=0 b=0 c=0 d=3 -> spesifiklik = 0 ,0,0,3 */ h1 + *() /* a=0 b=0 c=1 d=1 -> spesifiklik = 0,0,1,1 */ ul ol li.red () /* a =0 b=0 c=1 d=3 -> spesifiklik = 0,0,1,3 */ li.red.level () /* a=0 b=0 c=2 d=1 -> spesifiklik = 0 ,0,2,1 */ #x34y () /* a=0 b=1 c=0 d=0 -> spesifiklik = 0,1,0,0 */ style="" /* a=1 b= 0 c=0 d=0 -> spesifiklik = 1,0,0,0 */

Çeşidləmə qaydaları

Qaydalar uyğunlaşdırıldıqdan sonra prioritetlərə görə sıralanır. WebKit qısa siyahılar üçün dəyişdirmə çeşidləmə və uzun siyahılar üçün birləşmə çeşidindən istifadə edir. Çeşidləmə zamanı WebKit qaydalar üçün > operatorunu ləğv edir:

Statik bool operatoru >(CSSRuleData& r1, CSSRuleData& r2) ( int spec1 = r1.selector()->specificity(); int spec2 = r2.selector()->specificity(); qaytarılması (spec1 == spec2) : r1. position() > r2.position() : spec1 > spec2; )

Çox addımlı qayda tətbiqi

WebKit bütün yüksək səviyyəli üslub cədvəllərinin (@imports daxil olmaqla) yüklənib yükləndiyini göstərən xüsusi bayraqdan istifadə edir. Əgər birləşmə artıq başlayıbsa və bütün üslub cədvəli hələ yüklənməyibsə, yer tutucular istifadə olunur və sənəddə müvafiq işarələr görünür. Cədvəlin yüklənməsi başa çatdıqdan sonra yer tutucular yenidən hesablanır.

Layout

Yeni yaradılmış displey obyekti ağaca daxil edildikdə, onun nə ölçüsü, nə də mövqeyi olur. Bu dəyərlərin hesablanması layout (layout və ya reflow) adlanır.

HTML axın əsaslı layout modelindən istifadə edir, yəni əksər hallarda həndəsi məlumatları bir keçiddə hesablamaq olar. Axında sonradan rast gəlinən elementlər artıq işlənmiş elementlərin həndəsəsinə təsir göstərmir, ona görə də layout soldan sağa və yuxarıdan aşağıya doğru həyata keçirilə bilər. İstisnalar var: məsələn, HTML cədvəllərinin tərtibatı birdən çox loop() tələb edə bilər.

Koordinat sistemi kök çərçivəyə əsasən hesablanır. Üst və sol koordinatlardan istifadə olunur.

Layout bir neçə dövrədə həyata keçirilir. O, HTML sənədindəki elementə uyğun olan kök ekran obyekti ilə başlayır. Daha sonra çərçivə iyerarxiyası (və ya onun hissələri) işlənir və ona ehtiyac duyan displey obyektləri üçün həndəsi məlumat hesablanır.

Kök ekran obyektinin koordinatları (0; 0) var və ölçüləri baxış pəncərəsinə (brauzer pəncərəsinin görünən hissəsi) uyğun gəlir.

İstənilən displey obyekti isteğe bağlı olaraq öz uşaqlarında layout və ya reflow metodunu çağıra bilər.

Çirkli Bit Sistemi

Dəyişikliklərin hər dəfə təkrarlanmasının qarşısını almaq üçün brauzerlər çirkli bit sistemindən istifadə edirlər. Dəyişdirilmiş displey obyekti və onun uşaqları "çirkli" kimi qeyd olunur, yəni yenidən axın tələb olunur.

İki bayraq istifadə olunur: çirkli və uşaqlar çirklidir. Uşaqlar çirklidir bayrağı o deməkdir ki, ekran obyektinin özü deyil, onun bir və ya daha çox uşaqları yenidən işlənməlidir.

Qlobal və artımlı layout

Əgər layout bütün displey ağacında yerinə yetirilirsə, o, qlobal adlanır. Aşağıdakı hadisələr səbəb ola bilər.

Şriftin dəyişdirilməsi kimi bütün ekran obyektlərində istifadə olunan üsluba qlobal dəyişiklik.

Ekran ölçülərinin dəyişdirilməsi.

Artan düzülmə yalnız çirkli ekran obyektlərini dəyişir (və bəzi digər obyektlərin yenidən təşkil edilməsini tələb edə bilər).
Artan düzülmə asinxron şəkildə baş verir və çirkli ekran obyektləri ilə qarşılaşdıqda başlayır. Nümunə: Vebdən məzmun əldə etdikdən və onu DOM ağacına əlavə etdikdən sonra ekran ağacında yeni obyekt görünür.

Rəsm. Yalnız çirkli ekran obyektlərini və onların uşaqlarını emal edən artımlı layout (). Sinxron və asinxron əlaqə Artan keçid asinxron şəkildə baş verir. Firefox-da artımlı layout əmrləri növbəyə qoyulur və sonra planlaşdırıcı hamısını birlikdə çağırır. WebKit-də, bütün ağacı bir döngədə emal etmək və bütün çirkli ekran obyektlərini yenidən axıtmaq üçün artımlı layout da təxirə salınır.
OfsetHeight kimi üslub məlumatlarını tələb edən skriptlər artım düzəninin sinxron şəkildə baş verməsinə səbəb ola bilər.
Qlobal əlaqə adətən sinxron şəkildə həyata keçirilir.
Bəzən layout orijinal tərtibatdan sonra geri çağırışda edilir, çünki sürüşmə mövqeyi kimi bəzi atributların dəyərləri dəyişir. Optimallaşdırma Əgər layout ölçüsünü dəyişmə hadisəsi və ya displey obyektinin mövqeyində (lakin ölçüsündə deyil) dəyişikliklə işə salınırsa, obyektin ölçüləri keşdən çıxarılır və yenidən hesablanmır.
Ağacın yalnız bir hissəsi dəyişirsə, bütün ağac yenidən axmır. Bu, əgər dəyişiklik yerli xarakter daşıyırsa və ətrafdakı obyektlərə təsir etmirsə, məsələn, mətn sahələrinə mətn daxil edərkən (digər hallarda hər simvolun daxil edilməsi bütün ağacın yenidən təşkilinə səbəb olur) baş verir. Layout prosesi

Layout adətən aşağıda təsvir edilən sxemə uyğun olaraq həyata keçirilir.

Ana ekran obyekti öz enini təyin edir.

Əsas ekran obyekti uşaq elementləri emal edir:

uşaq displey obyektinin mövqeyini müəyyən edir (onun x və y koordinatlarını təyin edir);

Uşaq elementin yerləşdirilməsinə səbəb olur (əgər o, çirkli olaraq qeyd olunubsa, qlobal yenidən axıdılırsa və s.), nəticədə onun hündürlüyü hesablanır.

Uşaq elementlərin ümumi hündürlüyünə, eləcə də kənarların və dolğunluğun hündürlüyünə əsasən, ana ekran obyektinin hündürlüyü hesablanır: bu, öz ana obyekti tərəfindən tələb olunur.

Bitlər artıq çirkli olaraq qeyd edilmir.

Firefox düzən parametri kimi nsHTMLReflowState obyektindən istifadə edir. Digər şeylər arasında, əsas elementin enini təyin edir.
Firefox-da tərtibat, displey obyektinin hündürlüyü dəyərini ehtiva edən nsHTMLReflowMetrics obyekti yaradır.

Genişliyin hesablanması

Ekran obyektinin eni konteynerin eni, displey obyektinin eni xassəsi, kənarların və haşiyələrin ölçüləri əsasında hesablanır.
Aşağıdakı div elementinin eninin necə hesablandığına baxaq:

WebKit-də bu belə hesablanacaq (RenderBox sinifinin calcWidth metodu).

Konteynerin eni availableWidth və 0-dan böyükdür. Bu halda, availableWidth xassə dəyəri contentWidth dəyərinə bərabərdir və bu aşağıdakı kimi hesablanır: clientWidth() - paddingLeft() - paddingRight() clientWidth və clientHeight xassələri dəyərlər sərhəd və sürüşmə çubuğu istisna olmaqla, obyektin daxili ölçülərinə uyğundur.
Elementlərin eni stil obyektinin eni atributu ilə müəyyən edilir. Onun mütləq dəyəri konteynerin eninin faizinə əsasən hesablanır.
Üfüqi çərçivələr və padding əlavə olunur.

Bu nöqtəyə qədər üstünlük verilən genişliyi hesablayırdıq. İndi onun minimum və maksimum qiymətlərini hesablayaq.
Əgər üstünlük verilən genişlik maksimumdan çox olarsa, o zaman maksimum dəyər, minimumdan (ən kiçik bölünməz obyekt) azdırsa, minimum enin dəyərindən istifadə edilir.

Genişliyi dəyişdirmədən yenidən axın tələb olunarsa, bu məlumatlar keşdə saxlanılır.

Xəttin sarılması

Layout prosesi zamanı displey obyekti sətir kəsilməsinin lazım olduğunu aşkar edərsə, tərtibat dayanır və sətir kəsilməsi sorğusu əsas elementə ötürülür. Ana element əlavə ekran obyektləri yaradır və onların düzülməsini həyata keçirir.

Rendering

Göstərmə mərhələsində hər bir ekran obyekti üçün növbə ilə boyama üsulu çağırılır və onların məzmunu ekranda göstərilir. Göstərmək üçün UI çərçivə komponenti istifadə olunur.

Qlobal və artımlı renderinq Qlobal renderləmə ilə bütün ağac bütövlükdə çəkilir və artımlı göstərmə ilə yalnız ağacın qalan hissəsinə təsir etməyən fərdi ekran obyektləri çəkilir. Dəyişdirilmiş displey obyekti onun düzbucaqlısını etibarsız kimi qeyd edir. Əməliyyat sistemi onu "çirkli" sahə kimi qəbul edir və boya hadisəsini qaldırır. Sahələr elə birləşdirilib ki, render hər kəs üçün eyni anda həyata keçirilə bilsin. Chrome brauzerində göstərmə bir az daha mürəkkəbdir, çünki renderer əsas prosesdən kənardadır: Chrome müəyyən dərəcədə əməliyyat sisteminin davranışını təqlid edir. Göstərici komponent bu hadisələri dinləyir və mesajı kök ekran obyektinə ötürür. Ağacdakı bütün obyektlər istədiyinizi tapana qədər növbə ilə yoxlanılır. Sonra özü və bir qayda olaraq, uşaqları çəkilir. Draw Order Draw order CSS2 spesifikasiyasında müəyyən edilmişdir. Əslində, elementlərin yerləşdirilmə sırasına uyğundur. Çəkmə qaydası vacibdir, çünki yığınlar geri çəkilir. Blok obyektlərinin yığına əlavə edilmə ardıcıllığı aşağıdakı kimidir:

Fon rəngi

Fon şəkli

Çərçivə

Uşaq obyektləri

Xarici sərhədlər

Firefox Ekran Siyahısı Firefox ekran ağacının təhlili əsasında çəkilən düzbucaqlı üçün ekran siyahısı yaradır. O, bu düzbucaqlının istənilən ardıcıllıqla düzülmüş ekran obyektlərini ehtiva edir (əvvəlcə fon, sonra çərçivələr və s.). Bunun sayəsində arxa planı, fon şəkillərini, çərçivələri və s.-ni yenidən göstərmək üçün yalnız bir dəfə ağacın içindən keçmək lazımdır.

Firefox-da proses gizli olacaq elementləri əlavə etməməklə optimallaşdırılır (məsələn, qeyri-şəffaf elementlər altında).

WebKit-də Düzbucaqlı Saxlama Yenidən göstərmədən əvvəl köhnə düzbucaqlı WebKit-də bitmap kimi saxlanılır və sonra yalnız köhnə və yeni düzbucaqlı arasındakı fərqlər çəkilir. Dinamik Dəyişikliklər Dəyişikliklər baş verdikdə, brauzerlər lazımsız əməliyyatları yerinə yetirməməyə çalışır. Məsələn, bir elementin rəngi dəyişirsə, digərləri yenidən göstərilmir. Elementin mövqeyi dəyişdikdə, elementin özü, onun uşaqları və bəlkə də eyni səviyyədə olan digər obyektlər yenidən qurulur və göstərilir. Bir DOM nodu əlavə edildikdə, yenidən qoyulur və göstərilir. Html elementinin şrift ölçüsünü artırmaq kimi əsas dəyişikliklər keşin təmizlənməsi və bütün ağacın yenidən qurulması və göstərilməsi ilə nəticələnir. Mapper Threads Mapper bir ip üzərində işləyir: şəbəkə əməliyyatları istisna olmaqla, demək olar ki, hər şeyi idarə edir. Firefox və Safari-də bu, əsas brauzer mövzusudur, Chrome-da isə əsas tab prosesidir.
Şəbəkə əməliyyatları bir neçə paralel mövzuda həyata keçirilə bilər. Paralel qoşulmaların sayı məhduddur və adətən 2 ilə 6 arasında dəyişir (məsələn, Firefox 3 6-dan istifadə edir). Hadisə Döngəsi Brauzerin əsas mövzusu hadisə dövrəsidir, işçi proseslərini dəstəkləyən sonsuz dövrədir. O, hadisələrin (məsələn, tərtibat və boya kimi) emal edilməsi üçün göndərilməsini gözləyir. Bu, əsas hadisə dövrəsi üçün Firefox kodudur: while (!mExiting) NS_ProcessNextEvent(thread); Vizual Model CSS2 Canvas Digər Dillər

Bu səhifə yapon dilinə tərcümə edilmişdir. İki dəfə!

Salam, Start-Luck bloqunun əziz oxucuları. Bəzən ən sadə suallara cavab axtarmaq insanın heç vaxt düşünmədiyi inanılmaz şeyləri üzə çıxara bilər. Biz sadəcə bir ampul, mikrodalğalı soba və tozsorandan istifadə etməyə öyrəşmişik.

Kimsə bu maşınların necə işlədiyi barədə məqalə açan kimi yeni səviyyəyə çatır. Bir insan onunla çox maraqlanırsa, sonradan o, kifayət qədər yaxşı bir elektrikçi və ya bütün peşələrin bir jakına çevrilir, onun üçün heç bir şeyi düzəltmək problem deyil.

Bu gün bir az fərqli şeylər haqqında danışacağıq. Brauzerlərin nə olduğunu və necə işlədiyini danışacağıq. Çətin ki, nə vaxtsa brauzerinizi düzəltməli olacaqsınız, lakin bu məqalədən sonra veb-saytların necə tərtib olunduğuna dair heç bir sualınız olmayacaq. Mən buna şübhə etmirəm.

Sayt necə işləyir

İstənilən elektron resurs fayllar toplusudur. Bəziləri dizayn üçün, digərləri test komponenti üçün cavabdehdir. Onlar xüsusi proqramlaşdırma dillərindən istifadə etməklə yazılır. Bütün veb sayt yaradıcıları kodu başa düşmür; bəziləri özləri hərəkətləri koda və fayllara çevirən sadə proqramlardan istifadə edirlər.

Sayta brauzerlərin baxdığı kimi baxsanız, sadəcə digər faylların yerləşəcəyi qeyri-müəyyən adı olan bir qovluq görəcəksiniz. Onlardan hər hansı birini açsanız, heç nə başa düşməyəcəksiniz.

Bu sənədlər dəsti tərtibatçının kompüterində olsa da, oxucuların onlara çıxışı yoxdur. Onlar internetdə deyil. Onlar ictimai baxış üçün veb-sayt açmağa kömək edirlər. Təxminən desək, onların veb saytları olan qovluqların saxlandığı böyük flash sürücülər kimi bir şey var.

Hər bir qovluq bir URL və ya sadə dillə desək, bir ünvanla əlaqələndirilir. Onu brauzerinizin ünvan çubuğuna daxil edin və o, sizi qovluğa aparacaq. Bütün brauzerlər bunu etmir, lakin biz bu barədə növbəti fəsildə danışacağıq.

Brauzer missiyası

Dediyim kimi, istifadəçilərə kömək edən müəyyən proqramlar var. Eyni kodu bilmədən sayta qovluq şəklində deyil, tamamilə tanış bir şəkildə baxa bilməniz üçün lazım olan brauzerlər var.

Məsələn, bir proqramçı deyir: “Budur, məqalə var və bu ifadəyə klikləməklə insan saytımın başqa səhifəsinə keçməlidir”. Müəyyən bir kodu daxil edirik. Siz bunu görmürsünüz, brauzer bunu başa düşür və dərhal oxucuya alt xətt ilə sadə və tanış bir keçid verir.

Proqramlaşdırma dillərini öyrənmək ilk baxışdan göründüyü qədər çətin deyil. İndi İnternetdə həyatı və işi asanlaşdıran bir çox sadələr var. Çaydanlara sənətkarlığın incəliklərini anlamağa kömək edən kurslar az deyil. Məsələn, " WordPress 4: Veb sayt yaratma təcrübəsi» Mixail Rusakov. Dərslər çox sadədir. Təlimin sonunda hər kəs əsl veb sayt qurucusu ola biləcək.

Beləliklə, brauzerlərin nə üçün olduğunu anladıq. İndi onların nə olduğunu görək.

Təsnifat

Düzünü desəm, brauzerləri növlərə bölmək mümkün deyil. Mən sizə yalan danışmayacağam - onların hamısı təxminən eynidir. Fərq yalnız interfeysdə, bəzən yükləmə sürətində və təsirsiz nüanslarda olur.

Bu gün mən bu bölmə ilə bir dəfədən çox rastlaşmışam: Google Chrome, Yandex Browser, Opera, Mozilla. Onları bu şəkildə ayırmağa özümü saxlaya bilmirəm.

İcazə verin sizə sadə bir alternativ verim. Kolbasaya gəlincə, onu tərkibinə, qiymətinə, hazırlanma üsuluna görə (çəkmə, qaynatma) təsnif etmək olar. Çox sayda brauzer yoxdur və hamısı təxminən eynidır, buna görə də onları yalnız istehsalçıya bölmək olar, amma mənim fikrimcə, bu bir növ pis təsnifatdır.

Onların fəaliyyət prinsipi və missiyası istənilən halda eynidir. Bəs insanlar brauzerləri necə seçirlər? Əsasən interfeysdir. Hər kəsin kiçik fərqləri var və insanlar onlara tez alışır. Məsələn, Yandex Browser-ə daxil olduğunuz zaman sizə maraqlı ola biləcək xəbərləri oxumaq təklif olunur. Bu, istifadəçiləri cəlb edir.

Bəzi insanlar Google Chrome brauzerinin veb saytları daha sürətli açdığını görürlər. Bunun nə dərəcədə doğru olduğunu deyə bilmərəm. Şəxsən mən bir neçə brauzerdən istifadə edirəm və hər birinin sürəti bütövlükdə İnternetdən asılıdır. Yandex turbo rejimlərinin olduğunu iddia etsə də, axşam saatlarında şəbəkə həddindən artıq yüklənirsə və hətta torrent çox yavaş işləyirsə, o zaman səhifəni bir saniyəyə yükləmək mümkün olmayacaq.

Bir brauzeri necə seçmək, bir neçəsini quraşdırmaq və hansının sizin üçün daha əlverişli olduğunu görmək. Tamam, indi hər şey bitdi. Keyfiyyətli məlumat almaq üçün bülletenə də abunə olun.

Bir daha görüşənədək və uğurlar.

Salam hörmətli yeni başlayan veb ustaları.

Heç kimə sirr deyil ki, saytla işləmək brauzerdə aparılır.

Bu o qədər adi haldır ki, adətən veb-masterlər, brauzerdən söhbət gedəndə, yalnız proqramlaşdırma dillərinin cross-brauzer xüsusiyyətlərinə diqqət yetirirlər.

Bununla belə, brauzer öz parametrləri, əlavə modulları və vebmasterin işini əhəmiyyətli dərəcədə asanlaşdıran müxtəlif funksiyaları olan əsas kompüter vasitəsidir.

Yalnız ilk baxışdan brauzer iki qədər sadədir.

Əslində, hər hansı bir nüfuzlu proqram kimi, konfiqurasiyasında bu kursda müzakirə ediləcək bir çox seçim və nüans var.

Öz təcrübəmdən: Chrome brauzerinin önbelleğinin xüsusiyyətlərini bilmədiyim üçün uzun müddət WordPress-dəki şəkillərimin dəyişdirildikdə niyə yenilənmədiyini başa düşə bilmədim - nəticədə iş yavaşladı.

Ancaq sualın heç bir mənası yox idi, əgər dərhal bilsəydim.

Niyə Chrome. Çünki, açığını desəm, bu, indiyə qədərki ən təkmil brauzerdir.

Google tərəfindən yaradılmış, həm masaüstü, həm də mobil versiyalarda tamamilə bütün tələblərə cavab verir və qoşula və ya söndürülə bilən bir çox modula malikdir və bununla da işi asanlaşdırır və sürətləndirir.

Bundan əlavə, Chrome bütün Google xidmətlərinə sıx şəkildə inteqrasiya olunub ki, bu da saytla işləyərkən, yəni onun təhlili və təşviqi zamanı böyük bir artıdır.

Quraşdırma və əsas brauzer parametrləri

Axtarış çubuğuna Chrome-u Yükləyin yazın, istədiyiniz seçimi, mobil və ya kompüter üçün istədiyiniz OS-ni seçin və Yükləyin düyməsini basın.

Şərtlər və standart onay qutuları olan iki onay qutusu ilə bir pəncərə görünəcək.

Qeyd qutuları silinə və ya buraxıla bilər. Birincisini qoyub ikincisini çıxarardım, artıq bu mərhələdə brauzeri asanlaşdırırdım.

Quraşdırma bütün proqramlar kimi standart olaraq həyata keçiriləcək, bundan sonra sizdən Chrome-a daxil olmağın istəniləcəyi bir pəncərə açılacaq.

Əslində, brauzer artıq işləməyə hazırdır və heç bir yerə daxil olmaq lazım deyil, sadəcə təyinatı üçün istifadə etməyə başlayın, lakin bu bizim yolumuz deyil, çünki ona tam giriş əldə etməliyik.

Və təkcə bunun üçün deyil. Google hesabı həm Google Analytics - sayt istifadəçisi göstəricilərinin analitikası, həm də Axtarış Konsolu - texniki analitikadır. sayt xüsusiyyətləri və PageSpeed Insights - mobil versiyaların analitikası.

Hesab yaratmaq İnternetdə yüzlərlə dəfə təsvir edilmişdir, ona görə də biz bunu nəzərə almayacağıq.

Hesabın yaradılması prosesi zamanı sizin giriş və e-poçt ünvanınız @gmail.com olacaq, brauzerə daxil olmaq üçün istifadə etməli olacaqsınız.

Ola bilər ki, siz artıq Chrome quraşdırmısınız və uzun müddətdir uğurla işləyirsiniz.

Bu halda, daxil olmaq üçün axtarış çubuğunun sonundakı üç nöqtəyə klikləməlisiniz, açılan menyuda Parametrlər seçin və ən yuxarıda Chrome-a daxil olun seçin.

Giriş tamamlandı, bunun nə üçün lazım olduğu kurs zamanı müzakirə ediləcək və hələ də parametrlərdə olduğumuz üçün daxil olmadan mövcud olanları nəzərdən keçirəcəyik.

Bu kiməsə faydalı ola bilər.

1. Başlanğıcda açın.

Burada brauzeri işə saldıqda nəyin açılacağını seçə bilərsiniz.

Ola bilər

a) Yeni tab - axtarış sisteminin boş səhifəsi.

b) Əvvəllər açılmış sekmeler brauzeri bağladığınız anda açıq olan səhifələrdir.

c) Defined pages - brauzer işə salındıqda açılacaq səhifənin ünvanını əlavə edə bilərsiniz.

2. Görünüş.

Burada fon şəkli əlavə edə və Həmişə əlfəcinlər panelini göstərə bilərsiniz. Əlfəcinlər axtarış çubuğunun altında görünəcək.

Burada istədiyiniz axtarış sistemini seçirsiniz.

Növbəti paraqrafda, Defolt Brauzerdə, heç nəyə icazə verməyə və ya seçməyə ehtiyac yoxdur, çünki biz artıq Chrome ilə işləyirik, yəni o, standartdır.

Əslində, daim başqa bir brauzerdən istifadə etmək və Chrome-u ehtiyatda saxlamaq istəyirsinizsə, başlanğıcda açılacaq birini göstərin.

4. İstifadəçilər. Burada əlfəcinləri idxal et maddəsi ilə maraqlana bilərsiniz.

Əgər əvvəllər başqa bir brauzeriniz varsa, onda yəqin ki, saxlamağınız lazım olan müəyyən sayda əlfəcinlər var.

Bunu etmək üçün əlfəcinləri və parametrləri idxal et klikləyin və əlfəcinləri köçürmək istədiyiniz brauzeri seçin.

Bir çox maraqlı məqamları da özündə əks etdirən əlfəcinlər paneli, Ghrome interfeysindən bəhs edərkən növbəti məqalədə müzakirə olunacaq/

Bu nöqtədə qeyd qutularını hələlik boş qoyuruq.

Bu yazıda biz ondan dərhal edilə bilən bəzi parametrlərə baxacağıq və əlavə biliklər əldə etdikdən sonra qalanları üçün gələcək məqalələrdə geri dönəcəyik.

1. Şəxsi məlumat. Burada, hələlik, biz yalnız ünvanların daxil edilməsini və səhifələrin yüklənməsini sürətləndirmək üçün göstərişlər daxil edəcəyik.

2. Parollar və formalar. Hər iki onay qutusunu buraxın. Birincisi, daimi olaraq ünvanınızı, adınızı və s. yazmağa imkan verəcəkdir. formalarda və ikincinin köməyi ilə hər zaman sayt üçün parolu brauzerdə saxlamaq və ya saxlamamaq seçiminiz olacaq.

Məsələn, mən heç vaxt brauzerimdə məxfi məlumatımı ehtiva edən saytlar üçün parolları saxlamıram.

3. Səhifə görünüşü. Şriftin ölçüsü və növü tənzimlənə bilər.

Gözümüzə daha çox xoş gələni seçib Finish düyməsini sıxırıq.

Hələlik şəbəkəni atlayırıq.

4. Dillər. Tərcümə təklifi qutusunu yoxlayın və Dil parametrlərini dəyişdirin.

Əlavə et düyməsini klikləsəniz, təklif olunan böyük siyahıdan dil seçə və sizin üçün əlverişli dildə İnternetə baxa bilərsiniz.

5. Yüklənmiş fayllar. Bu, yüklənmiş faylın harada yüklənəcəyini göstərir. Bu, yükləndikdən sonra bütün kompüterdə faylı axtarmamaq üçün lazımdır.

Varsayılan olaraq, Chrome Yükləmələr qovluğuna quraşdırılıb, lakin Dəyişiklik düyməsini klikləsəniz, kompüterinizdə istənilən digər qovluğu seçə bilərsiniz.

İlkin parametrlərlə bitirdiyimiz yer budur.

Növbəti məqalədə brauzer interfeysi ilə işləməyə başlayacağıq. Tərtibatçılardan çoxlu nüanslar və sürprizlər var.

Və burada, məncə, isti düymələrin siyahısı faydalı olardı.

Ctrl + N - yeni pəncərə.

Ctrl + T - yeni nişan.

Ctrl + Shift + N - gizli rejimdə yeni pəncərə.

Ctrl + sol siçan düyməsini basın.

Ctrl + Shift + T - son qapalı nişanı bərpa edin (10 nişana qədər).

Ctrl + W - aktiv nişanı və ya açılan pəncərəni bağlayın.

Ctrl + Tab - nişanlar arasında keçid.

F5 və ya Ctrl + R - səhifənin yenilənməsi.

Esc - səhifənin yüklənməsini ləğv edin.

Ctrl + F - açıq səhifədə mətn axtarın.

Ctrl + D - cari səhifə üçün əlfəcin saxlayır.

F11 - Tam ekran rejiminə daxil olmaq və çıxmaq üçün düymə.

Ctrl + plus və Ctrl + minus - səhifə miqyasını dəyişdirin.

Ctrl + 0 - standart səhifə böyütmə.

Əsas səhifə - səhifənin yuxarı hissəsinə keçir.

Son - səhifənin sonuna gedir.

Oxumaq faydalı ola bilər: