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 no-referrer-when-downgrade

资源

回答：

观看答案和解释

进一步阅读：

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

展开

附加信息