面试|80+题复习计划(2022-8)

64. vue-router 全局的 afterEach 守卫钩子先执行，还是组件内的 beforeRouteEnter 钩子先执行？

全局后置守卫钩子 afterEach 先执行，组件内的 beforeRouteEnter 钩子后执行。

完整的导航解析流程(来自 vue-router 官网) 1.导航被触发。 2.在失活的组件里调用 beforeRouteLeave 守卫。 3.调用全局的 beforeEach 守卫。 4.在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。 5.在路由配置里调用 beforeEnter。 6.解析异步路由组件。 7.在被激活的组件里调用 beforeRouteEnter。 8.调用全局的 beforeResolve 守卫(2.5+)。 9.导航被确认。 10.调用全局的 afterEach 钩子。 11.触发 DOM 更新。 12.调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。 复制代码

65. 清除浮动的方式

①使用clear属性清除浮动。

②创建BFC环境，利用BFC的特性，BFC具有 排除外部浮动和包含内部浮动的特性。 例如，通过 display: flow-root， 为元素创建 BFC，从而实现清除元素外部浮动覆盖的影响。

BFC 的产生条件：

• overflow 值不为 visible、clip 的块元素。overflow 的默认值是 visible。
• 绝对定位元素（position 值为 absolute 或 fixed），position 的默认值是 static。
• 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是flex、grid也不是table容器。
• 行内块元素（display 值为 inline-block）
• display 值为 flow-root 的元素。flow-root 可以创建一个无副作用的 BFC，就像 html 根元素那样。 但需注意 flow-root 的兼容性， 它是一个较新的属性，IE 全系列不支持，Chrome58，Firefox53，Edge79开始支持。

66. 典型的可替换元素有哪些？

html 规范上说可以被视为替换元素的有：audio, canvas, embed, iframe, img, input, object, 和video。

developer.mozilla 上列明的典型的可替换元素只有下面几个：

• 'iframe'
• 'video'
• 'embed'
• 'img'

而其他元素仅在特定情况下作为可替换元素处理：

• 'option'
• 'audio'
• 'canvas'
• 'object'
• 'applet'

HTML 规范也说了元素可替换，因为 "image" 类型的元素就像一样被替换。 但是其他形式的控制元素，包括其他类型的元素，被明确地列为非可替换元素（non-replaced elements）。

所以，如果强调典型的可替换元素，那么 iframe，video，embed，img 更合适作为代表。

67. img 标签是块级元素吗？行内元素和块级元素有哪些？行内元素的 padding 和 margin 设置会生效吗？

行内元素：

span, a, i, br, img, button, input, label, select, textarea

b, big, small, tt, abbr, acronym, cite, code, dfn, em, kbd,

strong, samp, var, bdo, map, object, q, script, sub, sup

以下是 HTML 中所有的块级元素列表（虽然”块级“在新的 HTML5 元素中没有明确定义）：

p, div, form, h1-h6, header, footer, ul, ol, table

address, article, aside, blockquote, dd, dl, fieldset, figcaption, figure, hgroup, hr, pre, section,

所以 img 是行业元素，也是典型的可替换元素（replaced element）。

以 span 为例的行内元素的宽高边距有效性： width：无效。 height：无效。 margin：left 和 right 有效，top 和 bottom无效。 padding：left 和 right 有效，top 会覆盖前面的元素，bottom 会和后面的元素重叠。

因为 img 还是可替换元素（replaced element）又称置换元素，所以与 span 不同可设置宽高。

68. js 能改变数组自身的数组方法有哪些？

push()，pop()，shift()，unshift()，splice()，sort()，reverse()是7个可改变自身的数组的方法。 它们主要是通过对数组添加或删除或排序元素，来改变原数组本身。

更多信息-vue源码中重写的7个数组方法

69. 用过 Vue.nextTick 吗？你是怎么理解 Vue.nextTick 的？

用法：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

应用场景：因为 vue 是异步执行 dom 更新的，所以当你希望在更新数据之后，操作新的视图， 那么你的操作逻辑应写在 Vue.nextTick(callback) 的回调中，而这个回调会在dom 更新循环结束之后执行。 否则，因为异步更新 dom 的原因，如果你不是在 Vue.nextTick(callback) 的回调中执行操作新视图， 那么可能会发生意外。例如你在 created()钩子 是不能操作 dom 的，但你可以在此调接口更新数据， 如果你此时希望接口更新完毕数据后，接着调用操作 dom 的逻辑，那么最后将这部分操作 dom 的逻辑， 放置在Vue.nextTick(callback) 的回调函数中。

$nextTick 的原理：

70. 用过 Nginx 吗？对 Nginx 有哪些了解？

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。 Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点（俄文：Рамблер）开发的.

• 反向代理，负载均衡。 有时单台服务器，无法满足大量用户同时访问，需要服务集群以支持，保证应用的可用性。 nginx 做反向代理，可以代理分发，可以使得多台服务器能够平均分担负载。

我用到 nginx 的地方是：

• 一是作为 http 服务器，为我做测试实验，以及一些静态资源提供 http 服务。

• 二通过 nginx 代理实现跨域。

• 三是利用 nginx 的代理转发，实现同一域名下部署多个项目。

• 四是配置黑白名单，限制ip访问 这主要是利用 allow 和 deny 实现

allow xxx.xxx.xxx.xxx; # 允许指定的IP访问，白名单 deny xxx.xxx.xxx.xxx; # 禁止指定的IP访问，黑名单 复制代码

当白名单ip或黑名单ip数量比较多的时候， 可以集中写在 .conf 的文件中，然后通过 include 指令引入

http{ # 禁止 denyip.conf 文件中的ip访问 include /ip/denyip.conf; 
 server{
    location /my-app { # /my-app 下的资源访问白名单： allowip.conf 中的ip include /ip/allowip.conf; 
    }
 }
} 复制代码

• 五是Nginx配置SLL证书

• 六是做一些压缩配置

http{ # 开启压缩 on/off gzip on; # 设置要压缩的文件类型 gzip_types image/gif image/png; # 指定压缩级别，值越大压缩程度越高 gzip_comp_level 3; # 指定开启压缩的最小阈值 gzip_min_length 4k; # 指定压缩请求的缓冲数量和大小 gzip_buffers 10 5k; # 可以指定不开启压缩的客户端类型，例如一些低版本的ie本身不支持压缩  gzip_disable "MSIE [1-5]\."; # 指定压缩处理支持的最低 http 版本 gzip_http_version 1.1; } 复制代码

更多信息-Nginx配置-vue项目打包部署篇

71. 使用过 sass 和 less 吗？使用 CSS 预处理语言的优缺点是什么？

优点： 在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能， 这些拓展令 CSS 更加强大与优雅。提高样式的可维护性，一定程度上可以提高工作效率。

缺点：浏览器“不认识” css 预处理语言，需要预处理工具转换才能在浏览器上生效，重新编译的耗时可能略微大于原生 css。

72. 介绍下 vuex

官网：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex 核心：

• State。共享的的全局的的属性或状态，主要在 state 中声明存放。

• Getter。Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。 注意从 Vue 3.0 开始，getter 的结果不再像计算属性一样会被缓存起来。

• Mutation。更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。 这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

• Action。 Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。

• Module。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

73. 几个浏览器 css 兼容性写法

CSS非标准属性。厂商在实现非标准的CSS属性时，通常会加上前缀，甚至在将来会实现的标准也加。当标准被发布后，厂商会将前缀移除。

• Firefox：-moz-，

• Chrome和Safari： -webkit-，

• IE：-ms-，

• Opera：-o-。

• 书写建议私有属性（非标准）放在前面，标准属性写在后面

下面是一个示例：

-webkit-transform:rotate(-3deg); /* Chrome/Safari */ -moz-transform:rotate(-3deg); /* Firefox */ -ms-transform:rotate(-3deg); /* IE */ -o-transform:rotate(-3deg); /* Opera */ transform:rotate(-3deg); /* 标准属性写在后面 */ 复制代码

74. js脚本一定会阻塞浏览器渲染文档吗？

不一定。

浏览器解析器遇到script脚本的解析逻辑：

1.情形一：页面中引入的script脚本会阻塞浏览器解析渲染文档。

浏览器解析文档时，默认是按照排列顺序向下解析的，当遇到script标签时，和其他标签元素一样（例如一个div）， 会先解析该元素（script脚本），解析完成后再继续向下走完成剩余文档的解析和渲染。也就是说默认情况下，script脚本会阻塞文档的解析渲染。

注意，如果我们的script脚本是放在页面底部的内联脚本，那么它对文档的解析渲染，在结果上影响不大。

但如果script脚本是外部脚本（通过网址引入的那种），那么这个脚本需要下载和解析执行， 这期间会阻塞浏览器对文档的向下解析渲染，直至脚本下载执行完成，才会继续向下解析渲染。如果这个脚本出错了， 可能还会导致整个页面永远无法正常渲染呈现。

注意，DOM树的生成是受JavaScript代码执行影响的，JavaScript代码会“阻塞”页面UI的渲染。

2.情形二：页面中引入的script脚本不会阻塞浏览器解析渲染文档。

情形一中提到的脚本执行的同步和阻塞的情形，是指默认情况下的script脚本加载方式。script标签有两个属性，一个是 defer（暂翻译为延迟）， 二是 async（暂翻译为异步，没错，和我们的常见的ajax和axios的异步是一个意思）， 这两个属性都可以改变脚本的加载执行方式（在浏览器支持的情况下，这两的兼容性，后面会补充）。

defer（延迟）：延迟是指当浏览器解析到 script 脚本时，会继续向下载入和解析文档，等到文档载入解析完成且可以操作文档时，才开始执行脚本。

async（异步）：异步是指当浏览器解析到script脚本时，会立刻下载和执行脚本，但同时浏览器解析器也会继续向下解析渲染文档， 不会造成阻塞的现象。这使得脚本可以尽快的被载入执行，这很想我们前端调用post异步接口，并不影响文档的正常解析渲染。

ps：defer 和 async 属性像是在告诉浏览器，链接进来的脚本不会使用 document.write()，也不会生成文档内容， 因此浏览器在下载脚本时可以继续解析和渲染文档。

值得注意的是，使用 defer 属性的脚本，当有多个的时候， 这些脚本会按照他们在文档中排列的顺序载入执行。而使用 async 属性的脚本，当有多个的时候，会顺序开始触发载入， 但谁先完成载入就谁先执行，这就是说，他们的执行顺序可能是无序不确定的。在有的时候知道这点很重要，因为这可能涉及一些有强制顺序的逻辑处理。

更多信息-js脚本一定会阻塞浏览器渲染文档吗？script标签的async和defer属性

75.line-height 如何继承？

父元素的 line-height 写了具体数值，比如 14px，则子元素 line-height 继承该值。 父元素的 line-height 写了比例，比如 2 或 3，则子元素 line-height 也是继承该比例。 父元素的 line-height 写了百分比，比如 300%，则子元素 line-height 继承的是父元素 font-size * 300% 计算出来的值。

76.数据类型与赋值

JavaScript 语言中类型集合由原始值和对象组成，数据类型有哪些？

js 中的 8 种数据类型： 7种原始值：Undefined、 Null、 Boolean、 Number、 String、 Symbol、 BigInt。 对象：Object。

Symbol es6（ECMA2015） 新增的数据类型。 Symbol 的值具有唯一性，常用用法是定义对象的唯一属性名。 BigInt 可以表示任意大小的整数。BigInt，ECMAScript 2020 新增。

不同数据类型赋值情况

数据类型的判断方法？

typeof：能判断原始值类型（Number，String，Boolean）。不能用于精确判断 null、对象、数组，因为都返回 object 。

var value = null; console.log(typeof value, typeof value === 'object'); // object true value = "hello"; console.log(typeof value, typeof value === 'string'); // string true value = 23; console.log(typeof value, typeof value === 'number'); // number true value = false; console.log(typeof value, typeof value === 'boolean'); // boolean true value = [2] console.log(typeof value, typeof value === 'array'); // object false 复制代码

instanceof：能判断对象类型，不能判断原始值数据类型，其内部运行机制是判断在其原型链中能否找到该类型的原型。

var value = "hello"; console.log(value instanceof String); // false, 不能用于判断原始值类型的数据类型 var value = null; console.log(value instanceof Object); // false, 不能用于判断原始值类型的数据类型 value = [11] console.log(value instanceof Array); // true value = {} console.log(value instanceof Object); // true 复制代码