关于前端:2022秋招前端面试题十附答案

扩大运算符的作用及应用场景

（1）对象扩大运算符

对象的扩大运算符 (…) 用于取出参数对象中的所有可遍历属性，拷贝到以后对象之中。

let bar = {a: 1, b: 2};
let baz = {...bar}; // {a: 1, b: 2}
复制代码

上述办法实际上等价于:

let bar = {a: 1, b: 2};
let baz = Object.assign({}, bar); // {a: 1, b: 2}
复制代码

Object.assign办法用于对象的合并，将源对象 （source） 的所有可枚举属性，复制到指标对象 （target）。Object.assign 办法的第一个参数是指标对象，前面的参数都是源对象。(如果指标对象与源对象有同名属性，或多个源对象有同名属性，则前面的属性会笼罩后面的属性)。

同样，如果用户自定义的属性，放在扩大运算符前面，则扩大运算符外部的同名属性会被笼罩掉。

let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}
复制代码

利用上述个性就能够很不便的批改对象的局部属性。在 redux 中的 reducer 函数规定必须是 一个纯函数 ，reducer 中的 state 对象要求不能间接批改，能够通过扩大运算符把批改门路的对象都复制一遍，而后产生一个新的对象返回。

须要留神：扩大运算符对对象实例的拷贝属于浅拷贝。

（2）数组扩大运算符

数组的扩大运算符能够将一个数组转为用逗号分隔的参数序列，且每次只能开展一层数组。

console.log(...[1, 2, 3])
// 1 2 3
console.log(...[1, [2, 3, 4], 5])
// 1 [2, 3, 4] 5
复制代码

上面是数组的扩大运算符的利用：

• 将数组转换为参数序列

function add(x, y) {return x + y;}
const numbers = [1, 2];
add(...numbers) // 3
复制代码

• 复制数组

const arr1 = [1, 2];
const arr2 = [...arr1];
复制代码

要记住：扩大运算符 (…) 用于取出参数对象中的所有可遍历属性，拷贝到以后对象之中，这里参数对象是个数组，数组外面的所有对象都是根底数据类型，将所有根底数据类型从新拷贝到新的数组中。

• 合并数组

如果想在数组内合并数组，能够这样：

const arr1 = ['two', 'three'];const arr2 = ['one', ...arr1, 'four', 'five'];// ["one", "two", "three", "four", "five"]
复制代码

• 扩大运算符与解构赋值联合起来，用于生成数组

const [first, ...rest] = [1, 2, 3, 4, 5];first // 1rest  // [2, 3, 4, 5]
复制代码

须要留神：如果将扩大运算符用于数组赋值，只能放在参数的最初一位，否则会报错。

const [...rest, last] = [1, 2, 3, 4, 5];         // 报错 const [first, ...rest, last] = [1, 2, 3, 4, 5];  // 报错
复制代码

• 将字符串转为真正的数组

[...'hello']    // ["h", "e", "l", "l", "o"]
复制代码

• 任何 Iterator 接口的对象，都能够用扩大运算符转为真正的数组

比拟常见的利用是能够将某些数据结构转为数组：

// arguments 对象
function foo() {const args = [...arguments];
}
复制代码

用于替换 es5 中的 Array.prototype.slice.call(arguments) 写法。

• 应用 Math 函数获取数组中特定的值

const numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
Math.max(...numbers); // 9
复制代码

陈说输出 URL 回车后的过程

1. 读取缓存：搜寻本身的 DNS 缓存。(如果 DNS 缓存中找到 IP 地址就跳过了接下来查找 IP 地址步骤，间接拜访该 IP 地址。)
2.DNS 解析: 将域名解析成 IP 地址
3.TCP 连贯：TCP 三次握手，繁难形容三次握手
           客户端：服务端你在么？服务端：客户端我在，你要连贯我么？客户端：是的服务端，我要链接。连贯买通，能够开始申请来
4. 发送 HTTP 申请
5. 服务器解决申请并返回 HTTP 报文
6. 浏览器解析渲染页面
7. 断开连接：TCP 四次挥手

对于第六步浏览器解析渲染页面又能够聊聊如果返回的是 html 页面
依据 HTML 解析出 DOM 树
依据 CSS 解析生成 CSS 规定树
联合 DOM 树和 CSS 规定树，生成渲染树
依据渲染树计算每一个节点的信息
依据计算好的信息绘制页面
复制代码

vue-router

vue-router 是 vuex.js 官网的路由管理器，它和 vue.js 的外围深度集成，让构建但页面利用变得大海捞针

<router-link> 组件反对用户在具备路由性能的利用中 (点击) 导航。通过 to 属性指定指标地址

<router-view> 组件是一个 functional 组件，渲染门路匹配到的视图组件。<keep-alive> 组件是一个用来缓存组件

router.beforeEach

router.afterEach

to: Route: 行将要进入的指标 路由对象

from: Route: 以后导航正要来到的路由

next: Function: 肯定要调用该办法来 resolve 这个钩子。执行成果依赖 next 办法的调用参数。介绍了路由守卫及用法，在我的项目中路由守卫起到的作用等等
复制代码

说一下常见的 git 操作

git branch 查看本地所有分支
git status 查看以后状态 
git commit 提交 
git branch -a 查看所有的分支
git branch -r 查看近程所有分支
git commit -am "nit" 提交并且加正文 
git remote add origin git@192.168.1.119:ndshow
git push origin master 将文件给推到服务器上 
git remote show origin 显示近程库 origin 里的资源 
git push origin master:develop
git push origin master:hb-dev 将本地库与服务器上的库进行关联 
git checkout --track origin/dev 切换到近程 dev 分支
git branch -D master develop 删除本地库 develop
git checkout -b dev 建设一个新的本地分支 dev
git merge origin/dev 将分支 dev 与以后分支进行合并
git checkout dev 切换到本地 dev 分支
git remote show 查看近程库
git add .
git rm 文件名(包含门路) 从 git 中删除指定文件
git clone git://github.com/schacon/grit.git 从服务器上将代码给拉下来
git config --list 看所有用户
git ls-files 看曾经被提交的
git rm [file name] 删除一个文件
git commit -a 提交以后 repos 的所有的扭转
git add [file name] 增加一个文件到 git index
git commit -v 当你用-v 参数的时候能够看 commit 的差别
git commit -m "This is the message describing the commit" 增加 commit 信息
git commit -a - a 是代表 add，把所有的 change 加到 git index 里而后再 commit
git commit -a -v 个别提交命令
git log 看你 commit 的日志
git diff 查看尚未暂存的更新
git rm a.a 移除文件(从暂存区和工作区中删除)
git rm --cached a.a 移除文件(只从暂存区中删除)
git commit -m "remove" 移除文件(从 Git 中删除)
git rm -f a.a 强行移除批改后文件(从暂存区和工作区中删除)
git diff --cached 或 $ git diff --staged 查看尚未提交的更新
git stash push 将文件给 push 到一个长期空间中
git stash pop 将文件从长期空间 pop 下来

JS 闭包，你理解多少？

应该有面试官问过你：

1. 什么是闭包？
2. 闭包有哪些理论使用场景？
3. 闭包是如何产生的？
4. 闭包产生的变量如何被回收？

这些问题其实都能够被看作是同一个问题，那就是面试官在问你：你对 JS 闭包理解多少？

来总结一下我听到过的答案，尽量齐全还原候选人面试的时候说的原话。

答案 1: 就是一个 function 外面 return 了一个子函数，子函数拜访了里面那个函数的变量。

答案 2: for 循环外面能够用闭包来解决问题。

for(var i = 0; i < 10; i++){setTimeout(()=>console.log(i),0)
}
// 控制台输入 10 遍 10.
for(var i = 0; i < 10; i++){(function(a){setTimeout(()=>console.log(a),0)
    })(i)
}
 // 控制台输入 0 -9
复制代码

答案 3： 以后作用域产产生了对父作用域的援用。

答案 4： 不晓得。是跟浏览器的垃圾回收机制无关吗？

开杠了。请问，小伙伴的答案和以上的内容有多少类似水平？

其实，拿着这些问题好好想想，你就会发现这些问题都只是为了最终那一个问题。

闭包的底层实现原理

1. JS 执行上下文

咱们都晓得，咱们手写的 js 代码是要通过浏览器 V8 进行预编译后能力真正的被执行。例如变量晋升、函数晋升。举个栗子。

// 栗子：var d = 'abc';
function a(){console.log("函数 a");
};
console.log(a);   // ƒ a(){ console.log("函数 a"); }
a();              // '函数 a'
var a = "变量 a";  
console.log(a);   // '变量 a'
a();              // a is not a function
var c = 123;

// 输入后果及程序：// ƒ a(){ console.log("函数 a"); }
// '函数 a'
// '变量 a'
// a is not a function

// 栗子预编后相当于：function a(){console.log("函数 a");
};
var d;
console.log(a);  // ƒ a(){ console.log("函数 a"); }
a();              // '函数 a'

a = "变量 a";     // 此时变量 a 赋值，函数申明被笼罩

console.log(a); // "变量 a"
a();         // a is not a function

复制代码

那么问题来了。请问是谁来执行预编译操作的？那这个谁又是在哪里进行预编译的？

是的，你的纳闷没有错。js 代码运行须要一个运行环境，那这个环境就是 执行上下文。是的，js 运行前的预编译也是在这个环境中进行。

js 执行上下文分三种：

• 全局执行上下文：代码开始执行时首先进入的环境。
• 函数执行上下文：函数调用时，会开始执行函数中的代码。
• eval 执行上下文：不倡议应用，可疏忽。

那么，执行上下文的周期，分为两个阶段：

• 创立阶段

  • 创立词法环境
  • 生成变量对象 (VO)，建设 作用域链 、 作用域链 、 作用域链（重要的事说三遍）
  • 确认 this 指向，并绑定this
• 执行阶段。这个阶段进行变量赋值，函数援用及执行代码。

你当初猜猜看，预编译是产生在什么时候？

噢，我遗记说了，其实与编译还有另一个称说：执行期上下文。

预编译产生在函数执行之前。预编译四部曲为：

1. 创立 AO 对象
2. 找形参和变量申明，将变量和形参作为 AO 属性名，值为undefined
3. 将实参和形参相对立
4. 在函数体里找到函数申明，值赋予函数体。最初程序输入变量值的时候，就是从 AO 对象中拿。

所以，预编译真正的后果是：

var AO = {a = function a(){console.log("函数 a");};
    d = 'abc'
}
复制代码

咱们从新来。

1. 什么叫变量对象？

变量对象是 js 代码在进入执行上下文时，js 引擎在内存中建设的一个对象，用来寄存以后执行环境中的变量。

2. 变量对象 (VO) 的创立过程

变量对象的创立，是在执行上下文创立阶段，顺次通过以下三个过程：

• 创立 arguments 对象。

  对于函数执行环境，首先查问是否有传入的实参，如果有，则会将参数名是实参值组成的键值对放入 arguments 对象中。否则，将参数名和 undefined 组成的键值对放入 arguments 对象中。

// 举个栗子 
function bar(a, b, c) {console.log(arguments);  // [1, 2]
    console.log(arguments[2]); // undefined
}
bar(1,2)
复制代码

• 当遇到同名的函数时，前面的会笼罩后面的。

console.log(a); // function a() {console.log('Is a ?') }
function a() {console.log('Is a');
}
function a() {console.log('Is a ?')
}

/**ps: 在执行第一行代码之前，函数申明曾经创立实现. 前面的对之前的申明进行了笼罩。**/
复制代码

• 查看以后环境中的变量申明并赋值为 undefined。当遇到同名的函数申明， 为了防止函数被赋值为 undefined , 会疏忽此申明

console.log(a); // function a() {console.log('Is a ?') }
console.log(b); // undefined
function a() {console.log('Is a');
}
function a() {console.log('Is a ?');
}
var b = 'Is b';
var a = 10086;

/** 这段代码执行一下，你会发现 a 打印后果仍旧是一个函数，而 b 则是 undefined。**/
复制代码

依据以上三个步骤，对于变量晋升也就晓得是怎么回事了。

3. 变量对象变为流动对象

执行上下文的第二个阶段，称为执行阶段，在此时，会进行变量赋值，函数援用并执行其余代码，此时，变量对象变为流动对象。

咱们还是举下面的例子：

console.log(a); // function a() {console.log('fjdsfs') }
console.log(b); // undefined
function a() {console.log('Is a');
}
function a() {console.log('Is a?');
}
var b = 'Is b';
console.log(b); // 'Is b'
var a = 10086; 
console.log(a);  // 10086
var b = 'Is b?';
console.log(b); // 'Is b?'
复制代码

在下面的代码中，代码真正开始执行是从第一行 console.log() 开始的，自这之前，执行上下文是这样的：

// 创立过程
EC= {VO：{}; // 创立变量对象
  scopeChain: {}; // 作用域链}
VO = {argument: {...}; // 以后为全局上下文，所以这个属性值是空的
  a: <a reference> // 函数 a  的援用地址  b: undefiend  // 见上文创立变量对象的第三步}

复制代码

词法作用域（Lexical scope）

这里想阐明，咱们在函数执行上下文中有变量，在全局执行上下文中有变量。JavaScript的一个简单之处在于它如何查找变量，如果在函数执行上下文中找不到变量，它将在调用上下文中寻找它，如果在它的调用上下文中没有找到，就始终往上一级，直到它在全局执行上下文中查找为止。(如果最初找不到，它就是 undefined)。

再来举个栗子：

 1: let top = 0; // 
 2: function createWarp() {3:   function add(a, b) {
 4:     let ret = a + b
 5:     return ret
 6:   }
 7:   return add
 8: }
 9: let sum = createWarp()
10: let result = sum(top, 8)
11: console.log('result:',result)


复制代码

剖析过程如下：

• 在全局上下文中申明变量top 并赋值为 0.
• 2 – 8 行。在全局执行上下文中申明了一个名为 createWarp 的变量，并为其调配了一个函数定义。其中第 3 - 7 行形容了其函数定义，并将函数定义存储到那个变量 (createWarp) 中。
• 第 9 行。咱们在全局执行上下文中申明了一个名为 sum 的新变量，临时，值为 undefined。
• 第 9 行。遇到 ()，表明须要执行或调用一个函数。 那么查找全局执行上下文的内存并查找名为 createWarp 的变量。 显著，曾经在步骤 2 中创立结束。接着，调用它。
• 调用函数时，回到第 2 行。创立一个新的 createWarp 执行上下文。咱们能够在 createWarp 的执行上下文中创立自有变量。js 引擎createWarp 的上下文增加到调用堆栈（call stack）。因为这个函数没有参数，间接跳到它的主体局部.
• 3 – 6 行。咱们有一个新的函数申明，在 createWarp 执行上下文中创立一个变量 add。add 只存在于 createWarp 执行上下文中, 其函数定义存储在名为 add 的自有变量中。
• 第 7 行，咱们返回变量 add 的内容。js 引擎查找一个名为 add 的变量并找到它. 第 4 行和第 5 行括号之间的内容形成该函数定义。
• createWarp 调用结束，createWarp 执行上下文将被销毁。add 变量也跟着被销毁。 但 add 函数定义依然存在，因为它返回并赋值给了 sum 变量。（ps: 这才是闭包产生的变量存于内存当中的假相）
• 接下来就是简略的执行过程，不再赘述。。
• ……
• 代码执行结束，全局执行上下文被销毁。sum 和 result 也跟着被销毁。

小结一下

当初，如果再让你答复什么是闭包，你能答出多少？

其实，大家说的都对。不论是函数返回一个函数，还是产生了内部作用域的援用，都是有情理的。

所以，什么是闭包？

• 解释一下作用域链是如何产生的。
• 解释一下 js 执行上下文的创立、执行过程。
• 解释一下闭包所产生的变量放在哪了。
• 最初请把以上 3 点联合起来说给面试官听。

说一下怎么把类数组转换为数组?

// 通过 call 调用数组的 slice 办法来实现转换
Array.prototype.slice.call(arrayLike)

// 通过 call 调用数组的 splice 办法来实现转换
Array.prototype.splice.call(arrayLike,0)

// 通过 apply 调用数组的 concat 办法来实现转换
Array.prototype.concat.apply([],arrayLike)

// 通过 Array.from 办法来实现转换
Array.from(arrayLike)
复制代码

ES6 新个性

1.ES6 引入来严格模式
    变量必须申明后在应用
    函数的参数不能有同名属性, 否则报错
    不能应用 with 语句 (说实话我根本没用过)
    不能对只读属性赋值, 否则报错
    不能应用前缀 0 示意八进制数, 否则报错 (说实话我根本没用过)
    不能删除不可删除的数据, 否则报错
    不能删除变量 delete prop, 会报错, 只能删除属性 delete global[prop]
    eval 不会在它的外层作用域引入变量
    eval 和 arguments 不能被从新赋值
    arguments 不会主动反映函数参数的变动
    不能应用 arguments.caller (说实话我根本没用过)
    不能应用 arguments.callee (说实话我根本没用过)
    禁止 this 指向全局对象
    不能应用 fn.caller 和 fn.arguments 获取函数调用的堆栈 (说实话我根本没用过)
    减少了保留字（比方 protected、static 和 interface）2. 对于 let 和 const 新增的变量申明

3. 变量的解构赋值

4. 字符串的扩大
    includes()：返回布尔值，示意是否找到了参数字符串。startsWith()：返回布尔值，示意参数字符串是否在原字符串的头部。endsWith()：返回布尔值，示意参数字符串是否在原字符串的尾部。5. 数值的扩大
    Number.isFinite()用来查看一个数值是否为无限的（finite）。Number.isNaN()用来查看一个值是否为 NaN。6. 函数的扩大
    函数参数指定默认值
7. 数组的扩大
    扩大运算符
8. 对象的扩大
    对象的解构
9. 新增 symbol 数据类型

10.Set 和 Map 数据结构 
    ES6 提供了新的数据结构 Set。它相似于数组，然而成员的值都是惟一的，没有反复的值。Set 自身是一个构造函数，用来生成 Set 数据结构。Map 它相似于对象，也是键值对的汇合，然而“键”的范畴不限于字符串，各种类型的值（包含对象）都能够当作键。11.Proxy
    Proxy 能够了解成，在指标对象之前架设一层“拦挡”，外界对该对象的拜访
    都必须先通过这层拦挡，因而提供了一种机制，能够对外界的拜访进行过滤和改写。Proxy 这个词的原意是代理，用在这里示意由它来“代理”某些操作，能够译为“代理器”。Vue3.0 应用了 proxy
12.Promise
    Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更正当和更弱小。特点是：对象的状态不受外界影响。一旦状态扭转，就不会再变，任何时候都能够失去这个后果。13.async 函数 
    async 函数对 Generator 函数的区别：（1）内置执行器。Generator 函数的执行必须靠执行器，而 async 函数自带执行器。也就是说，async 函数的执行，与一般函数截然不同，只有一行。（2）更好的语义。async 和 await，比起星号和 yield，语义更分明了。async 示意函数里有异步操作，await 示意紧跟在前面的表达式须要期待后果。（3）失常状况下，await 命令前面是一个 Promise 对象。如果不是，会被转成一个立刻 resolve 的 Promise 对象。（4）返回值是 Promise。async 函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象不便多了。你能够用 then 办法指定下一步的操作。14.Class 
    class 跟 let、const 一样：不存在变量晋升、不能反复申明...
    ES6 的 class 能够看作只是一个语法糖，它的绝大部分性能
    ES5 都能够做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。15.Module
    ES6 的模块主动采纳严格模式，不论你有没有在模块头部加上 "use strict";。import 和 export 命令以及 export 和 export default 的区别
复制代码

HTML5 有哪些更新

1. 语义化标签

• header：定义文档的页眉（头部）；
• nav：定义导航链接的局部；
• footer：定义文档或节的页脚（底部）；
• article：定义文章内容；
• section：定义文档中的节（section、区段）；
• aside：定义其所处内容之外的内容（侧边）；

2. 媒体标签

（1）audio：音频

<audio src=''controls autoplay loop='true'></audio>
复制代码

属性：

• controls 控制面板
• autoplay 自动播放
• loop=‘true’循环播放

（2）video 视频

<video src=''poster='imgs/aa.jpg' controls></video>
复制代码

属性：

• poster：指定视频还没有齐全下载结束，或者用户还没有点击播放前显示的封面。默认显示以后视频文件的第一针画面，当然通过 poster 也能够本人指定。
• controls 控制面板
• width
• height

（3）source 标签
因为浏览器对视频格式反对水平不一样，为了可能兼容不同的浏览器，能够通过 source 来指定视频源。

<video>
     <source src='aa.flv' type='video/flv'></source>
     <source src='aa.mp4' type='video/mp4'></source>
</video>
复制代码

3. 表单

表单类型：

• email：可能验证以后输出的邮箱地址是否非法
• url：验证 URL
• number：只能输出数字，其余输出不了，而且自带高低增大减小箭头，max 属性能够设置为最大值，min 能够设置为最小值，value 为默认值。
• search：输入框前面会给提供一个小叉，能够删除输出的内容，更加人性化。
• range：能够提供给一个范畴，其中能够设置 max 和 min 以及 value，其中 value 属性能够设置为默认值
• color：提供了一个色彩拾取器
• time：时分秒
• data：日期抉择年月日
• datatime：工夫和日期(目前只有 Safari 反对)
• datatime-local：日期工夫控件
• week：周控件
• month：月控件

表单属性：

• placeholder：提示信息
• autofocus：主动获取焦点

• autocomplete=“on”或者 autocomplete=“off”应用这个属性须要有两个前提：

  • 表单必须提交过
  • 必须有 name 属性。
• required：要求输入框不能为空，必须有值才可能提交。
• pattern=” ” 外面写入想要的正则模式，例如手机号 patte=”^(+86)?\d{10}$”
• multiple：能够抉择多个文件或者多个邮箱
• form=” form 表单的 ID”

表单事件：

• oninput 每当 input 里的输入框内容发生变化都会触发此事件。
• oninvalid 当验证不通过时触发此事件。

4. 进度条、度量器

• progress 标签：用来示意工作的进度（IE、Safari 不反对），max 用来示意工作的进度，value 示意已实现多少

• meter 属性：用来显示残余容量或残余库存（IE、Safari 不反对）

  • high/low：规定被视作高 / 低的范畴
  • max/min：规定最大 / 小值
  • value：规定以后度量值

设置规定：min < low < high < max

5.DOM 查问操作

• document.querySelector()
• document.querySelectorAll()

它们抉择的对象能够是标签，能够是类(须要加点)，能够是 ID(须要加 #)

6. Web 存储

HTML5 提供了两种在客户端存储数据的新办法：

• localStorage – 没有工夫限度的数据存储
• sessionStorage – 针对一个 session 的数据存储

7. 其余

• 拖放：拖放是一种常见的个性，即抓取对象当前拖到另一个地位。设置元素可拖放：

<img draggable="true" />
复制代码

• 画布（canvas）：canvas 元素应用 JavaScript 在网页上绘制图像。画布是一个矩形区域，能够管制其每一像素。canvas 领有多种绘制门路、矩形、圆形、字符以及增加图像的办法。

<canvas id="myCanvas" width="200" height="100"></canvas>
复制代码

• SVG：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，应用 XML 格局定义图形，图像在放大或扭转尺寸的状况下其图形品质不会有损失，它是万维网联盟的规范
• 天文定位：Geolocation（天文定位）用于定位用户的地位。‘

总结：（1）新增语义化标签：nav、header、footer、aside、section、article
（2）音频、视频标签：audio、video
（3）数据存储：localStorage、sessionStorage
（4）canvas（画布）、Geolocation（天文定位）、websocket（通信协议）
（5）input 标签新增属性：placeholder、autocomplete、autofocus、required
（6）history API：go、forward、back、pushstate

移除的元素有：

• 纯体现的元素：basefont，big，center，font, s，strike，tt，u;
• 对可用性产生负面影响的元素：frame，frameset，noframes；

position 的属性有哪些，区别是什么

position 有以下属性值：

后面三者的定位形式如下：

• relative： 元素的定位永远是绝对于元素本身地位的，和其余元素没关系，也不会影响其余元素。
• fixed： 元素的定位是绝对于 window（或者 iframe）边界的，和其余元素没有关系。然而它具备破坏性，会导致其余元素地位的变动。
• absolute： 元素的定位绝对于前两者要简单许多。如果为 absolute 设置了 top、left，浏览器会依据什么去确定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了 position:relative/absolute/fixed 的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。如下两个图所示：

HTML5 的离线贮存怎么应用，它的工作原理是什么

离线存储指的是：在用户没有与因特网连贯时，能够失常拜访站点或利用，在用户与因特网连贯时，更新用户机器上的缓存文件。

原理：HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展现

应用办法：（1）创立一个和 html 同名的 manifest 文件，而后在页面头部退出 manifest 属性：

<html lang="en" manifest="index.manifest">
复制代码

（2）在 cache.manifest 文件中编写须要离线存储的资源：

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html
复制代码

• CACHE: 示意须要离线存储的资源列表，因为蕴含 manifest 文件的页面将被主动离线存储，所以不须要把页面本身也列出来。
• NETWORK: 示意在它上面列出来的资源只有在在线的状况下能力拜访，他们不会被离线存储，所以在离线状况下无奈应用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个雷同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
• FALLBACK: 示意如果拜访第一个资源失败，那么就应用第二个资源来替换他，比方下面这个文件示意的就是如果拜访根目录下任何一个资源失败了，那么就去拜访 offline.html。

（3）在离线状态时，操作 window.applicationCache 进行离线缓存的操作。

如何更新缓存：

（1）更新 manifest 文件

（2）通过 javascript 操作

（3）革除浏览器缓存

注意事项：

（1）浏览器对缓存数据的容量限度可能不太一样（某些浏览器设置的限度是每个站点 5MB）。

（2）如果 manifest 文件，或者外部列举的某一个文件不能失常下载，整个更新过程都将失败，浏览器持续全副应用老的缓存。

（3）援用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。

（4）FALLBACK 中的资源必须和 manifest 文件同源。

（5）当一个资源被缓存后，该浏览器间接申请这个绝对路径也会拜访缓存中的资源。

（6）站点中的其余页面即便没有设置 manifest 属性，申请的资源如果在缓存中也从缓存中拜访。

（7）当 manifest 文件产生扭转时，资源申请自身也会触发更新。

v-model 语法糖是怎么实现的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- v-model 只是语法糖而已 -->
    <!-- v-model 在外部为不同的输出元素应用不同的 property 并抛出不同的事件 -->
    <!-- text 和 textarea 元素应用 value property 和 input 事件 -->
    <!-- checkbox 和 radio 应用 checked  property 和 change 事件 -->
    <!-- select 字段将 value 作为 prop 并将 change 作为事件 -->
    <!-- 留神：对于须要应用输入法 (如中文、日文、韩文等) 的语言，你将会发现 v -model 不会再输入法    组合文字过程中失去更新 -->
    <!-- 再一般标签上 -->
    <input v-model="sth" />  // 这一行等于下一行
    <input v-bind:value="sth" v-on:input="sth = $event.target.value" />
    <!-- 再组件上 -->
    <currency-input v-model="price"></currentcy-input>
        <!-- 上行代码是上行的语法糖         <currency-input :value="price" @input="price = arguments[0]"></currency-input>        --> 
        <!-- 子组件定义 -->
        Vue.component('currency-input', {
         template: `
          <span>
           <input
            ref="input"
            :value="value"
            @input="$emit('input', $event.target.value)"
           >
          </span>
         `,
         props: ['value'],
        })   
</body>
</html>
复制代码

浏览器是如何对 HTML5 的离线贮存资源进行治理和加载？

• 在线的状况下，浏览器发现 html 头部有 manifest 属性，它会申请 manifest 文件，如果是第一次拜访页面，那么浏览器就会依据 manifest 文件的内容下载相应的资源并且进行离线存储。如果曾经拜访过页面并且资源曾经进行离线存储了，那么浏览器就会应用离线的资源加载页面，而后浏览器会比照新的 manifest 文件与旧的 manifest 文件，如果文件没有产生扭转，就不做任何操作，如果文件扭转了，就会从新下载文件中的资源并进行离线存储。
• 离线的状况下，浏览器会间接应用离线存储的资源。

CSS 优化和进步性能的办法有哪些？

加载性能：

（1）css 压缩：将写好的 css 进行打包压缩，能够减小文件体积。

（2）css 繁多款式：当须要下边距和右边距的时候，很多时候会抉择应用 margin:top 0 bottom 0；但 margin-bottom:bottom;margin-left:left; 执行效率会更高。

（3）缩小应用 @import，倡议应用 link，因为后者在页面加载时一起加载，前者是期待页面加载实现之后再进行加载。

选择器性能：

（1）要害选择器（key selector）。选择器的最初面的局部为要害选择器（即用来匹配指标元素的局部）。CSS 选择符是从右到左进行匹配的。当应用后辈选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；

（2）如果规定领有 ID 选择器作为其要害选择器，则不要为规定减少标签。过滤掉无关的规定（这样款式零碎就不会浪费时间去匹配它们了）。

（3）防止应用通配规定，如 *{}计算次数惊人，只对须要用到的元素进行抉择。

（4）尽量少的去对标签进行抉择，而是用 class。

（5）尽量少的去应用后辈选择器，升高选择器的权重值。后辈选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的应用类来关联每一个标签元素。

（6）理解哪些属性是能够通过继承而来的，而后防止对这些属性反复指定规定。

渲染性能：

（1）谨慎应用高性能属性：浮动、定位。

（2）尽量减少页面重排、重绘。

（3）去除空规定：{}。空规定的产生起因一般来说是为了预留款式。去除这些空规定无疑能缩小 css 文档体积。

（4）属性值为 0 时，不加单位。

（5）属性值为浮动小数 0.**，能够省略小数点之前的 0。

（6）标准化各种浏览器前缀：带浏览器前缀的在前。规范属性在后。

（7）不应用 @import 前缀，它会影响 css 的加载速度。

（8）选择器优化嵌套，尽量避免层级过深。

（9）css 雪碧图，同一页面相近局部的小图标，方便使用，缩小页面的申请次数，然而同时图片自身会变大，应用时，优劣思考分明，再应用。

（10）正确应用 display 的属性，因为 display 的作用，某些款式组合会有效，徒增款式体积的同时也影响解析性能。

（11）不滥用 web 字体。对于中文网站来说 WebFonts 可能很生疏，国外却很风行。web fonts 通常体积宏大，而且一些浏览器在下载 web fonts 时会阻塞页面渲染伤害性能。

可维护性、健壮性：

（1）将具备雷同属性的款式抽离进去，整合并通过 class 在页面中进行应用，进步 css 的可维护性。

（2）款式与内容拆散：将 css 代码定义到内部 css 中。

说一下 vue3.0 你理解多少?

 <!-- 响应式原理的扭转 Vue3.x 应用 Proxy 取代 Vue2.x 版本的 Object.defineProperty -->
 <!-- 组件选项申明形式 Vue3.x 应用 Composition API setup 是 Vue3.x 新增的一个选项，他
    是组件内应用 Composition API 的入口 -->
 <!-- 模板语法变动 slot 具名插槽语法 自定义指令 v-model 降级 -->
 <!-- 其它方面的更改 Suspense 反对 Fragment(多个根节点) 和 Protal (在 dom 其余局部渲染组建内容)组件
     针对一些非凡的场景做了解决。基于 treeshaking 优化，提供了更多的内置性能。-->
复制代码

Promise 是什么，解决了什么，之前怎么实现的

    Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更正当和更弱小。解决来之前在申请中回调申请产生的回调天堂，使得当初的代码更加正当更加优雅，也更加容易定位查找问题。复制代码

为什么须要革除浮动？革除浮动的形式

浮动的定义： 非 IE 浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器里面而影响布局。这种景象被称为浮动（溢出）。

浮动的工作原理：

• 浮动元素脱离文档流，不占据空间（引起“高度塌陷”景象）
• 浮动元素碰到蕴含它的边框或者其余浮动元素的边框停留

浮动元素能够左右挪动，直到遇到另一个浮动元素或者遇到它外边缘的蕴含框。浮动框不属于文档流中的一般流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的一般流就会体现得该浮动框不存在一样的布局模式。当蕴含框的高度小于浮动框的时候，此时就会呈现“高度塌陷”。

浮动元素引起的问题？

• 父元素的高度无奈被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素会追随其后
• 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示构造

革除浮动的形式如下：

• 给父级 div 定义 height 属性
• 最初一个浮动元素之后增加一个空的 div 标签，并增加 clear:both 款式
• 蕴含浮动元素的父级标签增加 overflow:hidden 或者overflow:auto
• 应用 :after 伪元素。因为 IE6- 7 不反对 :after，应用 zoom:1 触发 hasLayout**

.clearfix:after{
    content: "\200B";
    display: table; 
    height: 0;
    clear: both;
  }
  .clearfix{*zoom: 1;}
复制代码

对 HTML 语义化的了解

语义化是指依据内容的结构化（内容语义化），抉择适合的标签（代码语义化）。艰深来讲就是用正确的标签做正确的事件。

语义化的长处如下：

• 对机器敌对，带有语义的文字表现力丰盛，更适宜搜索引擎的爬虫爬取无效信息，有利于 SEO。除此之外，语义类还反对读屏软件，依据文章能够主动生成目录；
• 对开发者敌对，应用语义类标签加强了可读性，构造更加清晰，开发者能清晰的看出网页的构造，便于团队的开发与保护。

常见的语义化标签：

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的 div）<main></main>  次要区域

<article></article>  次要内容

<aside></aside>  侧边栏

<footer></footer>  底部
复制代码

absolute 与 fixed 共同点与不同点

共同点：

• 扭转行内元素的出现形式，将 display 置为 inline-block  
• 使元素脱离一般文档流，不再占据文档物理空间
• 笼罩非定位文档元素

不同点：

• abuselute 与 fixed 的根元素不同，abuselute 的根元素能够设置，fixed 根元素是浏览器。
• 在有滚动条的页面中，absolute 会跟着父元素进行挪动，fixed 固定在页面的具体位置。