Ne olduğunu göstermek için sayfanın URL'sini girin
Bu makalenin başında, oldukça karışıktı, çünkü "sayfa görüntüsüne url'yi girerek ne olduğu" için çevrimiçi bir arama, birçok bilgi bulabilirsin. Üstelik mülakat sorusu temelde aranan bir soru Şubat ayında mülakat yapıldığında süreçte ne olduğunu bilmeme rağmen mülakatı yapan kişi adım adım soru sormaya devam ettiğinde birçok ayrıntı net değildi.
Bu makalenin amacı, url'ye girdikten sonra olanları özetlemek ve genişletmektir. Bu yüzden makale çok karmaşık olabilir.
Genel süreç kabaca şu şekildedir:
1. Adresi girin
Tarayıcıya URL'yi girmeye başladığımızda, tarayıcı zaten akıllı bir şekilde olası URL ile eşleşiyor. Girilen dizeye karşılık gelen URL'yi geçmiş kayıtlardan, yer imlerinden vb. Bulacak ve sonra verecektir. Akıllı istemler, url adresini tamamlamanıza izin verir. Google'ın krom tarayıcısı için, web sayfasını doğrudan önbellekten görüntüleyecek, yani sayfa siz enter tuşuna basmadan önce çıkacaktır.
2. Tarayıcı, alan adının IP adresini arar
1. İstek başlatıldığında, tarayıcının yapması gereken ilk şey alan adını çözümlemektir.Genel olarak, tarayıcı öncelikle yerel sabit diskin ana bilgisayar dosyasını kontrol ederek bu alan adına karşılık gelen herhangi bir kural olup olmadığını kontrol edecektir. IP adresini doğrudan hosts dosyasında kullanın.
2. İlgili ip adresi yerel ana bilgisayar dosyasında bulunamazsa, tarayıcı yerel DNS sunucusuna bir DNS isteği gönderecektir. Yerel DNS sunucuları genellikle China Telecom ve China Mobile gibi ağ erişim sunucusu sağlayıcılarınız tarafından sağlanır.
3. Girdiğiniz URL'yi sorgulamak için DNS talebi yerel DNS sunucusuna ulaştıktan sonra, yerel DNS sunucusu önce önbellek kaydını sorgular.Önbellekte bu kayıt varsa, sonucu doğrudan döndürebilir.Bu işlem özyinelemeli bir sorgudur. Değilse, yerel DNS sunucusunun DNS kök sunucusunu sorgulaması gerekir.
4. Kök DNS sunucusu, belirli etki alanı adı ile IP adresi arasındaki ilgili ilişkiyi kaydetmez, bunun yerine yerel DNS sunucusuna etki alanı sunucusunu sorgulamaya devam edebileceğinizi ve etki alanı sunucusunun adresini verebileceğinizi söyler. Bu süreç yinelemeli bir süreçtir.
5. Yerel DNS sunucusu, etki alanı sunucusuna istek göndermeye devam eder Bu örnekte, isteğin nesnesi .com etki alanı sunucusudur. .Com etki alanı sunucusu talebi aldıktan sonra, etki alanı adı ile IP adresi arasındaki yazışmayı doğrudan geri göndermeyecek, ancak yerel DNS sunucusuna etki alanı adınız için çözüm sunucusunun adresini söyleyecektir.
6. Son olarak, yerel DNS sunucusu, alan adı çözümleme sunucusuna bir istek gönderir.Bu anda, bir alan adı ve IP adresi yazışması alabilir.Yerel DNS sunucusu, IP adresini yalnızca kullanıcının bilgisayarına döndürmemeli, aynı zamanda yazışmayı da kaydetmelidir. Önbellekte, diğer kullanıcılar bir dahaki sefere sorguladığında ağ erişimini hızlandırmak için sonuçlar doğrudan döndürülebilir.
Aşağıdaki resim bu süreci mükemmel bir şekilde açıklamaktadır:
Bilgi genişletme:
1) DNS nedir?
Etki alanı adları ve IP adresleri arasında bir eşleme olarak İnternet üzerinde dağıtılmış bir veritabanı olan DNS (Etki Alanı Adı Sistemi, Etki Alanı Adı Sistemi), kullanıcıların doğrudan makine tarafından okunabilen IP numarası dizesini hatırlamak zorunda kalmadan İnternet'e erişmesini kolaylaştırabilir. Ana bilgisayar adı aracılığıyla, nihayet ana bilgisayar adına karşılık gelen IP adresini alma işlemine alan adı çözümlemesi (veya ana bilgisayar adı çözümlemesi) denir.
Layman'ın terimleriyle, 167.23.10.2 gibi IP adresini hatırlamak yerine www.baidu.com gibi bir web sitesinin adını hatırlamaya daha alışkınız. Bilgisayar, www.baidu.com gibi bir bağlantı yerine bir web sitesinin IP adresini hatırlamakta daha iyidir. Çünkü DNS bir telefon defterine eşdeğerdir.Örneğin, www.baidu.com alan adını arıyorsanız, o zaman telefon rehberime bakıyorum ve ah, telefonunun (ip) 167.23.10.2 olduğunu biliyorum.
2) DNS sorgusunun iki yolu: özyinelemeli sorgu ve yinelemeli sorgu
1. Yinelemeli analiz
Yerel DNS sunucusu istemcinin DNS sorgusunu yanıtlayamadığında, diğer DNS sunucularını sorgulaması gerekir. Şekilde gösterildiği gibi, şu anda iki yol var özyinelemeli. Yerel DNS sunucusunun kendisi diğer DNS sunucularını sorgulamaktan sorumludur.Genel olarak, önce alan adının kök alan sunucusunu sorgular ve ardından kök alan adı sunucusunu seviyeye göre sorgular. Son olarak elde edilen sorgu sonucu yerel DNS sunucusuna döndürülür ve ardından yerel DNS sunucusu istemciye geri döner.
2. Yinelemeli analiz
Yerel DNS sunucusunun kendisi istemcinin DNS sorgusunu yanıtlayamadığında, şekilde gösterildiği gibi yinelemeli sorgu ile de çözülebilir. Yerel DNS sunucusu diğer DNS sunucularını tek başına sorgulamaz, ancak etki alanı adını istemci DNS programına çözümleyebilen diğer DNS sunucularının IP adreslerini döndürür ve istemci DNS programı, sorgu sonucu alınana kadar bu DNS sunucularını sorgulamaya devam eder. a kadar. Başka bir deyişle, yinelemeli analiz yalnızca ilgili sunucuyu bulmanıza yardımcı olur, ancak onu kontrol etmenize yardımcı olmaz. Örneğin: baidu.com sunucusunun ip adresi 192.168.4.5 burada, kendiniz kontrol edebilirsiniz, meşgulüm, bu yüzden sadece buraya gelmenize yardımcı olabilirim.
3) DNS alan adı alanının organizasyonu
Kök DNS sunucusu, etki alanı DNS sunucusu hakkında konuştuk, bunlar DNS etki alanı adı alanının organizasyonu. İşlevsel ad alanlarında DNS alan adlarını tanımlamak için kullanılan beş kategori, her ad türünün örneklerinin yanı sıra aşağıdaki tabloda ayrıntılı olarak açıklanmıştır.
(Korsan resimleri)
4) DNS yük dengeleme
Bir web sitesi yeterli kullanıcıya sahip olduğunda, istenen her kaynak aynı makinede bulunuyorsa, bu makine herhangi bir zamanda atlayabilir. Çözüm, DNS yük dengeleme teknolojisini kullanmaktır. İlkesi, DNS sunucusunda aynı ana bilgisayar adı için birden çok IP adresi yapılandırmaktır. DNS sorgularına yanıt verirken, DNS sunucusu her sorgu için DNS dosyasında ana bilgisayar tarafından kaydedilen IP adresini kullanır. Farklı analiz sonuçlarını sırayla döndürün ve istemcinin farklı makinelere erişimini yönlendirin, böylece farklı müşteriler yük dengeleme amacına ulaşmak için farklı sunuculara erişebilir.Örneğin, her makinenin yüküne göre makine kullanıcıdan uzaktadır. Coğrafi uzaklık vb.
3. Tarayıcı, web sunucusuna bir HTTP isteği gönderir
Alan adına karşılık gelen IP adresini aldıktan sonra, tarayıcı rastgele bir bağlantı noktası (1024 < Liman < 65535) Sunucunun WEB programının (httpd, nginx, vb.) 80 numaralı bağlantı noktasına bir TCP bağlantı isteği başlatın. Bu bağlantı talebi sunucuya ulaştıktan sonra (yerel alan ağı dışında çeşitli yönlendirme cihazları aracılığıyla), ağ kartına girer ve ardından çekirdeğin TCP / IP protokol yığınına girer (bağlantı talebini tanımlamak, paketi açmak, katman katman) Katman soyulur) ve Netfilter güvenlik duvarı (çekirdeğe ait bir modül) tarafından filtrelenebilir ve sonunda WEB programına ulaşabilir ve sonunda bir TCP / IP bağlantısı kurabilir.
TCP bağlantısı şekilde gösterilmiştir:
TCP bağlantısı kurulduktan sonra, bir http talebi başlatılır. Tipik bir http istek üstbilgisinin genellikle GET veya POST gibi istek yöntemini içermesi gerekir. Daha az kullanılan yöntemler arasında PUT ve DELETE, HEAD, OPTION ve TRACE bulunur. Genel tarayıcı yalnızca GET veya POST isteklerini başlatabilir.
İstemci, sunucuya bir http isteği başlattığında, üç bölüm içeren bazı istek bilgileri olacaktır:
| Yöntem URI protokolü / sürümü iste
| Başlık İste
| Gövde isteği:
Aşağıda eksiksiz bir HTTP isteği örneği verilmiştir:
GET / sample.jspHTTP / 1.1Kabul: image / gif.image / jpeg, * / * Kabul-Dil: zh-cn
Bağlantı: Canlı Tutun
Ana bilgisayar: localhost
Kullanıcı Aracısı: Mozila / 4.0 (uyumlu; MSIE5.01; Pencere NT5.0)
Accept-Encoding: gzip, deflate
kullanıcı adı = jinqiaopassword = 1234
Not: Son istek başlığı boş bir satır olduktan sonra, sunucuya aşağıda başka istek başlıkları olmadığını bildirmek için bir satır başı ve satır besleme gönderilir.
(1) İsteğin ilk satırı "Method URL Proposal / Version" şeklindedir: GET / sample.jsp HTTP / 1.1
(2) Talep Başlığı
İstek başlığı, istemci ortamı ve istek gövdesi hakkında birçok yararlı bilgi içerir. Örneğin, istek başlığı, tarayıcı tarafından kullanılan dili, istek gövdesinin uzunluğunu vb. Bildirebilir.
Kabul et: image / gif.image / jpeg. * / *
Kabul Dili: zh-cn
Bağlantı: Canlı Tutun
Ana bilgisayar: localhost
Kullanıcı Aracısı: Mozila / 4.0 (uyumlu: MSIE5.01: Windows NT5.0)
Accept-Encoding: gzip, deflate.
(3) Gövde isteği
İstek başlığı ile istek gövdesi arasında boş bir satır var Bu satır çok önemlidir.İstek başlığının sona erdiğini ve sonraki satırın istek gövdesi olduğunu gösterir. İstek gövdesi, müşteri tarafından gönderilen sorgu dizesi bilgilerini içerebilir:
kullanıcı adı = jinqiaopassword = 1234
4. Sunucudan kalıcı yeniden yönlendirme yanıtı
Sunucu, tarayıcıya 301 kalıcı yeniden yönlendirme yanıtıyla yanıt verir, böylece tarayıcı " yerine " adresini ziyaret eder.
Kullanıcının görmek istediği web sayfasının içeriğini doğrudan göndermek yerine sunucunun neden yeniden yönlendirmesi gerekiyor? Sebeplerden biri arama motoru sıralamaları ile ilgilidir. Bir sayfanın ve gibi iki adresi varsa, arama motorları bunları iki web sitesi olarak kabul eder. Sonuç olarak, her arama bağlantısı azaltılır ve Sıralama. Arama motoru, 301 kalıcı yeniden yönlendirmenin ne anlama geldiğini bilir, böylece ziyaretleri www ve www içermeyen adreslerle aynı web sitesi sıralamasının altına yerleştirir. Ek olarak, farklı adresler kullanmak önbellek kolaylığının bozulmasına neden olur.Bir sayfanın birkaç adı olduğunda, önbellekte birkaç kez görünebilir.
Bilgiyi genişletin
1) 301 ile 302 arasındaki fark.
Hem 301 hem de 302 durum kodları yeniden yönlendirmeyi gösterir; bu, tarayıcının sunucu tarafından döndürülen durum kodunu aldıktan sonra otomatik olarak yeni bir URL adresine atlayacağı anlamına gelir. Bu adres, yanıtın Konum başlığından (kullanıcının gördüğü) Bunun etkisi, girdiği A adresinin anında başka bir B) adresine dönüşmesidir - ortak noktaları budur.
Farkları ortada. 301, eski A adresinin kaynağının kalıcı olarak kaldırıldığını gösterir (bu kaynağa erişilemez), Arama motorları yeni içeriği tararken, yeniden yönlendirilen URL ile eski URL'yi de değiştirir.
302, eski A adresinin kaynaklarının hala (hala erişilebilir) olduğu anlamına gelir, bu yeniden yönlendirme yalnızca eski A adresinden B adresine geçici bir atlamadır. Arama motorları yeni içeriği tarayacak ve eski URL'yi kaydedecektir. SEO302, 301'den daha iyidir
2) Yeniden yönlendirme nedeni:
(1) Web sitesi ayarı (web sayfası dizininin yapısının değiştirilmesi gibi);
(2) Web sayfası yeni bir adrese taşınır;
(3) Web sayfasının uzantısı değiştirilir (uygulamanın .php'yi .Html veya .shtml olarak değiştirmesi gerekiyorsa).
Bu durumda, yönlendirme yapmazsanız, kullanıcının favorileri veya arama motoru veritabanındaki eski adres, ziyaret eden müşterinin yalnızca 404 sayfa hata mesajı almasına izin verir ve ziyaret trafiği boşuna kaybolur; ayrıca, birden fazla alan adı kayıtlı bazı web siteleri Ayrıca, bu alan adlarını ziyaret eden kullanıcıların da otomatik olarak ana siteye yönlendirilmesi gerekmektedir.
3) 301 veya 302 atlama ne zaman yapılmalıdır?
Bir web sitesi veya web sayfası 24 ila 48 saat içinde geçici olarak yeni bir konuma taşındığında, 302 atlama gerekir ve 301 atlama kullanma sahnesi, önceki web sitesinin bir nedenle kaldırılması gerektiğidir. Yeni adres erişimi kalıcıdır.
Açık olmak gerekirse: 301 atlama kullanmanın genel senaryosu aşağıdaki gibidir:
1. Alan adımı süresi dolduğunda yenilemek istemiyorum (veya web sitesi için daha uygun bir alan adı buldum) ve alan adını değiştirmek istiyorum.
2. Arama motorunun arama sonuçlarında www içermeyen alan adı görünür, ancak www içeren alan adı dahil değildir. Şu anda, arama motoruna hangi alan adını hedeflediğimizi bildirmek için bir 301 yönlendirmesi kullanabilirsiniz.
3. Alan değiştirilirken uzay sunucusu kararsız.
5. Tarayıcı izleme yönlendirme adresi
Artık tarayıcı " adresinin ziyaret edilecek doğru adres olduğunu biliyor ve bu nedenle başka bir http isteği gönderecek. Burada söylenecek bir şey yok
6. Sunucu isteği işler
Önceki adımlardan sonra nihayet http talebimizi sunucuya gönderdik.Aslında önceki yönlendirme sunucuya ulaştı, o halde sunucu talebimizi nasıl işliyor?
Arka uç, sabit bir bağlantı noktasında bir TCP mesajı almaktan başlar, TCP bağlantısını işler, HTTP protokolünü ayrıştırır ve ayrıca bunu, üst katman tarafından kullanılmak üzere mesaj biçimine göre bir HTTP İsteği nesnesine kapsülleştirir.
Bazı büyük web siteleri isteğinizi ters proxy sunucusuna gönderecektir, çünkü web sitesi trafiği çok büyük olduğunda ve web sitesi yavaşladığında ve yavaşladığında, bir sunucu artık yeterli değildir. Dolayısıyla, aynı uygulama birden çok sunucuda konuşlandırılır ve çok sayıda kullanıcı isteği işlenmek üzere birden çok makineye dağıtılır. Bu noktada, istemci HTTP protokolü aracılığıyla bir web sitesi uygulama sunucusuna doğrudan erişmez, ancak önce Nginx, Nginx, daha sonra uygulama sunucusunu ister ve ardından sonucu istemciye döndürür, burada Nginx bir ters proxy sunucusu olarak çalışır. Aynı zamanda, normal çalışan başka sunucular olduğu müddetçe, sunuculardan birinin kapanması kullanıcının kullanımını etkilemeyeceği bir fayda da sağlar.
resim gösterdiği gibi:
Nginx'in ters proxy'si aracılığıyla web sunucusuna ulaşırız, sunucu tarafındaki komut dosyası isteklerimizi işler, veritabanımıza erişir, elde edilmesi gereken içeriği alır vb. Tabi bu süreç arka uç komut dosyalarının birçok karmaşık işlemini içerir. Çünkü buna aşina olmadığım için, bu sadece çok şey tanıtabilir.
7. Sunucu bir HTTP yanıtı döndürür
Önceki 6 adımdan sonra, sunucu talebimizi aldı ve talebimizi işleme koydu.Bu adımda, bir HTPP yanıtı olan işleme sonucunu döndürecektir.
HTTP yanıtı, HTTP isteğine benzer. HTTP yanıtı da 3 bölümden oluşur, yani:
l Durum satırı
l Yanıt Başlığı
l Yanıt birimi
HTTP / 1.1200 Tamam
Tarih: Cmt, 31 Aralık 200523:59:59 GMT
İçerik Türü: metin / html; karakter kümesi = ISO-8859-1
İçerik-Uzunluk: 122 html
head
title http /title
/head body
! - vücut buraya gider -
/body
/html
Durum satırı:
Durum satırı Protokol versiyonu , Dijital Durum kodu Ve karşılık gelen durum tanımlaması , Ve her öğe bir boşlukla ayrılır.
Biçim: HTTP Sürümü Durum Kodu Neden-İfade CRLF
Örneğin: HTTP / 1.1200 Tamam
- Protokol versiyonu Http1.0 veya diğer sürümlerin kullanılıp kullanılmayacağı
- durum tanımlaması : Durum açıklaması, durum kodu hakkında kısa bir metin açıklaması verir. Örneğin, durum kodu 200 olduğunda açıklama uygundur
- Durum kodu : Durum kodu üç haneden oluşur İlk rakam yanıt kategorisini tanımlar ve beş olası değer vardır. aşağıdaki gibi
1xx : Sunucunun istemci talebini aldığını ve istemcinin isteği göndermeye devam edebileceğini belirten bilgilendirici durum kodu.
100 Devam
101 Anahtarlama Protokolleri
2xx : Sunucunun isteği başarıyla aldığını ve işlediğini gösteren başarı durum kodu.
200 OK, müşteri isteğinin başarılı olduğu anlamına gelir
204 Hiçbir İçerik başarılı değil, ancak herhangi bir varlığın gövdesini geri vermiyor
206 Kısmi İçerik, bir aralık (Aralık) isteğini başarıyla yürüttü
3xx : Sunucunun istemcinin yeniden yönlendirmesini gerektirdiğini belirten yeniden yönlendirme durum kodu.
301 Kalıcı Olarak Taşındı Kalıcı olarak yeniden yönlendirme, yanıt mesajının Konum başlığı kaynağın yeni URL'sine sahip olmalıdır
302 Geçici yeniden yönlendirme bulundu, yanıt mesajının Konum başlığında verilen URL, kaynağı geçici olarak bulmak için kullanılır
303 Diğerine Bakın İstenen kaynağın başka bir URI'si var İstemci, istenen kaynağı elde etmek için GET yöntemini kullanmalıdır.
304 Değiştirilmedi sunucu içeriği güncellenmedi, tarayıcı önbelleğini doğrudan okuyabilirsiniz
307 Geçici Yeniden Yönlendirme Geçici yeniden yönlendirme. 302 Found ile aynı anlama sahiptir. 302, POST'un GET'e dönüştürülmesini yasaklar, ancak gerçek kullanımda bu doğru değildir. 307'yi daha fazla tarayıcı izleyebilir, ancak aynı zamanda tarayıcının özel uygulamasına da bağlıdır
4xx : İstemcinin isteğinin yasadışı içerik içerdiğini gösteren istemci hatası durum kodu.
400 Hatalı İstek, istemci isteğinde sözdizimi hatası olduğu ve sunucu tarafından anlaşılamadığı anlamına gelir
401 Yetkilendirilmemiş, isteğin yetkilendirilmediğini gösterir, bu durum kodu WWW-Authenticate başlık alanıyla birlikte kullanılmalıdır
403 Yasak, sunucunun isteği aldığını, ancak hizmeti vermeyi reddettiğini belirtir, genellikle hizmetin sağlanmamasının nedeni yanıt gövdesinde belirtilir
404 Bulunamadı İstenen kaynak mevcut değil, örneğin yanlış bir URL girildi
5xx : Sunucunun istemcinin isteğini işleyemediğini ve beklenmeyen bir hata oluştuğunu gösteren sunucu hata durum kodu.
500 Internel Server Error, sunucuda beklenmedik bir hata oluştuğunu ve istemcinin isteğinin tamamlanamamasına neden olduğunu gösterir.
503 Hizmet Kullanılamıyor, sunucunun şu anda istemcinin isteğini işleyemediği anlamına gelir. Bir süre sonra sunucu normale dönebilir
Yanıt başlığı:
Yanıt başlığı: Her satırda bir çift olmak üzere anahtar kelime / değer çiftlerinden oluşur; anahtar kelime ve değer, İngilizce iki nokta üst üste ":" ile ayrılır. Tipik yanıt başlıkları şunlardır:
Yanıt gövdesi
Çerez, html, resim, arka uç tarafından döndürülen istek verileri gibi ihtiyacımız olan bazı özel bilgileri içerir. Burada, yanıt gövdesi ile yanıt başlığı arasında, yanıt başlığındaki bilgilerin boşlukla bittiğini belirten bir boşluk olduğuna dikkat edilmelidir. Aşağıdaki şekil, kemancı tarafından yakalanan istek gövdesidir ve kırmızı kutudur: Yanıt gövdesi:
8. Tarayıcı HTML görüntülüyor
Tarayıcı, tüm HTML belgelerini tam olarak kabul etmediğinde, bu sayfayı görüntülemeye başlamış demektir Tarayıcı, ekrandaki sayfayı nasıl işler? Farklı tarayıcıların farklı ayrıştırma süreçleri olabilir. Burada yalnızca webkit oluşturma sürecini tanıtıyoruz. Aşağıdaki şekil WebKit'in oluşturma sürecine karşılık gelir. Bu süreç şunları içerir:
Dom ağacı oluşturmak için html ayrıştırın- > Oluşturma ağacını oluşturun > Düzen oluşturma ağacı > Render ağacını çizin
Tarayıcı html dosyasını ayrıştırdığında, dosyayı "yukarıdan aşağıya" yükleyecek ve yükleme işlemi sırasında ayrıştıracak ve işleyecektir. Ayrıştırma sürecinde, resimler, harici CSS, iconfont vb. Gibi harici kaynaklar için isteklerle karşılaşırsanız, istek işlemi eşzamansızdır ve html belgesinin yüklenmesini etkilemez.
Ayrıştırma işlemi sırasında, tarayıcı önce bir DOM ağacı oluşturmak için HTML dosyasını ayrıştırır ve ardından bir işleme ağacı oluşturmak için CSS dosyasını ayrıştırır.Render ağacı oluşturulduktan sonra tarayıcı, oluşturma ağacını düzenlemeye ve ekrana çizmeye başlar. Bu süreç daha karmaşıktır ve iki kavramı içerir: yeniden akış ve yeniden boyama.
DOM düğümündeki her bir öğe, tarayıcının konumunu ve boyutunu hesaplamasını gerektiren bir kutu modeli biçiminde bulunur. Bu işleme relow denir; kutu modelinin konumu, boyutu ve renk, yazı tipi gibi diğer özellikler Karar verildikten sonra tarayıcı içeriği çizmeye başlar bu işleme repain denir.
Sayfa kaçınılmaz olarak yeniden düzenlenecek ve ilk yüklendiğinde yeniden boyutlandırılacaktır. Yeniden düzenleme ve yeniden boyama işlemi, özellikle mobil cihazlarda çok performans tüketir, kullanıcı deneyimini mahveder ve bazen sayfanın donmasına neden olur. Bu yüzden yeniden akışı azaltmalı ve mümkün olduğunca az yeniden doldurmalıyız.
Belge yükleme sırasında bir js dosyasıyla karşılaşıldığında, html belgesi işleme iş parçacığını askıya alır (ayrıştırma ve işleme senkronizasyonu yükle) Yalnızca belgedeki js dosyasının yüklenmesini beklemekle kalmaz, aynı zamanda ayrıştırma ve yürütmenin tamamlanmasını, ardından html belgesinin işleme iş parçacığını da . JS, en klasik document.write olan DOM'u değiştirebileceğinden, bu, JS'nin yürütülmesi tamamlanmadan önce tüm sonraki kaynakların indirilmesi gerekmeyebileceği anlamına gelir. Bu, js'nin sonraki kaynak indirmelerini engellemesinin temel nedenidir. Bu nedenle, her zamanki kodumda js, html belgesinin sonuna yerleştirilir.
JS ayrıştırma, Google'ın V8 gibi tarayıcıdaki JS ayrıştırma motoru tarafından yapılır. JS tek iş parçacıklı bir işlemdir, yani aynı anda yalnızca bir şey yapılabilir, tüm görevlerin sıraya alınması gerekir, önceki görev sona erer ve bir sonraki görev başlayabilir. Bununla birlikte, IO okuma ve yazma gibi zaman alan bazı görevler vardır, bu nedenle daha sonra sıralanan görevleri yürütmek için bir mekanizma gereklidir, bunlar: senkronize görevler (zaman uyumlu) ve zaman uyumsuz görevler (zaman uyumsuz).
JS'nin yürütme mekanizması bir ana iş parçacığı artı bir görev kuyruğu olarak görülebilir. Eşzamanlı görevler, ana iş parçacığında yürütülen görevlerdir ve eşzamansız görevler, görev kuyruğuna yerleştirilen görevlerdir. Tüm senkronize görevler, bir yürütme yığını oluşturmak için ana iş parçacığı üzerinde yürütülür; zaman uyumsuz bir görev, çalışan bir sonucu olduğunda görev kuyruğuna bir olay yerleştirir; komut dosyası çalıştığında, yürütme yığını sırayla çalıştırılır ve ardından olay görev kuyruğundan çıkarılır ve çalıştırılır. Görev kuyruğundaki görevler, bu süreç sürekli olarak tekrarlanır, bu nedenle olay döngüsü (Olay döngüsü) olarak da adlandırılır. Spesifik süreç için lütfen makaleme bakın: buraya tıklayın
9. Tarayıcı, HTML'ye gömülü kaynakları (resimler, ses, video, CSS, JS vb.) Almak için bir istek gönderir.
Aslında, bu adım 8. adımda paralelleştirilebilir. Tarayıcı HTML'yi görüntülediğinde, diğer adreslerin etiketlerini alması gerektiğini fark edecektir. Şu anda, tarayıcı bu dosyaları almak için bir getirme isteği gönderecektir. Örneğin, aşağıdaki bağlantıya benzer harici resimler, CSS, JS dosyaları vb. Almak istiyorum:
Resim:
CSS stil sayfası:
JavaScript dosyası:
Bu adresler, HTML okumaya benzer bir süreçten geçmelidir. Böylece tarayıcı bu alan adlarını DNS'de arayacak, istekleri gönderecek, yönlendirmeler vb.
Dinamik sayfaların aksine, statik dosyalar tarayıcıların bunları önbelleğe almasına izin verir. Bazı dosyaların sunucuyla iletişim kurması gerekmeyebilir, ancak doğrudan önbellekten okunabilir veya CDN'ye yerleştirilebilir
Bu noktada, url girişinden sayfa gösterimine kadar olan süreç nihayet tamamlanmıştır. Tabii ki, yazı sınırlıdır ve hatalar vardır. Bu makaleyi belirtmek isterim.
