css-html
1：阐述清除浮动的几种方式 （1）父级div定义 height （2）父级div定义 overflow:hidden （3） 结尾处加空div标签 clear:both
2：盒模型 标准盒模型(box-sizing: content-box)： 盒子总宽度 = width + padding + border + margin IE 怪异盒模型(box-sizing: border-box)： 盒子总宽度 = width + margin
3：行内元素块元素
块级元素： div , h1---h6 , p , ul , ol , li , dl , table , form
行内元素： span , a , img , input , select , textarea ,label ,b , i ,strong ,em , big ,small
js
4：请描述一下 cookies sessionStorage和localstorage区别？ 1存储大小 · cookie数据大小不能超过4k。 · sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
2有效时间 · localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； · sessionStorage 数据在当前浏览器窗口关闭后自动删除。 · cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3数据与服务器之间的交互方式 · cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端 · sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
5：什么是ajax? ajax的步骤？ 第一步，创建xmlhttprequest对象 第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。 [ open() => 可发get()或post() send() => 只能发post() ] 第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
6：js有几种数据类型，其中基本数据类型有哪些 ？ 六种基本类型: Number，String，Boolean、Null、Undefined、Symbol 引用类型: Object、Array和Function
7：this指向问题 指向2类 1：对象 or window 2：数组 1.对象中的函数指向这个对象 2.数组中有函数，指向这个数组 3.普通函数this指向全局window 4.构造函数指向new这个对象 5.箭头函数指向上一级作用域 6.apply、call调用时指向第一个参数，没有则默认window 7.window内置对象指向window对象
8：基本类型数据存储在 -- 盏中
引用类型数据： 指针存储在 -- 盏中 真正数据存储在 -- 堆中 （这里有个js浅拷贝的问题 得自己理解一下）
9：es6的新特性 ？ const let import和export 模板字符串 promise 箭头函数 函数的参数默认值 对象和数组解构 for...of 和 for...in
10：原型链和作用域链的区别？ （1）原型链 当访问一个对象的某个属性时，会先在这个对象本身的属性上找，如果没有找到，会去这个属性的__proto__属性上找，即这个构造函数的prototype，如果还没找到，就会继续在__proto__上查找， 直到最顶层，找不到即为undefined。这样一层一层往上找，彷佛是一条链子串起来，所以叫做原型链。
（2）作用域链 变量取值会到创建这个变量的函数的作用域中取值，如果找不到，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。
（3）区别 作用域是对变量而言，原型链是对于对象的属性而言 作用域链的顶层是window，原型链的顶层是Object.prototype 值为null
11：什么是闭包，如何使用它，为什么要使用它？ （贼高频） （1）使用方法：在一个函数内部创建另一个函数 （2）闭包就是能够读取其它函数内部变量的函数 （3）最大用处有两个：读取其他函数的变量值，让这些变量始终保存在内存中 （4）缺点：会引起内存泄漏（引用无法被销毁，一直存在）
12：js事件循环机制，微任务和宏任务？ （1）js是单线程的，但是分同步异步 （2）微任务和宏任务皆为异步任务，它们都属于一个队列 （3）宏任务一般是：script，setTimeout，setInterval、setImmediate （4）微任务：原生Promise （5）遇到微任务，先执行微任务，执行完后如果没有微任务，就执行下一个宏任务，如果有微任务，就按顺序一个一个执行微任务 （6）Promise是微任务，setTimeout是宏任务，先执行微任务，如有还有微任务执行完微任务再执行下一个宏任务
13：说说你对promise的了解？ （promise一定要看 最常问） （1）promise是为解决异步处理回调金字塔问题而产生的 （2）有三种状态，pengding、resolve、reject，状态一旦决定就不会改变 （3）then接收resolve()，catch接收reject()
vue （最重要也最常问）
14：vue的生命周期 （必问题） vue2.0： -> vue3.0 BeforeCreate() -> setup() Created() -> setup() BeforeMount() -> onBeforeMount() Mounted() -> onMounted() BeforeUpdate() -> onBeforeUpdate() Updated() -> onUpdated() BeforeDestroy() -> onBeforeDestroy() Destroyed() -> onDestroyed() Activated() -> onActivated()
15：为什么Vue中的v-if和v-for不建议一起用? （必问） v-for优先级比v-if高 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
16：v-if 和 v-show的区别？ （必问） v-show是通过设置DOM元素的display样式属性控制显隐 v-if 是真正的条件渲染，第一次变为真时，才会开始渲染条件块 v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景； v-show 则适用于需要非常频繁切换条件的场景。
17：js 和 jq 和 vue 如何绑定多个方法 (js是利用addEventListener， jq是利用.on， vue是利用v-on，（vue和jq都是跟写对象一样）)
js: btn.addEventListener("click",hello1); btn.addEventListener("click",hello2);
jq: $("p").on({ mouseover:fun_name(), mouseout:fun_name2() });
vue:
18：为什么data属性是一个函数而不是一个对象？ 根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况 组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象
19：mvvm的双向绑定原理？ 监听器 Observer => Object.defineProperty，用来劫持并监听所有属性（转变成setter/getter形式），如果属性发生变化，就通知订阅者 订阅者 Watcher，可以收到属性的变化通知并执行相应的方法，从而更新视图 解析器 Compile，可以解析每个节点的相关指令，对模板数据和订阅器进行初始化 订阅器 Dep，用来收集订阅者，对监听器 Observer 和 订阅者 Watcher 进行统一管理
20：vue不能检测哪些属性变化？ // 原理都是这些变化不能进入Object.defineProperty的set()方法中 所以检测不到 vue3 Proxy劫持数据已无这类问题
1数组：
1：使用赋值方式改变数组长度 // arr = [2,3,4,5]
2：使用.length修改数组长度 // arr.length=1
3：通过下标增删数组元素 // delete arr[1] arr[arr.length]=3
2对象： 增删属性 // delete test.name test.新属性='新'
21：介绍虚拟DOM （1）让我们不用直接操作DOM元素，只操作数据便可以重新渲染页面 （2）虚拟dom 虚拟dom是为了解决浏览器性能问题而被设计出来的 当操作数据时，将改变的dom元素缓存起来，都计算完后再通过比较映射到真实的dom树上 （3）diff算法比较新旧虚拟dom 如果节点类型相同，则比较数据，修改数据 如果节点不同，直接干掉节点及所有子节点，插入新的节点 如果给每个节点都设置了唯一的key，就可以准确的找到需要改变的内容，否则就会出现修改一个地方导致其他地方都改变的情况。 比如A-B-C-D, 我要插入新节点A-B-M-C-D,实际上改变的了C和D。但是设置了key，就可以准确的找到B C并插入
22：diff是如何比较新旧虚拟DOM的? www.jianshu.com/p/af0b39860… //这里详细讲解了vue的虚拟DOM和diff算法
23：v-for循环中 key主要是解决哪一类的问题，为什么不建议用索引index？（跟虚拟DOM有关） （1）key的作用主要是为了高效的更新虚拟DOM （2）当以index为key值时，如果数组长度发生变化，会导致key的变化，比如删除其中某一项，那么index会相应变化。 所以用index作为key和不加index没有什么区别，都不能提升性能。一般用每项数据的唯一值来作为key，就算数组长度变化，也不会影响到这个key
24：Vue组件间通信方式都有哪些? （必问） 父子关系的组件数据传递选择 props 与 children / $parent 兄弟关系的组件数据传递可选择bus.emit(方法名, 参数) bus.on() 祖先与后代组件数据传递可选择 Provide与 Inject 复杂关系的组件数据传递可以通过vuex存放共享的变量
25：vue-router的路由模式? history模式 HTML5中的两个API：pushState和replaceState，改变url之后页面不会重新刷新，也不会带有#号，页面地址美观，url的改变会触发popState事件，监听该事件也可以实现根据不同的url渲染对应的页面内容 但是因为没有#会导致用户在刷新页面的时候，还会发送请求到服务端，为避免这种情况，需要每次url改变的时候，都将所有的路由重新定位到跟路由下
hash模式 url hash: foo.com/#help 后面hash值的改变，并不会重新加载页面，同时hash值的变化会触发hashchange事件，该事件可以监听，可根据不同的哈希值渲染不同的页面内容
协议层面
26：http和https有何区别？ 1：http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。 2：https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密， 加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。 此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份。
27：https握手 1：首先客户端发起请求到服务端，服务端处理后发送一个公钥给客户端 2：客户端进行验证公钥，看公钥是否有效和是否过期 3：客户端验证通过会产生随机值key，然后用公钥进行加密回传给服务端 4：服务端用私钥解密后获得客户端的随机值key 5：利用随机值key加密数据后传输给客户端 6：客户端利用key值进行解密数据 7：客户端获取真正的数据
浏览器-服务器
28：浏览器是如何渲染页面的？ （贼高频） 1.解析HTML文件，创建DOM树。解析css，创建css树，结合生成Render树，精确的绘制在屏幕上，js交互 **自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。 2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式
29：从输入url到显示页面，都经历了什么？ （贼高频） 1、首先，在浏览器地址栏中输入url。 2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。 3、在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。 4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。） 5、握手成功后，浏览器向服务器发送http请求，请求数据包。 6、服务器处理收到的请求，将数据返回至浏览器。 7、浏览器收到HTTP响应。 8、读取页面内容，浏览器渲染，解析html源码。 9、生成Dom树、解析css样式、js交互。 10、客户端和服务器交互。 11、ajax查询。
