advanced web dev quiz下載 - advanced web dev quiz源代碼下載

advanced web dev quiz

網站數據

1.0.0

下載

高級Web開發測驗

此存儲庫與我的前端管理者課程有關。
您會找到問題和其他資源，以更好地了解這些概念。

該高級Web開發測驗涵蓋了Web開發人員每天要處理的各種各樣的事情。目的是（重新）向您介紹您多年來可能已經忘記的某些概念，或者根本不經常接觸過？

玩得開心，希望今天您會學到一些新東西！祝你好運！？

配x此存儲庫不包含答案（！），只有關於問題主題的問題和有用的資源！要查看答案並觀看每個問題的可視化解釋，請觀看“正義”課程！

概述

問題1： async和defer執行訂單
問題2：渲染管道和合成
問題3：解決域請求
問題4：致電堆棧和事件循環
問題5：資源提示
Quesiton 6：對象參考和破壞
問題7： PerformanceNavigationTiming
問題8：緩存指令
問題9：垃圾收集
問題10：動畫成本
問題11：事件傳播
問題12：CSS特異性
問題13： WeakMap
問題14：網絡生命
問題15：內容安全策略
問題16：推薦人政策
問題17：發電機
問題18：承諾方法
問題19：後退緩存
問題20：XSS，MITM，CSRF，Click Jacking
問題21：字體策略
問題22：餅乾
問題23：CSS偽選擇器
問題24： Strict-Transport-Security
問題25：渲染層
問題26：圖像格式
問題27：CORS
問題28：事件循環
問題29：http/1，http/2，http/3
問題30： this關鍵字

所有問題

1。將腳本按正確的執行順序

A. <script defer src="defer1.js" /> （ 300ms加載）
B. <script defer src="defer2.js" /> （ 200ms加載）
C. <script async src="async1.js" /> （ 300ms加載）
D. <script async src="async2.js" /> （ 50ms加載）
E. <script async defer src="asyncdefer1.js" /> （ 60ms加載）

資源

回答：

觀看答案和解釋

進一步閱讀：

https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async
https://javascript.info/script-async-defer
https://developer.mozilla.org/en-us/docs/web/html/element/script

2。哪些陳述為真？

答：渲染樹包含來自DOM和CSOM的所有元素
B.合成是基於z索引分離圖層的過程，然後將其組合成形成屏幕上顯示的最終圖像
C.佈局過程將顏色和圖像分配給渲染樹中的視覺元素
D.堆肥過程發生在合成器線程上
E.頁面上不可見的元素，例如display: hidden ，不是DOM樹的一部分

資源

回答：

觀看答案和解釋

進一步閱讀：

https://www.chromium.org/developers/design-documents/graphics-and-skia/
https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/
https://chromium.googlesource.com/chromium/src/ +/master/docs/how_cc_works.md
https://docs.google.com/presentation/d/1bopxbgnrtu0ddsc14444rcxayga_wf53k96imrh8mp34y
https://developer.chrome.com/blog/inside-browser-part4/
https://www.chromium.org/blink/

3。填補空白

 - Browser sends request to [A]
- [A] queries [B]
- [B] responds with [C] IP address
- [A] queries [C]
- [C] responds with [D] IP address
- [A] queries [D]
- [D] responds with website's [E]

遞歸DNS解析器
根名稱服務器
IP地址
頂級域名服務器
自動名稱服務器

資源

回答：

觀看答案和解釋

進一步閱讀：

https://datatracker.ietf.org/doc/html/rfc1035
https://www.liquidweb.com/kb/how-to-demystify-the-dns-process/
https://www.cloudflare.com/learning/dns/what-is-dns/
https://www.cloudflare.com/learning/dns/what-is-recursive-dns/

4。什麼被記錄了？

 setTimeout ( ( ) => console . log ( 1 ) ) ;
Promise . resolve ( ) . then ( ( ) => console . log ( 2 ) ) ;
Promise . resolve ( ) . then ( ( ) => setTimeout ( ( ) => console . log ( 3 ) ) ;
new Promise ( ( ) => console . log ( 4 ) ) ;
setTimeout ( ( ) => console . log ( 5 ) ) ;

A. 1 2 3 4 5
B. 1 5 2 4 3
C. 3 2 4 1 5
D. 4 2 1 5 3
E. 2 4 3 1 5

資源

回答：

觀看答案和解釋

進一步閱讀：

https://tc39.es/ecma262/#sec-promise-objects
https://dev.to/lydiahallie/javascript-visalized-promises-async-await-5gke
https://developer.mozilla.org/en-us/docs/web/javascript/Reference/global_objects/promise
https://web.dev/promises/
https://javascript.info/promise-basics
https://javascript.info/microtask-queue

5。匹配資源暗示與他們的定義

A. dns-prefetch
B. preconnect
C. prefetch
D. preload

優先考慮當前導航所需的關鍵資源
在後台執行域名分辨率
主動執行DNS分辨率和TCP/TLS握手
在後台請求非關鍵資源

資源

回答：

觀看答案和解釋

進一步閱讀：

https://html.spec.whatwg.org/#linktypes
https://www.chromium.org/developers/design-documents/dns-prefetching/
https://www.smashingmagazine.com/2019/04/optimization-performance-pormance-resource-hints/
https://web.dev/preconnect-and-dns-prefetch/
https://csswizardry.com/2019/01/bandwidth-or-latency-when-to-optimise-when/
https://www.splunk.com/en_us/blog/learn/preconnect-resource-hints.html

6。輸出是什麼？

 const member = { 
  name : "Jane" , 
  address : { street : "101 Main St" }
} ;
const member2 = { ... member } ;
member . address . street = "102 Main St" ;
member . name = "Sarah" ;

console . log ( member2 ) ;

A. { name: "Jane", address: { street: "101 Main St" }}
B. { name: "Jane", address: { street: "102 Main St" }}
C. { name: "Sarah", address: { street: "101 Main St" }}
D. { name: "Sarah", address: { street: "102 Main St" }}

資源

回答：

觀看答案和解釋

進一步閱讀：

https://developer.mozilla.org/en-us/docs/glossary/shallow_copy
https://developer.mozilla.org/en-us/docs/web/javascript/reference/reference/operators/spread_syntax

7。將`PerformanceNavigationTimings`按正確的順序

A. loadEventStart
B. domComplete
C. domContentLoadedEventStart
D. fetchStart
E. connectEnd
F. domInteractive

資源

回答：

觀看答案和解釋

進一步閱讀：

https://www.w3.org/tr/navigation-timing-2/
https://developer.mozilla.org/en-us/docs/web/performance/navigation_and_resource_timings
https://web.dev/navigation-and-resource-timing/

8.將緩存指令與他們的定義匹配

答： no-cache
B. must-revalidate
C. no-store
D. private
E. stale-while-revalidate

使用原始服務器驗證過時的響應之前
在用原始服務器驗證緩存響應時提供過時的內容
不會緩存請求或響應的任何部分
在使用之前，請先用原始服務器驗證緩存的響應，即使它仍然是新鮮的
防止緩存共享的緩存

資源

回答：

觀看答案和解釋

進一步閱讀：

https://www.rfc-editor.org/rfc/rfc9111
https://www.keycdn.com/blog/http-cache-headers
https://www.cloudflare.com/learning/cdn/glossary/what-is-cache-control/

9.此代碼塊是正確的？

 function addMember ( name ) {
  return { name , createdAt : Date . now ( ) }
}

let obj1 = addMember ( "John" ) ;
let obj2 = addMember ( "Sarah" ) ;

obj1 . friend = obj2 ;
obj2 . friend = obj1 ;

obj1 = null ;
obj2 = null ;

A. obj1和obj2無法收集垃圾，導致內存洩漏
B. obj1和obj2將其設置為null後立即收集垃圾
C. obj1和obj2僅在關閉瀏覽器選項卡後才收集垃圾
D. obj1和obj2可以在下一個垃圾收集週期中收集垃圾

資源

回答：

觀看答案和解釋

進一步閱讀：

https://developer.mozilla.org/en-us/docs/web/javascript/memory_management
https://javascript.info/garbage-collection
https://github.com/thlorenz/v8-perf/blob/master/gc.md
https://medium.com/@mmoshikoo/garbage-collector-in-v8-engine-1c582399837

10。在為以下屬性進行動畫時，這些屬性具有正確列出的渲染成本？

A. width ：佈局，油漆，複合材料
B. opacity ：油漆，複合材料
C. background-image ：複合材料
D. left ：佈局，油漆，複合材料
E. transform ：油漆，複合材料

資源

回答：

觀看答案和解釋

進一步閱讀：

https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/
https://developer.chrome.com/blog/inside-browser-part3/
https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/
https://developer.chrome.com/blog/hardware-accelerated-animations/

11.單擊按鈕時記錄了什麼？

 < div class = "outer" >
  < div class = "inner" >
    < button > Click me! </ button >
  </ div >
</ div >

 outer . addEventListener ( "click" , ( ) => log ( "A" ) , true ) ;
outer . addEventListener ( "click" , ( ) => log ( "B" ) ) ;
inner . addEventListener ( "click" , ( ) => log ( "C" ) , true ) ;
inner . addEventListener ( "click" , ( e ) => {
   log ( "D" ) ;
   e . stopPropagation ( ) ;
   log ( "E" ) ;
} ) ;
button . addEventListener ( "click" , ( ) => log ( "F" ) ) ;
button . addEventListener ( "click" , ( ) => log ( "G" ) , true ) ;

A. A B C D E F G
B. A C G F D
C. B D E F G C A
D. A C G F
E. A C G F D E

資源

回答：

觀看答案和解釋

進一步閱讀：

https://www.w3.org/tr/dom-level-2-events/events.html#events-flow
https://javascript.info/bubbling-and-capturing
https://developer.mozilla.org/en-us/docs/web/api/eventtarget/addeventlistener

12.通過升級特異性訂購CSS選擇器

A. div h1.large-text::before
B. div h1:first-child
C. h1:not(.small-text)
D. .large-text:nth-child(1)
E. h1.large-text[id="title"]
F. h1.large-text#title

資源

回答：

觀看答案和解釋

進一步閱讀：

https://www.w3.org/tr/2018/rec-selectors-3-20181106/#specificity
https://developer.mozilla.org/en-us/docs/web/css/specificity
https://specificity.keegan.st/

13.哪些陳述是真的？

 const userTokenMap = new WeakMap ( ) ;

let user = { 
  name : "Jane Doe" , 
  age : 24 
} ;

userTokenMap . set ( user , "secret_token" ) ;

答： userTokenMap實現迭代器協議
B.將user設置為null時， userTokenMap返回0
C.如果將用戶對象設置為null ，則可以收集其userTokenMap條目。
D. [...userTokenMap]返回一系列userTokenMap條目

資源

回答：

觀看答案和解釋

進一步閱讀：

https://read262.netlify.app/keyed-collections/weakmap-objects/
https://javascript.info/weakmap-weakset
https://developer.mozilla.org/en-us/docs/web/javascript/Reference/global_objects/weakmap

14.將網絡生命匹配到正確的描述

A. TTFB
B. FID
C. tti
D. TBT
E. Cls
F. INP

網頁響應用戶的第一個交互所需的時間。
主線程被阻止響應用戶輸入的時間。
用戶與之交互後，網頁更新視覺效果所需的平均時間。
服務器響應請求並開始將數據發送回客戶端所需的時間
網頁滿足並響應用戶輸入所需的時間。
網頁佈局的穩定性或在加載網頁上發生的意外佈局會移動。

資源

回答：

觀看答案和解釋

進一步閱讀：

https://web.dev/metrics/

15。使用以下CSP標頭允許哪些資源？

 default - src "none" ; script - src "self" ; img - src "self" example . com ; style - src fonts . googleapis . com ; font - src fonts . gstatic . com ;

A. <script src="/js/app.js"></script>
B.Fetch fetch("https://api.website.com/data")
C. @font-face { url("fonts/my-font.woff") }
D. <img src="data:image/svg+xml;..." />
E. <style>body { font-family: 'Roboto' }</style>
F. <iframe src="https://embed.example.com"></iframe>
G. <link rel="stylesheet" href="https://fonts.googleapis.com..>
H. <video src="https://videos.example.com/..."></video>

資源

回答：

觀看答案和解釋

進一步閱讀：

https://content-security-policy.com/
https://developer.mozilla.org/en-us/docs/web/http/csp
https://web.dev/csp/

16。哪些陳述為真？

A. rel="noopener"用於防止原始頁面訪問新打開的頁面的window對象
B. rel="noreferrer"可用於防止新打開的頁面訪問原始頁面的window對象
C. rel="noopener"和rel="noreferrer"只能與https一起使用
D. rel="noopener"可用於防止tabnabbing
Referrer-Policy

資源

回答：

觀看答案和解釋

進一步閱讀：

https://www.w3.org/tr/referrer-policy/
https://html.spec.whatwg.org/multipage/links.html#link-type-noopener
https://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer
https://web.dev/referrer-best-practices/

17。什麼時候`"In log: My input!"`登錄？

 function * generatorFunc ( ) {
  const result = yield "My input!" ;
  console . log ( "In log:" , result ) ;
  return "All done!"
} ;

const it = generatorFunc ( ) ;

答： it.next()
B. it.next("My input!") it.next()
C. it.next() it.next("My input!")
D. it.next() it.next()

資源

回答：

觀看答案和解釋

進一步閱讀：

https://developer.mozilla.org/en-us/docs/web/javascript/guide/guide/iterators_and_generators
https://javascript.info/generators
https://exploringjs.com/es6/ch_iteration.html
https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/generator
https://blog.logrocket.com/javascript-iterators-anderators-and-generators-a-complete-guide/

18。將承諾方法連接到正確的輸出

 const promises = [
   new Promise ( res => setTimeout ( ( ) => res ( 1 ) , 200 ) ,
   new Promise ( res => setTimeout ( ( ) => res ( 2 ) , 100 ) ,
   new Promise ( ( _ , rej ) => setTimeout ( ( ) => rej ( 3 ) , 100 ) ,
   new Promise ( res => setTimeout ( ( ) => res ( 4 ) , 300 )
] ;

Promise [ ❓ ]
   . then ( res => console . log ( "Result: " , res ) )
   . catch ( err => console . log ( "Error: " , err )

答： all
B. any
C. race
D. allSettled

Result: 2
Error: 3
Result: [{}, {}, {}, {}]
Result: 2

資源

回答：

觀看答案和解釋

進一步閱讀：

https://javascript.info/promise-basics
https://developer.mozilla.org/en-us/docs/web/javascript/Reference/global_objects/promise

19。以下哪個值總是會使您的頁面不符合BFCACHE的資格？

A. unload
B. pagehide
C. onbeforeunload
D. pageshow
E.以上所有
F.以上都沒有

資源

回答：

觀看答案和解釋

進一步閱讀：

https://web.dev/bfcache/
https://www.smashingmagazine.com/2022/05/performance-game-game-changer-back-forward-cache/
https://nitropack.io/blog/post/back-forward-cache

20。將術語與他們的定義聯繫起來

A. XSS
B. CSRF
C. UI補救
D. Mitm

允許攻擊者將惡意腳本注入其他人查看的網頁
欺騙用戶與偽裝或隱藏元素進行交互
通過利用其身份驗證的會話來欺騙用戶執行不必要的操作
允許攻擊者在不知情的情況下攔截和修改兩方之間的溝通

資源

回答：

觀看答案和解釋

進一步閱讀：

https://owasp.org/www-community/attacks/xss/
https://owasp.org/www-community/attacks/csrf
https://owasp.org/www-community/attacks/clickjacking
https://www.imperva.com/learn/application-security/man-in-the-middle-attack-mitm/
https://cheatsheetseries.owasp.org/cheatsheets/cross-site_request_forgery_prevention_prevention_cheat_cheat_sheet.html
https://cheatsheetseries.owasp.org/cheatsheets/cross_site_scripting_prevention_cheat_cheat_sheet.html

21.將字體策略連接到其定義

A. font-display: block
B. font-display: swap
C. font-display: fallback
D. font-display: optional
E. font-display: auto

暫時渲染隱形字體，直到下載自定義字體
自定義字體下載時使用後備字體，請在可用時切換到自定義字體
僅在可用時使用自定義字體，否則請使用後備字體
允許瀏覽器確定字體加載最合適的行為
使用自定義字體（如果可用），請使用後備字體，如果自定義字體不可用

資源

回答：

觀看答案和解釋

進一步閱讀：

https://developer.mozilla.org/en-us/docs/web/css/@font-face/font-display
https://css-tricks.com/almanac/properties/f/font-display/

22.以下cookie標頭是正確的？

 Set - Cookie : my - cookie = "value" ; Domain = "website.com" ; Secure ; HttpOnly ;

答：可以從www.website.com訪問此cookie，但不能從blog.website.com訪問
B.此cookie只能在website.com上設置客戶端
C.這個餅乾被視為會話餅乾
D.此cookie將從另一個網站導航到www.website.com時發送

資源

回答：

觀看答案和解釋

進一步閱讀：

https://httpwg.org/http-extensions/draft-ietf-httpbis-rfc6265bis.html#name-overview
https://resources.infosecinstitute.com/topic/securing-cookies-httponly-secure-flags/
https://developer.mozilla.org/en-us/docs/web/http/cookies
https://developer.mozilla.org/en-us/docs/web/http/headers/set-cookie

23。我們只能使用哪個CSS（偽）選擇器來定位第一個列表項目`<li>One</li>` ？

 < div >
  < ul >
    < li > One </ li >
    < ul >
      < li > Two </ li >
      < li > Three </ li >
    </ ul >
  </ ul >
  < ul >
    < li > Four </ li >
  </ ul >
</ div >

A. ul:first-child > li
B. ul:first-child + li
C. ul:first-child > li:first-child
D. ul:first-of-type > li:first-of-type
E. ul:first-child + li:first-child

資源

回答：

觀看答案和解釋

進一步閱讀：

https://developer.mozilla.org/en-us/docs/web/css/css_selectors
https://developer.mozilla.org/en-us/docs/web/css/pseudo-classes
https://www.w3.org/tr/selectors-4/#pseudo-classes

24。以下標題是什麼？

 Strict - Transport - Security : max - age = 31536000 ; includeSubdomains ;

答：標題在域及其子域上執行HTTP一年
B.當max-age到期時，瀏覽器將默認為HTTP
C.每次瀏覽器讀取標題時， max-age都會刷新
D.允許向子域的不安全請求

資源

回答：

觀看答案和解釋

進一步閱讀：

https://cheatsheetseries.owasp.org/cheatsheets/http_strict_transport_security_cheat_cheat_sheet.html
https://developer.mozilla.org/en-us/docs/web/http/headers/strict-transport-security

25。以下哪個屬性導致元素被提升為自己的渲染器？

A. z-index: 1
B. translate3d: (0, 0, 0)
C. will-change: transform
D. transform: rotate(45deg)
E. position: fixed
F. position: absolute

資源

回答：

觀看答案和解釋

進一步閱讀：

https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/
https://surma.dev/things/forcing-layers/
https://web.dev/speed-layers/
https://www.chromium.org/developers/design-documents/graphics-and-skia/

26.將圖像格式與描述匹配

A. jpeg
B. PNG
C. WebP
D. Avif

支持HDR和WCG的有損和無損壓縮都支持透明度
有損和無損壓縮，支持透明度，支持漸進式渲染
無損壓縮，高質量，支持透明度，更大的文件大小
有損壓縮，支持漸進式渲染

資源

回答：

觀看答案和解釋

進一步閱讀：

https://developer.mozilla.org/en-us/docs/web/media/formats/image_types
https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/

27。以下CORS配置是什麼？

 Access - Control - Allow - Origin : https : / / www . website . com
Access - Control - Allow - Headers : Content - Type
Access - Control - Allow - Methods : *
Access - Control - Expose - Headers : X - Custom - Header
Access - Control - Max - Age : 600

答：需要前飛行請求
B.僅允許來自https://www.website.com的請求
C.允許使用餅乾的請求
D.實際響應緩存600ms
E. X-Custom-Header將是唯一包含的響應標頭
F. GET ， POST ， PATCH和PUT方法，但不DELETE

資源

回答：

觀看答案和解釋

進一步閱讀：

https://www.w3.org/tr/2020/spsd-cors-20200602/
https://fetch.spec.whatwg.org/#http-cors-protocol
https://developer.mozilla.org/en-us/docs/web/http/cors

28.什麼被記錄？

 setTimeout ( ( ) => console . log ( 1 ) ) ;

( async ( ) => {
  console . log ( 2 ) ;
  await Promise . resolve ( ) ;
  console . log ( 3 ) ;
} ) ( )

Promise . resolve ( ) . then ( ( ) => Promise . resolve ( ) . then ( ( ) => console . log ( 4 ) ) )

A. 1 2 3 4
B. 2 4 3 1
C. 2 3 4 1
D. 2 3 1 4

資源

回答：

觀看答案和解釋

進一步閱讀：

https://tc39.es/ecma262/#sec-promise-objects
https://dev.to/lydiahallie/javascript-visalized-promises-async-await-5gke
https://developer.mozilla.org/en-us/docs/web/javascript/Reference/global_objects/promise
https://web.dev/promises/
https://javascript.info/promise-basics
https://javascript.info/microtask-queue

29。哪些語句正確？

A. HTTP/2允許通過單個TCP連接同時進行多個請求和響應
B. HTTP/3只能與https一起使用
C. HTTP/2與HTTP/1.1向後兼容
D. HTTP/1.1需要多個TCP連接才能同時處理多個請求

資源

回答：

觀看答案和解釋

進一步閱讀：

https://www.section.io/endineering-education/http3-vs-http2/
https://www.cloudflare.com/learning/performance/http2-vs-http1.1/
https://www.cloudflare.com/learning/performance/what-is-http3/

30.什麼被記錄？

 const objA = { 
  type : "A" ,
  foo ( ) { 
    console . log ( this . type ) 
  }
}

const objB = { 
  type : "B" ,
  foo : objA . foo ,
  bar : ( ) => objA . foo ( ) ,
  baz ( ) { objA . foo ( ) }
}

objB . foo ( ) ;
objB . bar ( ) ;
objB . baz ( ) ;

A. A B B
B. B A A
C. A A A
D. A undefined A
E. B undefined B

資源

回答：

觀看答案和解釋

進一步閱讀：

https://tc39.es/ecma262/#sec-function-environment-records-getthisbinding
https://developer.mozilla.org/en-us/docs/web/javascript/reference/reference/operators/this
https://javascript.info/object-methods

展開

附加信息