Soru 1: HTTP2'nin çoğullamasını kısaca açıklayın
HTTP / 1'de, her istek bir TCP bağlantısı kuracaktır, buna genellikle 3 yönlü el sıkışma ve 4 el salladı diyoruz. Bu, bir istek sürecinde uzun bir zaman alır. Canlı Tut açık olsa bile çözülür. Birden fazla bağlantı sorunu, ancak yine de iki verimlilik sorunu var:
HTTP2, iletim için ikili bir biçim kullanır, HTTP1.x'in metin biçimini değiştirir ve ikili biçim ayrıştırma daha etkilidir.
Çoklama, HTTP1.x dizisinin ve engelleme mekanizmasının yerini alır.Aynı alan adı için tüm istekler aynı TCP bağlantısı üzerinden eşzamanlı olarak tamamlanır. HTTP1.x'te, eşzamanlı çoklu istekler için birden çok TCP bağlantısı gereklidir.Kaynakları kontrol etmek için, tarayıcının 6-8 TCP bağlantısı sınırı olacaktır.
HTTP2
Detaylı açıklama:
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/14
Soru 2: TCP'nin üç yönlü el sıkışma ve dört yönlü dalga konusundaki anlayışınızdan bahsedin
Detaylı açıklama:
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/15
Soru 3: Makine A ve makine B normal bir şekilde bağlandıktan sonra, makine B aniden yeniden başlar ve şu anda TCP'de A'nın ne durumda olduğunu sorar.
A ve B normal bir bağlantı kurduysa, birbirlerine asla veri göndermemişlerdir.Bu anda, B birden yeniden başlar, A'ya sorun, şu anda TCP'nin durumu nedir? Sunucu programında bu durum nasıl ortadan kaldırılır? (Süper anahat soruları, sadece anlayın)
B, yeniden başlattıktan sonra tcp durum makinesinin dinleme durumuna gireceğinden, bir veri paketini yeniden gönderdiği sürece (ister bir syn paketi ister uygulama verisi olsun), bitiş b, bağlanmak için ilk bit ile aktif olarak bir sıfırlama paketi göndermelidir. Sıfırla, böylece a syn_sent durumunda olmalıdır.
Detaylı açıklama:
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/21
Soru 4: setState React'te ne zaman eşzamanlıdır ve ne zaman eşzamansızdır?
React'te, React tarafından tetiklenen olay işleme ise (onClick tarafından tetiklenen olay işleme gibi), setState'in çağrılması this.state'i eşzamanlı olarak güncellemeyecek ve diğer setState çağrıları this.state'i eşzamanlı olarak yürütecektir. Sözde "ek", React'in doğrudan addEventListener aracılığıyla eklenen olay işleme işlevlerinin yanı sıra setTimeout / setInterval aracılığıyla üretilen eşzamansız çağrıları atlamayı ifade eder.
Sebep: React'in setState işlevinin uygulanmasında, this.state'in doğrudan güncellenip güncellenmeyeceğini veya sıraya koyulacağını belirlemek için bir isBatchingUpdates değişkeni kullanılır. Ardından, varsayılan olan isBatchingUpdates false'tur, bu da setState'in this.state'i senkronize olarak güncelleyeceği anlamına gelir. Bir batchedUpdates işlevi olan bu işlev, isBatchingUpdates'i t rue olarak değiştirir ve React, olay işleyicisini çağırmadan önce bu batchedUpdates'i çağırdığında, sonuç, React tarafından kontrol edilen olay işleme süreci setState, bunu eşzamanlı olarak güncellemeyecektir.
Detaylı açıklama:
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/17
Soru 5: setState yazılı test sorularını yanıtlayın, aşağıdaki kod ne çıktı?
class Example, React.Component { yapıcı () { Süper(); this.state = { val: 0 }; } componentDidMount () { this.setState ({val: this.state.val + 1}); console.log (this.state.val); // İlk günlük this.setState ({val: this.state.val + 1}); console.log (this.state.val); // 2. günlük setTimeout (() = > { this.setState ({val: this.state.val + 1}); console.log (this.state.val); // 3. günlük this.setState ({val: this.state.val + 1}); console.log (this.state.val); // 4. günlük }, 0); } render () { boş döndür; } };Analiz:
1. Birinci ve ikinci zamanlar, kendi reaksiyonunun yaşam döngüsündedir.Tetiklendiğinde, isBatchingUpdates doğrudur, bu nedenle güncelleme durumu doğrudan yürütülmez, ancak dirtyComponents eklenir, bu nedenle yazdırma sırasında güncellemeden önceki durum elde edilir 0.
2. setState iki kez ayarlandığında, this.state.val'in tümü 0'dır, bu nedenle çalıştırıldığında, 0, react içinde birleştirilecek ve yalnızca bir kez yürütülecek olan 1'e ayarlanır. State.val değeri ayarlandıktan sonra 1'dir.
3. setTimeout, isBatchingUpdates'teki kod tetiklendiğinde yanlıştır, bu nedenle doğrudan güncellenebilir, böylece çıkış 2 ve 3 bağlanır.
Çıkış: 00 23
Detaylı açıklama:
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/18
Soru 6: NPM modülü kurulum mekanizmasını tanıtın İlgili modülü npm install yazarak neden otomatik olarak kurabilirim?
Analiz:
1. NPM modülü kurulum mekanizması:
2. NPM uygulama ilkesi
Npm install komutunu girdikten ve enter tuşuna bastıktan sonra, aşağıdaki aşamalardan geçecektir (örnek olarak npm 5.5.1 alınır):
Ön kurulum kancası tanımlanırsa mevcut npm projesi yürütülecektir.
Yapılması gereken ilk şey, projedeki birinci seviye bağımlılıkları, yani doğrudan bağımlılıklar ve devDependencies özniteliklerinde belirtilen modülleri belirlemektir (şu anda npm kurulum parametresinin eklenmediğini varsayarak).
Projenin kendisi, tüm bağımlılık ağacının kök düğümüdür. Her birinci düzey bağımlı modül, kök düğümün altındaki bir alt ağaçtır. Npm, daha derin düğümleri kademeli olarak bulmak için her birinci düzey bağımlı modülden başlayarak çoklu işlemleri başlatacaktır.
Modül edinme, aşağıdaki adımlara bölünmüş yinelemeli bir süreçtir:
Önceki adımda elde ettiğiniz şey, çok sayıda yinelenen modül içerebilen tam bir bağımlılık ağacıdır. Örneğin, modül A lodash'a bağlıdır ve modül B de lodash'a bağlıdır. Npm3'ten önce kurulum, bağımlılık ağacının yapısına tamamen uygun olacak ve bu da modül yedekliliğine neden olacaktır.
Npm3'ten beri varsayılan olarak bir tekilleştirme işlemi eklenmiştir. Tüm düğümleri geçecek ve modülleri tek tek düğüm modüllerinin ilk seviyesi olan kök düğümün altına yerleştirecektir. Yinelenen bir modül bulunduğunda, atılır.
Burada yinelenen modüller için bir tanım yapmanız gerekir; bu, modül adlarının aynı ve semver uyumlu olduğu anlamına gelir. Her bir semver, izin verilen sürüm aralığının bir bölümüne karşılık gelir.İki modülün izin verilen aralıklarının bir kesişimi varsa, aynı sürüm numaralarına sahip olmadan uyumlu bir sürüm elde edilebilir, bu da veri tekilleştirme işleminde daha fazla yedek modülün kaldırılmasına neden olabilir. .
Bu adım, projedeki node_modules'i güncelleyecek ve modüldeki yaşam döngüsü işlevlerini (ön yükleme, yükleme, sonradan yükleme sırasına göre) çalıştıracaktır.
Kanca, mevcut npm projesinde tanımlanmışsa, şu anda çalıştırılacaktır (yükleme, yükleme sonrası, ön yayınlama, hazırlama sırasına göre).
Son adım, sürüm açıklama dosyasını oluşturmak veya güncellemektir ve npm yükleme işlemi tamamlanır.
Detaylı açıklama:
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/22
Soru 7: Diziyi değerlendirmek için aşağıdaki 3 yöntem vardır, lütfen aralarındaki farklılıkları, avantajları ve dezavantajları belirtin
Object.prototype.toString.call (), instanceof ve Array.isArray ()
Analiz:
1. Object.prototype.toString.call ()
Nesneyi miras alan her nesnenin bir toString yöntemi vardır. ToString yöntemi geçersiz kılınmamışsa, türün nesnenin türü olduğu yerde geri dönecektir. Ancak, diğer türler doğrudan toString yöntemini, Object türündeki nesneler dışında kullandığında, tüm içeriği olan bir dizeyi doğrudan döndürür, bu nedenle toString yönteminin yürütme bağlamını değiştirmek için call veya apply yöntemini kullanmamız gerekir.
const an =; an.toString (); // "Merhaba, An" Object.prototype.toString.call (an); // ""Bu yöntem, tüm temel veri türlerini, boş ve tanımlanmamış bile olsa yargılayabilir.
Object.prototype.toString.call ('Bir') // "" Object.prototype.toString.call (1) // "" Object.prototype.toString.call (Symbol (1)) // "" Object.prototype.toString.call (null) // "" Object.prototype.toString.call (tanımsız) // "" Object.prototype.toString.call (function () {}) // "" Object.prototype.toString.call ({name: 'Bir'}) // ""Object.prototype.toString.call () genellikle tarayıcının yerleşik nesnelerini belirlemek için kullanılır.
2. örnek
İnstanceof'un dahili mekanizması, türün prototipinin nesnenin prototip zincirinde bulunup bulunmadığını belirlemektir.
Bir nesnenin bir dizi olup olmadığını belirlemek için instanceof kullanın, instanceof bu nesnenin prototip zincirinde karşılık gelen Array prototipinin bulunup bulunmadığını belirler ve bulunursa true değerini döndürür, aksi takdirde false döndürür.
instanceof Array; // trueAncak instanceof, ilkel türleri değil, yalnızca bir nesnenin türünü belirlemek için kullanılabilir. Ve Object örneğinin tüm nesne türleri doğrudur.
instanceof Object; // true3. Array.isArray ()
Detaylı açıklama:
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/23
Soru 8: Yeniden Boyama ve Yeniden Akıtmaya Giriş ve nasıl optimize edilir
Analiz:
1. Tarayıcı oluşturma mekanizması
2. Yeniden çizin
Düğümün geometrik özellikleri değiştiğinden veya düzen, stilin değişikliğinden etkilenmediğinden, buna anahat, görünürlük, renk, arka plan rengi vb. Gibi yeniden çizim denir. Tarayıcı DOM'u doğrulamak zorunda olduğundan yeniden çizim maliyeti yüksektir. Ağaçtaki diğer düğüm öğelerinin görünürlüğü.
3. Yeniden düzenleme
Yeniden akış, düzen veya geometrik özelliklerin değiştirilmesi gerektiği anlamına gelir ve yeniden akış olarak adlandırılır. Yeniden düzenleme, tarayıcı performansını etkileyen önemli bir faktördür, çünkü değişiklikler sayfanın bir kısmının (veya tüm sayfanın) düzen güncellemesini içerir. Bir öğenin yeniden akıtılması, tüm alt öğelerinin yanı sıra DOM'da onu izleyen düğümlerin ve üst düğüm öğelerinin daha sonra yeniden akışıyla sonuçlanabilir.
< vücut > < div class = "error" > < h4 > Benim bileşen < / h4 > < p > < kuvvetli > hata: < /kuvvetli > Hatanın açıklaması ... < / p > < h5 > Hata düzeltme < / h5 > < ol > < li > ilk adım < / li > < li > İkinci adım < / li > < / ol > < / div > < /vücut >Yukarıdaki HTML pasajında paragraf ( < p > Etiket) yeniden akış, bir alt düğüm olduğu için güçlü bir yeniden akışa neden olur. Bu aynı zamanda ataların yeniden akışına da yol açtı (tarayıcıya bağlı olarak div.error ve body). Ek olarak, < h5 > ile < ol > Ayrıca, bu düğümler DOM'daki yeniden akış öğesinin peşinde olduğundan, basit bir yeniden düzenleme de olacaktır. Yeniden akışın çoğu, sayfanın yeniden oluşturulmasına neden olur.
Yeniden çizmek kesinlikle yeniden çizime neden olur ve yeniden çizmek mutlaka yeniden düzenlemeye neden olmaz.
4. Tarayıcı optimizasyonu
Çoğu modern tarayıcı, düzeni toplu olarak güncellemek için kuyruk mekanizmasını kullanır. Tarayıcı, değişiklik işlemini kuyruğa koyar. En az bir tarayıcı yenilemesi (ör. 16,6 ms) kuyruğu temizler, ancak düzen bilgilerini aldığınızda, kuyruk Bu özelliklerin veya yöntemlerin dönüş değerini etkileyen işlemler olabilir.İşlem olmasa bile, tarayıcı, doğru değerin döndürülmesini sağlamak için kuyruğu zorla temizler, yeniden düzenlemeyi tetikler ve yeniden çizer.
Esas olarak aşağıdaki öznitelikleri veya yöntemleri ekleyin:
Bu nedenle, yukarıdaki özniteliklerin sık kullanımından kaçınmalıyız, bunlar işlemeyi kuyruğu yenilemeye zorlayacaktır.
5. Yeniden çizmeyi ve yeniden düzenlemeyi azaltın
Stili ayarlamanın ilk yolu için tarayıcının yalnızca sayfadaki tüm span etiketlerini bulması ve ardından rengi ayarlaması gerekir, ancak stili ayarlamanın ikinci yolu için tarayıcının önce tüm span etiketlerini bulması ve ardından Span etiketindeki a etiketi ve son olarak div etiketini bulun ve ardından bu koşulu karşılayan span etiketinin rengini ayarlayın Bu yinelemeli işlem çok karmaşıktır. Bu nedenle, olabildiğince çok özel CSS seçicileri yazmaktan kaçınmalı ve ardından düz bir hiyerarşi sağlamak için HTML'ye mümkün olduğunca az anlamsız etiket eklemeliyiz.
Detaylı açıklama:
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/24
Soru 9: Gözlemci modu ile abonelik yayınlama modu arasındaki farkı ve her birinin hangi senaryolara uygulandığını açıklayın
Analiz:
İletişim
Yayınlama-abone olma modeli, gözlemci modelinin bir çeşididir. Yayınla-abone ol, işlevin yalnızca bir kısmını bağımsız bir ChangeManager'da özetlemektedir.
niyet
Bir nesnenin (özne, yayıncı), ona bağlı birden çok nesnenin (gözlemciler, aboneler) bildirilmesi için bir değişikliğidir.
Farklılıklar ve uygulanabilir senaryolar
Genel olarak, yayınlama-abone olma modeli daha karmaşık senaryolar için uygundur.
"Bire çok" senaryosunda, yayıncının belirli bir güncellemesi yalnızca bazı abonelerine haber vermek ister mi?
"Çoktan bire" veya "çoktan çoğa" senaryosunda. Bir abone birden fazla yayıncıya bağlıdır. Bir yayıncı güncellendikten sonra aboneleri bilgilendirmek gerekli midir? Veya aboneleri bilgilendirmeden önce tüm yayıncıların güncellenmesini mi bekleyin?
Bu mantıkların tümü ChangeManager'a yerleştirilebilir.
Detaylı açıklama:
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/25
Soru 10: Redux ve Vuex'in tasarım fikirlerinden bahsedin
Cevabınızı Sorun alanına bırakmaya hoş geldiniz.
Yazar hakkında: NetEase'de kıdemli bir kullanıcı arabirimi mühendisi olan Mu Yiyang, her hafta bir ön yüz görüşmesine odaklanmak için beni takip ediyor. Sizi gelişmiş ön uç dünyasına götürmeme izin verin ve ilerleme yolunda birbirinizi teşvik edeyim!
Gelişmiş makale serisi, yüksek kaliteli ön uç bilgileriyle aşağıdaki şekilde özetlenmiştir:
https://github.com/yygmind/blog
Feragatname: Bu makale yazar tarafından gönderilmiş olup, telif hakkı yazara aittir.