前端随笔记录(面试题) - 复习复习

前端随笔记录(面试题) - 复习复习

1 从输入一个 URL 地址到浏览器完成渲染的整个过程

• 浏览器地址栏输入 URL 并回车
• 浏览器查找当前 URL 是否存在缓存，并比较缓存是否过期
• DNS 解析 URL 对应的 IP
• 根据 IP 建立 TCP 连接（三次握手）
• 发送 http 请求
• 服务器处理请求，浏览器接受 HTTP 响应
• 浏览器解析并渲染页面
• 关闭 TCP 连接（四次握手）

2 什么是事件代理（事件委托） 有什么好处

• 事件委托的原理：不给每个子节点单独设置事件监听器，而是设置在其父节点上，然后利用冒泡原理设置每个子节点。

优点：

• 减少内存消耗和 dom 操作，提高性能 在 JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的操作dom,那么引起浏览器重绘和回流的可能也就越多，页面交互的事件也就变的越长，这也就是为什么要减少 dom操作的原因。每一个事件处理函数，都是一个对象，多一个事件处理函数，内存中就会被多占用一部分空间。如果要用事件委托，就会将所有的操作放到js 程序里面，只对它的父级进行操作，与 dom 的操作就只需要交互一次，这样就能大大的减少与 dom 的交互次数，提高性能；

动态绑定事件

• 因为事件绑定在父级元素 所以新增的元素也能触发同样的事件

3 addEventListener 默认是捕获还是冒泡

默认是冒泡

• addEventListener第三个参数默认为 false 代表执行事件冒泡行为。
• 当为 true 时执行事件捕获行为。

4 css 的渲染层合成是什么 浏览器如何创建新的渲染层

• 在 DOM 树中每个节点都会对应一个渲染对象（RenderObject），当它们的渲染对象处于相同的坐标空间（z 轴空间）时，就会形成一个RenderLayers，也就是渲染层。渲染层将保证页面元素以正确的顺序堆叠，这时候就会出现层合成（composite），从而正确处理透明元素和重叠元素的显示。对于有位置重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并顺序出错，将会导致元素显示异常。浏览器如何创建新的渲染层

• 根元素 document

• 有明确的定位属性（relative、fixed、sticky、absolute）

• opacity < 1

• 有 CSS fliter 属性

• 有 CSS mask 属性

• 有 CSS mix-blend-mode 属性且值不为 normal

• 有 CSS transform 属性且值不为 none

• backface-visibility 属性为 hidden

• 有 CSS reflection 属性

• 有 CSS column-count 属性且值不为 auto 或者有 CSS column-width 属性且值不为 auto

• 当前有对于 opacity、transform、fliter、backdrop-filter 应用动画

• overflow 不为 visible

5 webpack Plugin 和 Loader 的区别

Loader：

• 用于对模块源码的转换，loader 描述了 webpack 如何处理非 javascript 模块，并且在 buld
  中引入这些依赖。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或者将内联图像转换为data URL。比如说：CSS-Loader，Style-Loader 等。

Plugin

• 目的在于解决 loader 无法实现的其他事,它直接作用于 webpack，扩展了它的功能。在 webpack
  运行的生命周期中会广播出许多事件，plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API改变输出结果。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

6.apply call bind 区别

• 三者都可以改变函数的 this 对象指向。
• 三者第一个参数都是 this 要指向的对象，如果如果没有这个参数或参数为 undefined 或 null，则默认指向全局 window。
• 三者都可以传参，但是 apply 是数组，而 call 是参数列表，且 apply 和 call 是一次性传入参数，而 bind可以分为多次传入。
• bind 是返回绑定 this 之后的函数，便于稍后调用；apply 、call 则是立即执行。
• bind()会返回一个新的函数，如果这个返回的新的函数作为构造函数创建一个新的对象，那么此时 this 不再指向传入给 bind的第一个参数，而是指向用 new 创建的实例

7.http 状态码 204 301 302 304 400 401 403 404 含义

• http 状态码 204 （无内容） 服务器成功处理了请求，但没有返回任何内容
• http 状态码 301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD请求的响应）时，会自动将请求者转到新位置。
• http 状态码 302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
• http 状态码 304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
• http 状态码 400 （错误请求） 服务器不理解请求的语法（一般为参数错误）。
• http 状态码 401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
• http 状态码 403 （禁止） 服务器拒绝请求。（一般为客户端的用户权限不够）
• http 状态码 404 （未找到） 服务器找不到请求的网页。

8.http2.0 做了哪些改进 3.0 呢

http2.0 特性如下

• 二进制分帧传输
• 多路复用
• 头部压缩
• 服务器推送

Http3.0 相对于 Http2.0 是一种脱胎换骨的改变！

http 协议是应用层协议，都是建立在传输层之上的。我们也都知道传输层上面不只有 TCP 协议，还有另外一个强大的协议 UDP 协议，2.0 和 1.0 都是基于 TCP 的，因此都会有 TCP 带来的硬伤以及局限性。而 Http3.0 则是建立在 UDP 的基础上。所以其与 Http2.0 之间有质的不同。
http3.0 特性如下

• 连接迁移
• 无队头阻塞
• 自定义的拥塞控制
• 前向安全和前向纠错

9.osition 有哪些值，作用分别是什么

static

• static(没有定位)是 position 的默认值，元素处于正常的文档流中，会忽略 left、top、right、bottom 和
  z-index 属性。

relative

• relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。
  使用场景：子元素相对于父元素进行定位

absolute

• absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：
• 设置了 absolute 的元素如果存在有祖先元素设置了 position 属性为 relative 或者
  absolute，则这时元素的定位对象为此已设置 position 属性的祖先元素。
• 如果并没有设置了 position 属性的祖先元素，则此时相对于 body 进行定位。
• 使用场景：跟随图标 图标使用不依赖定位父级的 absolute 和 margin
  属性进行定位，这样，当文本的字符个数改变时，图标的位置可以自适应

fixed

• 可以简单说 fixed 是特殊版的 absolute，fixed 元素总是相对于 body 定位的。 使用场景：侧边栏或者广告图

inherit

• 继承父元素的 position 属性，但需要注意的是 IE8 以及往前的版本都不支持 inherit 属性。

sticky

• 设置了 sticky 的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是 top、left
  等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成 fixed，根据设置的 left、top 等属性成固定位置的效果。
• 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了 top: 50px，那么在 sticky
  元素到达距离相对定位的元素顶部 50px 的位置时固定，不再向上移动（相当于此时 fixed 定位）。

使用场景：跟随窗口

10.vue 组件通讯方式有哪些方法

• props 和$emit 父组件向子组件传递数据是通过 prop 传递的，子组件传递数据给父组件是通过$emit 触发事件来做到的
• $parent,$children 获取当前组件的父组件和当前组件的子组件
• $attrs和$listeners A->B->C。Vue 2.4 开始提供了$attrs 和$listeners 来解决这个问题
• 父组件中通过 provide 来提供变量，然后在子组件中通过 inject
  来注入变量。(官方不推荐在实际业务中使用，但是写组件库时很常用)
• $refs 获取组件实例
• envetBus 兄弟组件数据传递 这种情况下可以使用事件总线的方式
• vuex 状态管理

11.路由原理 history 和 hash 两种路由方式的特点

hash 模式

• location.hash 的值实际就是 URL 中#后面的东西 它的特点在于：hash 虽然出现 URL 中，但不会被包含在 HTTP请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

可以为 hash 的改变添加监听事件

window.addEventListener("hashchange", funcRef, false);

• 每一次改变 hash（window.location.hash），都会在浏览器的访问历史中增加一个记录利用 hash的以上特点，就可以来实现前端路由“更新视图但不重新请求页面”的功能了
• 特点：兼容性好但是不美观

history 模式

• 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。
• 这两个方法应用于浏览器的历史记录站，在当前已有的 back、forward、go的基础之上，它们提供了对历史记录进行修改的功能。这两个方法有个共同的特点：当调用他们修改浏览器历史记录栈后，虽然当前 URL改变了，但浏览器不会刷新页面，这就为单页应用前端路由“更新视图但不重新请求页面”提供了基础。

特点：虽然美观，但是刷新会出现 404 需要后端进行配置

12.常用设计模式有哪些并举例使用场景

• 工厂模式 - 传入参数即可创建实例
  虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode
• 单例模式 - 整个程序有且仅有一个实例
  vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉
• 发布-订阅模式 (vue 事件机制)
• 观察者模式 (响应式数据原理)
• 装饰模式: (@装饰器的用法)
• 策略模式 策略模式指对象有某个行为,但是在不同的场景中,该行为有不同的实现方案-比如选项的合并策略

13.flex:1 是哪些属性组成的

• flex 实际上是 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写。

flex-grow：定义项目的的放大比例；

默认为0，即 即使存在剩余空间，也不会放大；
所有项目的flex-grow为1：等分剩余空间（自动放大占位）；
flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。

flex-shrink：定义项目的缩小比例；

默认为1，即 如果空间不足，该项目将缩小；
所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；
flex-shrink为0：空间不足时，该项目不会缩小；
flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。

flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间

默认值为auto，即 项目原本大小；
设置后项目将占据固定空间。

14.babel 是什么，原理了解吗

Babel 是一个 JavaScript 编译器。他把最新版的 javascript 编译成当下可以执行的版本，简言之，利用 babel 就可以让我们在当前的项目中随意的使用这些新最新的 es6，甚至 es7 的语法。
Babel 的三个主要处理步骤分别是： 解析（parse），转换（transform），生成（generate）。

解析

• 将代码解析成抽象语法树（AST），每个 js 引擎（比如 Chrome 浏览器中的 V8 引擎）都有自己的 AST 解析器，而 Babel是通过 Babylon实现的。在解析过程中有两个阶段：词法分析和语法分析，词法分析阶段把字符串形式的代码转换为令牌（tokens）流，令牌类似于 AST中节点；而语法分析阶段则会把一个令牌流转换成 AST 的形式，同时这个阶段会把令牌中的信息转换成 AST 的表述结构。

转换

• 在这个阶段，Babel 接受得到 AST 并通过 babel-traverse对其进行深度优先遍历，在此过程中对节点进行添加、更新及移除操作。这部分也是 Babel 插件介入工作的部分。

生成

• 将经过转换的 AST 通过 babel-generator 再转换成 js 代码，过程就是深度优先遍历整个AST，然后构建可以表示转换后代码的字符串。

15.RAF 和 RIC 是什么

• requestAnimationFrame： 告诉浏览器在下次重绘之前执行传入的回调函数(通常是操纵dom，更新动画的函数)；由于是每帧执行一次，那结果就是每秒的执行次数与浏览器屏幕刷新次数一样，通常是每秒 60 次。
• requestIdleCallback：会在浏览器空闲时间执行回调，也就是允许开发人员在主事件循环中执行低优先级任务，而不影响一些延迟关键事件。如果有多个回调，会按照先进先出原则执行，但是当传入了timeout，为了避免超时，有可能会打乱这个顺序。

最后:希望此文章能帮助到你 一键三连 感谢!!!;