面试记录下css篇：盒模型？ box-sizing：border-box和content-box； border-bo

css和html篇：

1、盒模型？

box-sizing：border-box和content-box；

2、border-box和content-box，有什么区别？

怪异盒模型：border-box，宽高：padding+border+content；
标准盒模型：content-box，宽高：content不加padding+border；

3、水平垂直居中的实现？

给父元素设置display：flex; justify-content: center;align-items: center;
给父元素设置position：relative，子元素设置position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
给父元素设置 display: grid; align-items: center; justify-content: center;
给父元素设置 display: table-cell;text-align: center;vertical-align: middle;

4、css实现自适应正方形？

width：50%；height：50vw

5、css3动画有哪些？

transform（变形变化）
transition（过度动画）
@keyframes（关键帧动画）

6、css3旋转30°？

transform：rotate(30deg)

7、css3计算属性？

calc()单位rem , em , %, px；

8、媒体查询？

@media可以针对不同的屏幕尺寸设置不同的样式；

语法：

@media mediatype and|not|only (media feature){
      css-code;
}

用@media开通注意@符号
mediatype 媒体类型（all，print，scree）
关键字（and not only）
media feature 媒体特性，必须有小括号包含（width，min-width，max-width）

9、css3新特性？

阴影：box-shadow；
选择器；
变形、形状转换；
动画（transition，@keyframes）；
边框、盒模型、背景；
弹性布局、多列布局、栅格布局；
媒体查询、web字体；

10、html5新特性？

新增语义化；
增强表单功能；
新增音视频；
新增svg和canvas画图；
新增地理定位和拖放api；
新增WebStorage和Websocket；

11、html5废除的特性？

纯表现元素：basefont、big、center、font、s、strike、tt、u 用css代替；
部分浏览器支持的元素：applet、bgsound、blink、marquee；
对可用性产生负面影响的元素：frameset、frame、noframes,在html5中不支持frame框架，只支持iframe框架；

12、伪类和伪元素的区别？

伪类： :hover、:first-child、:last-child、:nth-child;
伪元素：::before、::after;

js篇：

1、手写url地址栏参数转为对象?

const urlToJson=(url)=>{
  let obj={};
  let index=url.includes("?");
  if(index){
    let urlpar=url.split('?')[1];
    let parmArr=urlpar.split('&');
    for(let item of parmArr){
      let arr=item.split('='); 
      obj[arr[0]]=arr[1];
    } 
  }  
  return obj
}

2、[1,2,3,2,4,4,4,2,4],手写数组去重？

let item = [...new Set(arr)];

3、[1,[1,2,3,4,3,3,4],3,2,4,[4,4,2,1,6,[12,2,3,4,4]],4,2,4],手写使用递归，数组扁平化去重？

4、深浅拷贝？

浅拷贝：Object.assign(); for in
深拷贝：JSON.stringify(),JSON.parse；递归；

5、JSON.stringify(),JSON.parse深拷贝有什么缺点？

函数、Symbol、undefined丢失；NaN、Infinity变null了；RegExp对象变{}；``Date对象转为字符串

6、js实现图片的懒加载？

给ing标签的src属性为空，给一个data-original属性，里面存放图片的真实地址，当该标签出现在可视区内动态的将data-original地址赋值给img的src属性；

7、this在不同函数内的指向？

普通函数、定时器函数 –- 指向window；
构造函数、原型方法、对象中的方法 –- 指向实例对象；
事件绑定 –- 指向事件源;
箭头函数中的this，没有默认指向，一般指向外层函数this;

8、怎么判断对象是空对象？

Object.keys(obj).length==0；
JSON.stringify(obj)=='{}'；

9、事件轮询机制？

setTimeout(() => { 
   console.log(1)  }, 0)
function p1(){
  console.log(2)  
return new Promise((resolve, reject) => { 
   console.log(3) 
   resolve('p1')
   console.log(4)
})  
console.log(5)}
p1().then((res=>{
  console.log(res,'then')
}))
tes()
async function tes(){
  console.log(6)
  let res=await p1();
  console.log(7)
  console.log(res,"tes")
  console.log(8)
}
console.log(9)
//2 3 4 6 2 3 4 9 p1(then) 7 p1(tes) 8  1

10、防抖（debounce）和节流（thorttle）

防抖：高频触发事件只执行最后一次；

function debounce(fn,delay) { let timeout = null; return function (e) { clearTimeout(timeout); timeout = setTimeout(() => { fn.apply(this, arguments); }, delay); };
节流：高频触发事件每隔一段时间执行一次；

function throttle(fn,delay) { let timeout =null;
return function () { if (timeout) return; timeout=setTimeout(() => { fn.apply(this, arguments); timeout =null;
}, delay); } };

11、js内存泄漏？那些可以使内存泄漏？

由于疏忽或错误造成未能释放已经不再使用的内存；
被遗忘的计时器，被遗忘的闭包，for循环var问题；

12、js垃圾回收机制？

为了防止内存泄漏，垃圾回收机制不停寻找不在使用的变量，释放它指向的内存；
标记清除：当声明变量时垃圾回收器进行标记，当离开环境再度标记，随后清除；
引用计数：当声明一个变量并且将一个引用类型赋值给变量得时候引用次数加1，当这个变量指向其他一个时引用次数减1，当为0时出发回收机制进行回收。

13、js异步编程？

回调函数
事件监听
发布/订阅模式（观察者模式）
promises
生成器函数Generator/yield
awync/await

14、同步和异步？

同步任务是指：主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务；
异步任务是指：不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程；

15、js原型和原型链？

原型
所有引用数据类型（数组、对象、函数）可以自由扩展；
所有引用数据类型都有”_ _proto_ _“属性（隐式原型），并且它指向它的构造函数”prototype“属性；
所有函数都有”prototype“属性（显式原型）；
原型链
js一切皆对象，当要访问对象属性时，如果这个对象本身不存在这个属性，那么就会去它构造函数的’prototype’属性中去寻找。那又因为’prototype’属性是一个对象，所以它也有一个’_ _ proto_ _'属性。
解释： fn._ _ proto _ _=== Foo.prototype；Foo.prototype._ _ proto _ _=== Object.prototype；
所以当fn调用toString()时，JS发现fn中没有这个方法，于是它就去Foo.prototype中去找，发现还是没有这个方法，然后就去Object.prototype中去找，找到了，就调用Object.prototype中的toString()方法；

15、数组aip中splice和slice的区别？

splice改变原来数组，slice不改变原数组；
splice接受三个参数（1，2，3）

16、数组迭代api中filter、every、some的区别？

filter() 过滤返回数组；
every() 每一项都满足返回true；
some() 有一项满足返回true；

es6篇：

1、let、val、const的区别？

let是块级作用域，函数内部使用let定义后，对函数外部无影响。
val声明的变量即使是全局变量，也是顶层变量，变量提升。
const定义的变量不可以修改，而且必须初始化。

2、箭头函数用过吗？和正常函数有什么区别？

箭头函数的this，始终指向父级的上下文，不能通过**call(),apply(),bind()**方法直接修改他的this指向
箭头函数是匿名函数，不能作为构造函数，不能使用new，不能用于构造函数；
箭头函数内没有arguments,可以用展开运算符**...**解决

3、箭头函数this是什么时候指向外层函数this的？

4、promise是什么？有什么作用？

promise是一个对象，它可以获取异步操作的消息；
解决回调地狱，代码难以维护；promise可以支持多个并发的请求；

5、promise有哪些状态？

promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；。只有两种可能：从pending变为fulfilled 或者从pending变为rejected。状态一旦改变，就不会再变。创造promise实例后，它会立即执行；

6、promise有哪些方法？

.then():实例状态改变的回调函数，有两个参数：第一个是成功回调函数，第二个是失败回调函数。他会返回一个全新的promise，因此可以继续then链式调用；
.catch():失败回调函数，状态变为rejected执行;
.finally():promise实例无论状态是什么都会执行的函数;
.all():多个promise实例包装成一个新的promise实例，只有所有实例的状态都变成fulfilled，它才会变成fulfilled，只要其中一个实例的状态变为rejected，它就会变成rejected。
.rece():将多个promise实例包装成一个新的promise实例，他的状态取决于状态最先改变的实例。

7、async/await有用过吗？

也是一种异步解决方案，它遵循的是Generator 函数的语法糖，拥有内置的执行器，不需要额外调用函数，返回一个promise对象；

8、async/await与promise的区别？

相同点：

promise和async/await都是优化异步编程体验的解决方案。

不同点：

promise的出现解决回调地狱的问题，它的语法导致纵向回调链问题。
async/await使得代码简洁很多，异步代码看起来像同步代码。
async/await 让 try/catch可以同时处理同步和异步的错误。

9、开发中怎么捕获promise和async/await的异常情况？

promise：

promise(实例).then后面第二个参数可以捕获到异常。
promise(实例).catch也可以捕获到异常。

async/await：

async函数返回的是一个Promise，所以我们可以在外面catch住错误。
可以在函数内部可以使用try...catch语句。
await 后面跟着的肯定是一个Promise，也可以在Promise后面catch。

10、promise这两种异常捕获情况有什么区别？

then 第二个参数和catch 是有优先级关系的，写在前面的先捕获，后面就没有错误可以捕获了。
因为then 第二个参数（或者第一个参数或者catch）默认返回了一个新的Fulfilled的状态的Promise,等同于return Promise.resolve(),所以后面的then会执行，而catch就不会执行了。
catch 写法是针对于整个链式写法的错误而捕获的，而 then的第二个参数是针对于上一个返回的 Promise 的。所以我们平时写代码尽量用catch去捕获异常。

node篇：

1、node起一个服务？

引入http模块；
使用http模块中的createSever()创建服务；
设置该服务的端口号，listen()方法;

  let http = require('http');
  let server = http.createServer(function(req,res){})
  server.listen(3000,function())

vue篇：

1、说一说vue响应式原理？

vue2使用Object.defineProperty；vue3使用Proxy、Reffect；
Observer（数据劫持）、Dep（依赖收集）、Watcher（更新视图）、Compile（解析器）
vue在初始化过程中data中的每个值通过Observer转换成了getter/setter的形式。
在挂载时，会读取所需对象的值，会触发getter函数从而将Watcher添加到Dep中进行依赖收集。
在值发生变更时，触发对应的setter，setter通知之前依赖收集得到的 Dep 中的每一个 Watcher，Watcher就会开始调用 update 来更新视图。

2、vue2和vue3响应式原理的区别是什么？

defineProperty只能响应首次渲染时候的属性，无法操作数据的增加和删除；
Proxy需要的是整体监听；
Proxy不兼容ie，defineProperty兼容ie8已上；

3、对于vue2数据更新视图不能及时更新为什么？

Object.defineProperty的缺陷导致视图不能更新，使用this.$set()方法或者数组aip进行更新（push、pop、shift、unshift、splice）

4、说下数组不能及时更新视图为什么要用数组api方法？

它是以Array.prototype为原型，创建了一个arrayMethods对象，使用Object.setPrototypeOf()强制让数组指向arrayMethods，这样就可以触发我们在arrayMethods中的改写的数组操作方法，vue重写了数组api方法；

5、说说虚拟 DOM的理解？虚拟DOM的好处？

虚拟的dom对象，它本身就是一个 JavaScript 对象，只不过它是通过不同的属性去描述一个视图结构。
操作真实dom 是比较昂贵的，频繁的dom操作容易引起页面的重绘和回流，但是通过抽象 VNode 进行中间处理，可以有效减少直接操作dom的次数，从而减少页面重绘和回流。

6、vue虚拟DOM的流程？

编写模板 - template，这个模板会被编译器 - compiler编译为渲染函数，在接下来的挂载（mount）过程中会调用render函数，返回的对象就是虚拟dom。但它们还不是真正的dom，所以会在后续的patch过程中进一步转化为dom。
挂载过程结束后，vue程序进入更新流程。如果某些响应式数据发生变化，将会引起组件重新render，此时就会生成新的vdom，和上一次的渲染结果diff就能得到变化的地方，从而转换为最小量的dom操作，高效更新视图。

7、vue编译器（compiler）的工作原理？

在Vue中编译器会先对template进行解析，这一步称为parse，结束之后会得到一个JS对象，我们成为抽象语法树AST，然后是对AST进行深加工的转换过程，这一步成为transform，最后将前面得到的AST生成为JS代码，也就是render函数。

8、diff算法的作用？

Vue中的diff算法称为patching算法，将虚拟dom转换为真实dom通过patch方法；
patch过程是一个递归过程，遵循深度优先、同层比较的策略；

9、vue组件通信有哪些方式？

父子：props/$emit/$parent/ref/$attrs
兄弟：$parent/$root/eventbus/vuex
跨层级：eventbus/vuex/provide+inject

浏览器和其他篇：

1、地址栏输入后，经历了哪些过程？

DNS域名解析找到对应的IP;
根据IP找到对应的服务器，建立TCP链接；
发起http请求，服务端响应http请求，返回html代码；
浏览器解析html代码，并请求代码中所需的资源（图片等）；
浏览器渲染页面；

2、vue和react有什么区别？

共同点
数据驱动视图
组件化
Virtual DOM+Diff算法
不同点
核心思想不同；
响应式原理不同：vue递归监听、依赖收集，react基于状态机，使用setState驱动新的state替换老的state；
组件写法差异：vue使用单文件组件(SFC)，react推荐的做法是JSX + inline style；
diff算法不同：节点元素属性发生改变，vue删除重建，react只是修改节点属性；列表节点的改变vue采用两端到中间对比，react采用左到右依次对比；
渲染过程不同：vue对比新旧Virtual DOM的差异，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。react应用的状态改变，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制；
语法区别；

3、vue项目怎么优化？

基础优化（代码规范）
区分v-if和v-show的使用场景；
区分computed和watch的使用场景；
避免v-if和v-for的同时使用；
事件监听及销毁；
长列表优化、路由懒加载、页面骨架屏；
展示型数据使用v-once；
组件缓存；
第三方库按需引入；
网络相关
CDN加速；
合理缓存；
使用http2；
浏览器预处理；

4、webpack优化？

构建时间优化；
多进程打包（thread-loader）；
缓存资源（cache-loader）；
开启热更新；
合理设置exclude和include；
区分构建环境；
提升webpack版本
打包体积优化；
css压缩（css-minimizer-webpack-plugin）；
js压缩（terser-webpack-plugin）；
报错定位（source-map）；
打包体积分析（webpack-bundle-analyzer）；
用户体验优化；
模块懒加载；
开启Gzip；
小图片转base64；

5、项目开发中遇到哪些难点？怎么解决的？

业务场景：当前小程序web-view中内嵌H5跳转其他小程序？
H5调回小程序使用wx.miniProgram.navigateTo();
在小程序中新建中转页面，在onLoad()中调用wx.navigateToMiniProgram()；
注意点：wx.navigateToMiniProgram()只能通过点击事件触发，所以wx.showModal()再触发wx.navigateToMiniProgram()跳转;

6、h5开发和小程序相关兼容性问题？