HTML+CSS3

1.H5 的浏览器存储有哪些?---websql

2.Localstorage、sessionStorage、cookie 的区别(必会) 同：保存在浏览器端

区别：1.存储大小限制 2.数据有效期 3.作用域不同

sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面;localstorage 在所有同源窗口中都是共享的;cookie 也是在所有同源窗口中都是共享的

• localStorage: 持久存储，只要用户不主动删除就会一直存在。
• sessionStorage:面向 session 的浏览器存储，因此只存在于一个页面的生命周期

cookie往往通过js-cookie插件实现---存储大小不超过4k---存储在本地

拓展---几者的对比

blog.csdn.net/xubenxismil…

总结：

3.如何使一个盒子垂直居中---按照以下五种描述

方法1+2:定位（子绝父相）+以下三种 方法1：margin控制宽高一般

方法2:transform: translate(-50%宽, -50%高);

方法3:margin:auto+四个方位都设为0

方法4:display:flex justify-content: center; align-items: center;

方法5:display:table-cell(详细解释blog.csdn.net/MessageBox_…)

4.如何垂直居中一个img?------display:table-cell

注意：vertical-align:middle-----垂直对齐 text-align:center---水平居中

blog.csdn.net/qq_42667613…

6.css盒模型--blog.csdn.net/weixin_4275… 标准盒模型： IE模型与盒模型的区别：唯一区别就是内容计算方式不同

7.什么是渐进增强和优雅降级?它们有什么不同?

优雅降级和渐进增强印象中是随着 CSS3 流出来的一个概念。由于低级浏览器不支持CSS3，但 CSS3 的效果又太优秀不忍放弃，所以在高级浏览中使用 CSS3 而低级浏览器只 保证最基本的功能。关键的区别 是他们所侧重的内容，以及这种不同造成的工作流程的差异。

8.用css3画一个三角形---border（四个方位的边框像素值相同）+宽度，高度为0

实现小的三角形：三个方位设为透明

实现大三角形：两个方位设为透明

9.Display:none 与 visibility:hidden 的区别-----让元素隐藏

display:none----占据的空间消失 visibility:占据的空间不消失---有继承性 在 CSS3 的 transition 中支持 visibility 属性，但是不支持 display，因为 transition 可 以延迟执行，因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用户体验

10.Position 的值有哪些，分别有哪些作用?-----4种

static----静态定位---不脱流 fixed----脱流---参考物：浏览器窗口

absolute----找参考物规则：必须满足以下两个条件--1.必须是包含关系2.参照物必须有定位，逐层向上找，找不到参考物：浏览器窗口

relative----元素偏移前的位置---脱流 总结： 1.只有static不脱流 2.参考物的分类

11.浮动---为什么有浮动---引起什么问题---如何清除浮动

浮动：脱标---当父盒子没有设置高度，给子盒子设置浮动的话，子盒子脱离标准流，父盒子撑不开，影响布局，若非第一个元素浮动，则该元素之前的元素也需要浮动

为什么要清除：影响布局

方法：

方法1:空元素+clear：在父盒子里面设置一个空元素，空元素（块级）告诉浏览器到哪里不需要浮动了，本质上是设置了一个标准流盒子

缺点：会产生大量的空白元素，占用空间 优点：代码少

方法2：BFC盒子清除浮动（两种）----给父级元素设置 overflow:hidden;或 overflow:auto;本质是构建一个 BFC-------给父元素设置浮动（局限）

方法3:伪元素（可以在前面或者后面）+clear:both

12.BFC盒子---页面中的一个隔离的独立容器 BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局，相当于画了一个圈

如何触发BFC：display:flex table-cell inline-block position:absolute fixed overflow

使用场景：最主要是清除浮动

13.外边距塌陷-----发生在垂直方向---只有块级元素有，行内块及行内元素没有

盒子塌陷出现的情况：两种情况

两个没有包含关系的盒子，同级元素，上下排列

外边距计算：两个盒子外面的边距

第二种：包含关系---内部的盒子设置margin-top

两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生 上边距，父子元素会进行粘连，决绝这种情况的方法为:父级添加一个 css 属性，overflow: hidden，禁止超出

响应式布局

1.px、em、rem的区别

Js常见面试题

1.延迟加载js有哪些方式？-----defer----async

总结:defer等html解析完后，再执行js代码，顺次的，按照js文件引入的先后顺序执行； async是和html解析同步的，不是顺次执行js脚本，谁先加载完谁先执行 2.js数据类型

js常见的数据类型-----js的隐式转化规则-----js数据类型转换

常见数据类型：基础数据类型五个,symbol可说可不说，引用数据类型object,像数组之类的可以不说

考察js的隐式转化规则：

转化规则总结：NaN是一个数值类型，但不是一个数字 判断数据类型：

3.null和undefined的区别

4. ==和===有什么区别-----等号涉及了隐式转换

5.js微任务和宏任务----js代码执行流程-----事件循环

解释：用自己的话描述

因为js是单线程的语言，执行完一个任务后才会进行下一个任务，当某个任务执行时间过长，就会可能发生堵塞，所以引入了事件循环。js代码执行时，同步执行完会执行事件循环的内容。可以看为是一个宏任务----->进入事件循环。

blog.csdn.net/frontend_fr…

事件循环♻️ 总结------------------- 扩展：js单线程、js是单线程的如何去执行异步操作、js代码执行流程

微任务和宏任务循环的方式----事件循环：

总结：

宏任务&微任务：

案例：-----同步代码console.log比promise.then()先执行

最后执行的是timeout2

6.作用域

总结： 作用域就是限制某个变量只能在某个区域内有效，作用域包括全局作用域和局部作用域，除了js函数外没有块级作用域（只有js函数有块级作用域） 作用域链就是内部可以的外部的变量，外部不能访问内部的变量，如果在该函数中没有该变量的定义，则会到创建这个函数的那个域寻找，如果也没有，就会一层一层的向上寻找，直到找到全局作用域还是没有找到，就结束。 优先级：声明变量>声明普通函数>参数>变量提升

面试：有的会直接由相关考题

思维导图：

变量提升：

注意：

详细：blog.csdn.net/zwkkkk1/art…

变量提升面试--js没有重载，先有变量提升，当变量或者函数名相同时，后面的会覆盖前面的

** 解析：**

7.执行上下文---全局上下文window、函数执行上下文

8.js对象 js对象注意点：

9.判断是否为数组-----写三种------constructor.toString().indexof('Array')>-1----大于-1表示找到了

10.new操作符做了什么-----4步

第二步解释：

11.闭包----是什么？----可以解决什么问题？-----有什么缺点？----尽量不要写全局变量---不知道什么时候使用

**总结：是有权限访问其他函数作用域内的变量的一个函数，此时该变量不会被垃圾回收，形成变量保护，
解决问题：可以访问到外部函数的局部变量、保护函数内的私有变量不受外部的干扰 
缺点：变量会驻留在内存中，造成内存损耗-----解决：将闭包的函数设为null

不要提内存泄漏----说的话就要提到ie **

12.原型链----原型

总结：引入原型为了实现对象共享属性和共享方法，函数拥有原型对象 思路：

案例

解析： 13.js继承的方式----

继承方式1:es6继承---类的extends关键字+super关键字调用父亲的函数 继承方式2:原型链继承----将父类的实例作为子类的原型-----更改一个其他也会受影响 继承方式3:构造函数继承----在子类构造函数中使用父类构造函数，使用apply()或者call(）方法----不可以继承

继承方式4:组合继承----原型链继承+构造函数继承 思维导图：

14.call、apply、bind区别----一般情况使用call就可以---涉及数组的最大值会使用apply，bind函数使用：想在函数里面一个click事件

总结：

15.深拷贝和浅拷贝----复制----浅拷贝只是复制引用，而未复制真正的值

16.如何实现拷贝

浅拷贝：

实现深拷贝：JSON.parse(JSON.stringfy(obj)) 深拷贝的常用操作JSON.parse(JSON.stringify) 缺点：

17.var const let 的区别-----四处区别 总结：相同点是...，不同点有四处 18.箭头函数和普通函数的区别----4点

19.构造函数特点----构造函数默认不用return---new关键字调用

20.this指向

21.数据扁平化---数据一层前一层、如数组一层嵌套一层---flat\lodash里面的flattern----concat+扩展运算符

es6---规范--- ECMAScript--js执行由上而下（预解析）

新增声明命令let和const、模版字符串、函数的扩展、对象的扩展、for...of循环、promise对象、解构赋值、set数据结构、展开运算符

1.let、const、和var的区别----常考---可说三点或者四点

总结：1.不存在变量提升--js执行由上而下（预解析），var返回undefined ,let和const报错 
     2.同一个作用域下不能重复定义同一个名称，var会覆盖---⚠️注意是定义，可以重复赋值
     3.有着严格的作用域---块级作用域，var属于函数作用域
const声明一个只读的常量，一旦声明，常量的值无法改变，声明的时候一定要赋值

2.箭头函数----写法：函数名=（形参）=>() 当函数体中只有一个表达式时，{}和return可以省略，形参只有一个的时候，可以省略

3.数据结构---set&map

set数据结构：类似于数组，所有的数据都是唯一的，没有重复的值，它本身就是一个构造函数，用途：简单数组去重 它本身是个构造函数，有对应的属性和方法。可以添加、删除、查找等

map:类似于对象---键值对方法添加---可以使用for ...of...循环

4.for...of循环

遍历所有数据结构的统一方法，可以使用的范围包括数组、set和map结构、某些类似于数组的对象（比如arguments对象、Generator对象、字符串等） blog.csdn.net/XWen_ING/ar…

5.对象的扩展：object.keys()方法、object.assign()、对象和方法的间写形式

object.assign()---将多个原对象的属性和方法都合并到目标对象上面，可以接收多个参数，第一个参数是目标对象，后面都是原对象----可以实现浅拷贝

6.展开运算符用途---两个---拓展new Set()---...

用途主要有：转换为数组，数组的合并 7.结构赋值---浅拷贝

Promise----Generator函数----异步解决方案

1.Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。使得控制异步操作更加容易。可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

总结：异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免层层嵌套的回调函数

promise的三种状态 pending-进行中、resolved-已完成、rejected-已失败

手写promise

pronise构造函数包含一个参数和一个带有解析resolve、reject拒绝，两个参数的回调，在回调执行一些异步操作，一切正常（成功）则调用resolve，否则调用reject。对于已经实例化的promise对象，可以调用promise.then()放大，借助resolve和reject方法作为回调。then()接收两个参数:OnResolve和OnReject,分别代表当前的promise对象成功或者失败时。

2.async/await >promise虽然摆脱了回调地狱，但then链式调用负担还是存在。async/await 是ES7提出的基于的解决异步的最终方案。

3.Generator函数---结合yeild使用-----将函数暂停执行，普通函数是一直执行到return，也是一种异步解决方案

Generator 函数是 es6 的，作用是可以将函数执行时可以进行暂停，而普通函数是一直执行到 return，同样也是异步的一种解决方案----函数外通过调用 next 接收

数组专题

1.数组增删改查

2.数组截取splice()\slice()---第二个参数可选----是否改变数组----参数----返回的是新数组还是？ 二者的区别：

3.数组去重-----说三种即可

方法1.new Set()方法-----es6新增

set数据结构常常封装成构造函数-----代码如下

方法2.indexOf()-----结合变量数组--需要创建个新数组接收---实现数组去重的效果

方法3.sort排序---默认从小到大

思维导图：
4.找出多维数组的最大值----综合考法 题干：

代码：

5.查找----find和filter的区别----返回的内容&匹配规则

6.遍历---map\foreach\filter------常见三个-----map和forEach的区别

7.some和every的区别 -----匹配

字符串

1.字符串新增

2.字符串出现的最多字符以及次数

先循环遍历字符串---统计个数 3.for...of&&for...in的区别

对象

1.Object.keys()

vue相关

1.vue2生命周期----结合keep-alive描述

联系： 使用keep-alive组件（自带的）对生命周期的影响-----第一次进入的话会执行哪些函数----再次进入的话执行哪些函数-----actived仅一个函数

2.keep-alive---包裹组件---------提升性能 总结：是什么----有什么用----使用场景 vue系统自带的一个组件，用来缓存组件，提升性能的。比如在首页进行详情页，如果用户在首页每次点击的都是相同的，那么详情页就没有必要请求N次了，直接缓存起来就可以了，如果点击的不是同一个，那么就直接请求 实例代码：

3.v-if和v-show的区别----两处区别

总结 ：1.v-if是创建一个dom节点，而v-show是通过display:none\block实现的 2.初次加载的话v-if要好，因为页面不会做加载盒子，频繁使用的话，使用v-show，因为创建删除的开销太大了，显示和隐藏的开销较小  

4.v-if和v-for的优先级---为什么不可以同时使用

vue2中v-for的优先级高，先执行循环再判断；vue3中v-if的优先级高，此时遍历还不存在

5.ref是什么

获取DOM元素

6.nextTick()----获取更新后的dom内容

总结：

干什么的：nextTick---获取更新后的dom元素
为什么要使用：异步更新策略，数据如果发生变化，vue不会立刻就更新Dom，而是开启一个队列，这一策略就是使得对数据的修改不会立刻体现在dom上，如果想要获取更新后dom状态，就要使用nextTick()来获取

使用：

7.scoped原理

用自己的话说，  就是让样式在本组件内生效，不影响其他的组件。原理：给节点新增自定义属性，然后css根据属性选择器添加样式

8.如何实现样式穿透

1.让css只在当前组件生效，加scoped
2.scss---- deep

拓展：

9.Vue组件通信-----重点 1.父=>子组件通信：接-----收------$parent/ref/$attrs

2.子=>父组件通信

3.兄弟组件通信eventbus/-----通过中转bus.js----流程-----大型项目可以使用vuex---看之前的笔记 bus.js文件书写： 10.props和data谁的优先级高-----props更高----源码本身决定了

11.computed、methods、watch---监听路由有什么区别？

12.为什么data属性是一个函数而不是一个对象

13.v-model双向绑定的原理----使用场景：表单项上使用或者组件上使用 本质是一个语法糖 作用：在表单元素身上实现 数据双向绑定

v-model其实是个语法糖：可以 解析成 value属性和 input 输入事件（发生变化失去焦点）

拓展：v-model和sync修饰符的区别

主要区别：v-model在vue2中，一个组件只可以使用一次，sync更加自由，可以给不同的属性添加

14.vue响应式原理-----结合MVVM一起

15.订阅者模式&object.defineProperty（get和set方法）

16.MVVM和MVC的区别

MVVM:model代表数据模型，view代表UI组件，viewModel通过双向数据绑定把view层和model层连接了起来，交互是双向的，view数据的变化会同步到model种，而model数据数据的变化也会反映到view上
MVC:大量的DOM操作，页面渲染性能降低，加载速度变慢，影响用户体验

17.slot 在注册组件时，当有些结构不确定时，可以借助插槽动态传入 作用域插槽、具名插槽、默认插槽 blog.csdn.net/qq_40893035…

**slot一般都是子组件定义了主体部分，父组件引入，然后父组件根据需求不同需要向里面添加不同的内容**

具名插槽的使用----使用时template+v-slot(父)+使用name（子）

案例：

效果：

作用域插槽-----默认等于scoped-----可解构 插槽结构：

虚拟DOM&diff算法

原文链接：blog.csdn.net/qq_51066068… 1.虚拟DOM----普通的js对象，用来描述真实dom结构的js对象

虚拟dom就是一个普通的js对象。是一个用来描述真实dom结构的js对象，因为他不是真实dom，所以才叫虚拟dom。

虚拟DOM的作用:----提升渲染效率以及用户体验 1.虚拟dom可以很好的跟踪当前dom状态，因为他会根据当前数据生成一个描述当前dom结构的虚拟dom，然后数据发送变化时，又会生成一个新的虚拟dom，而这两个虚拟dom恰恰保存了变化前后的状态。然后通过diff算法，计算出两个前后两个虚拟dom之间的差异，得出一个更新的最优方法（哪些发生改变，就更新哪些）。可以很明显的提升渲染效率以及用户体验 2、因为虚拟dom是一个普通的javascript对象，故他不单单只能允许在浏览器端，渲染出来的虚拟dom可同时在node环境下或者weex的app环境下允许。有很好的跨端性

2.diff算法

路由相关面试题---声明式导航&编程式导航

1.路由模式---三种区别

总结：常见的路由模式有hash、history模式。 他们的区别有三处：1.表现形态不同，hash模式有#/，而history模式没有2.如果跳转到一个找不到的页面，history模式会发送请求，而hash模式不会发送请求3.打包后，前端自测要使用hash，如果用history会出现空白页

2.路径传值----两种方式---显示&隐式（url上面看不到）---params需要借助路由名

1.显示：query路由传参----url上面可以看到

2.隐式：params传参数，路径上面不显示，传递参数需要借助name，注意：里面必须借助路由的名字，不能直接使用路径，会报错

3.路由导航守卫----三种---三个参数to\from\next

全局、路由独享、组件内
参数说明：

注意afterEach中参数没有next

4.如何实现动态路由

打包

1.打包路径和路由模式 2.代理和环境变量

git

1.git pull和git fetch----远程仓库更新，需要把新内容下载，更新代码---是否合并？

使用方法：----origin 记得写

git fetch的使用方法：不会合并，如果想要合并，需要手动合并

git pull的使用方法：会合并----相当于git fetch和git merge

2. git merge 和 git rebase---主要功能是进行合并分支

git merge---新增git commit，然后再联系起要合并的分支 git rebase相当于将要合并到哪个的分支移动到需要合并的分支顶端，历史记录更加清晰

浏览器

1.浏览器的缓存模式---请求后的资源离线缓存---强缓存（不再发送请求，直接从本地拿）&协商缓存（强缓存失效后，请求到服务器，如果命中使用协商缓存，返回的状态码时304，如果没有命中，直接从服务器请求资源）

浏览器会将请求后的资源进行存贮为离线资源，当下次需要该资源时，浏览器会根据缓存机制决定直接使用缓存资源还是再次向服务器发送请求

浏览器的缓存机制氛围：强缓存和协商缓存，当强缓存失效后，会使用协商缓存

协商缓存由服务器决定是否使用缓存 强缓存实现方式： 2.浏览器的进程和线程

3.http和https(密文，需要SSL证书)区别--默认端口http443--传输过程

4.http常用状态码---200、400、500、404等----说自己熟悉的

5.websocket---服务器与客户端的双向

优化

1.防抖和节流（连续触发的事件在n秒内只执行一次）---必会

防抖：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 使用的函数debounce

节流：节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率

2.SPA单页面-切换借助于组件&多页面-是从一个完整的页面跳转到另一个页面

单页面----一个外壳页面和多个组件组成----跳转是把页面片段删除或者隐藏，并没有开新页面，用户的使用体验好

多页面----由多个完整的页面组成，跳转是从一个页面跳到另一个页面，跳转时刷新所有的资源

3.如何解决首页加载过慢--路由懒加载-静态资源本地存储、图片压缩、使用CDN

4.进程和线程

https://blog.csdn.net/Zheng548/article/details/54669908