【2022前端笔试总结】8月12日笔试

1、那种请求会因受同源策略限制而加载/提交失败？

• DOM同源策略，禁止不同源进行DOM操作，这里的主要场景是iframe跨域的问题，不同域名的iframe是限制互相访问的。
• 二是XmlHttpRequest同源策略，限制XHR对象向不同资源服务器发起http请求。

不受同源策略影响，可以跨域获取资源的有：

• script、img、link、css标签。
• canvas引入绘图资源会有跨域问题
• iframe引入资源可以允许不同域引入，但操作对应源里面的dom是有跨域问题的。
• form表单提交没有跨域问题（因为原页面用form提交到另一个域名之后，原页面的脚本无法获取新页面中的内容，所以浏览器认为是安全的。）。但ajax提交有跨域问题（因为AJAX可以读取相应内容）。

2、浏览器中监听DOM树更改的Observer是什么？

Mutation Events：

• Mutation Events 是同步执行的，它的每次调用，都需要从事件队列中取出事件，执行，然后事件队列中移除，期间需要移动队列元素。如果事件触发的较为频繁的话，每一次都需要执行上面的这些步骤，那么浏览器会被拖慢。
• Mutation Events 本身是事件，所以捕获是采用的是事件冒泡的形式，如果冒泡捕获期间又触发了其他的 MutationEvents 的话，很有可能就会导致阻塞 Javascript 线程，甚至导致浏览器崩溃。

Mutation observer:

用于代替Mutation events作为观察DOM树结构发生变化时，做出相应处理的API。

Mutation Observer 是在 DOM4 中定义的，用于替代 mutation events 的新 API，它的不同于 events 的是，所有监听操作以及相应处理都是在其他脚本执行完成之后异步执行的，并且是所以变动触发之后，将变得记录在数组中，统一进行回调的。
也就是说，当你使用 observer 监听多个 DOM 变化时，并且这若干个 DOM 发生了变化，那么 observer 会将变化记录到变化数组中，等待一起都结束了，然后一次性的从变化数组中执行其对应的回调函数。

3、即将跳转到下一个页面时，以下哪种能力可以提升资源加载的速度？

浏览器其实提供了两个资源指令preload/prefetch，能够辅助浏览器资源加载的顺序和时机，提升页面性能。

1、 prefetch（链式预取）
是一种浏览器机制，其利用浏览器空闲事件来下载或预取用户在不久的将来可能访问的文档。网页向浏览器提供一组预期提示，并在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。当用户访问其中一个预取文档的时候，就可以快速的从浏览器缓存中得到。
代码书写方式： <link rel="prefetch" href="static/img/ticket_bg.a5bb7c33.png">

2、Preload(预加载)

preload与prefetch同属于浏览器的Resource-Hints，用于辅助浏览器进行资源优化。为了对两者进行区分，prefetch通常翻译为预提取，preload则翻译为预加载。

元素的rel属性的属性值preload能够让你在你的HTML页面中元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。
对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。
代码书写方式：<link rel="preload" as="font" href="<%= require('/assets/fonts/AvenirNextLTPro-Demi.otf') %>" crossorigin>

注意：preload link必须设置as属性来声明资源的类型（font/image/style/script等)，否则浏览器可能无法正确加载资源。

二者的不同：

• preload是为了尽早加载首屏需要的关键资源，从而提升页面渲染性性能。
  • 隐藏在CSS和JavaScript中的资源，如字体文件。本身是首屏关键资源，但当css文件解析之后才会被浏览器加载。这种场景适合使用preload进行声明，尽早进行资源加载，避免页面渲染延迟。
• prefetch声明的是将来可能访问的资源。
  • 适合对异步加载的模块，可能跳转到其他路由页面进行资源缓存；对于一些将来大概率会访问的资源，字体，图片，也适用。

4、quic协议的新特性

是一种基于UDP的传输层协议。
有几个关键特性：

• 链接耗时更短
• 阻塞控制更出色
• 更好的多路复用
• 前向纠错特性
• 链接迁移特性

5、什么是iframe

iframe是html元素，用于在网页内嵌另一个网页。默认有一个宽高并存在边界。iframe是一个行内块级元素，可以通过display进行修改。

iframe的属性：

• src：指定内联网页的地址
• width，height：用于控制iframe的宽高
• scrolling：是否可滚动，yes，no，auto

只有同域才能进行iframe之间的读改写，跨域时，只能进行简单的路由跳转。

 <iframe src="demo_iframe_sandbox.htm"></iframe>

6、web3的新特性

融合了区块链、加密货币和NFT的概念。基于区块链技术，钱包地址识别用户。

web3的核心特性：

• 去中心化
• 人工只能
• 无处不在
• 语义网
• 无中介和无许可

7、关于http状态码说法正确的是？

共分为5大类：

• 100-199：用于代表请求已被接受，需要继续处理。
• 200-299：用于表示请求成功。
• 300-399：用于需要客户端采取进一步的操作才能完成请求。
• 400-499：用于指出客户端的错误。
• 500-599：用于指出服务器错误。

常用的10个HTTP状态码：

• 200：表示成功访问
• 201（已创建）：请求成功并且服务器创建了新的资源。
• 204 （无内容） 服务器成功处理了请求，但没有返回任何内容。
• 301：表示本网页已经永久性的移动到一个新的地址，在客户端自动将请求地址改为服务器返回的新地址。
• 302：临时重定向，表示网页暂时性的转移到一的新的地址，客户端在以后可以继续向本地址发起请求。
• 303：表示必须临时重定向，并且必须使用GET方式请求。
• 304：重定向至浏览器本身，当浏览器多次发起同一请求，且内容未更改时，使用浏览器缓存，这样可以减少网络开销。
• 401：表示协议格式出错，可能是此IP地址被禁止访问该资源，与403类似。
• 403：表示没有权限，服务器拒绝访问请求。
• 404：找不到系统资源
• 500：服务器错误
• 503：服务器繁忙，或服务器负载。

8、排序算法总结

9、TS支持哪些访问修饰符？

• public：公共，可以再任何地方被访问。
• protected：受保护，只在当前类和其子类中被访问（在类的外部无法被访问）
• private：私有，只有在当前类中可以被访问（在子类中或者类的外部都无法被访问）
• 只读修饰符（readonly）：只可读，不可修改。
• 只能再变量初始化，或者constructor构造函数中给readonly修饰的属性赋值。

10、CSS中的层叠上下文可以由以下哪些情况生成（不考虑未声明的样式的影响）？

即当元素在某一位置层叠时，部分元素显示出的优先级更高，部分元素显示的优先级更低。这些元素在网页上堆叠形成三维结构，指向用户的就是z轴。每个页面都有一个默认的层叠上下文，根元素html就是一个层叠上下文，而且其中还可能含有其他的层叠上下文，在同一个层叠上下文中，元素出现的上下顺序叫做层叠等级，决定层叠等级的规则叫做层叠顺序。

做层叠顺序依次从小到大进行排序：

• 背景background
• 边框border
• 常规流块级元素
• 浮动元素float
• 块级元素block
• 行级(内联)元素inline
• z-index为默认值
• 定位元素z-index为0
• z-index为正数(越高显示优先级越高)

满足以下任意一种情况即可创建一个层叠上下文：