https://www.jianshu.com/p/38f38f61b557 面试题
Vue是什么?(了解就可以)
1.是一套用于构建用户界面的渐进式框架，自底向上逐层应用。
2.vue核心只关注视图层，不仅容易上手，而且方便与第三方库整合。
3.当与现代化的工具以及各种支持类库结合使用时，完全能够为复杂的单页应用提供驱动。
Vue的优点 (了解)
1.开发者:只关注视图，简单易学，
2.双向数据绑定，操作数据简单
3.组件化，构建单页面有优势
4.视图数据分离，使用数据更方便
5.虚拟DOM+diff算法，提高页面的渲染速度
watch的使用
watch: {
firstName(newName, oldName) {
// newName 是新值，oldName旧值
},
immediate: true,
}
immediate: 立即监视， deep : 深度监视
常用的事件修饰符
.stop ==> event.stopPropagation() 阻止事件冒泡
.prevent ==> event.preventDefault() 取消默认事件，不停止传播
.capture ==> 事件捕获
.self ==> 只触发自己范围内的事件， 不包含子元素
.once ==> 只会触发一次
你对slot的理解
slot是 vue 内容分发机制，插槽是子组件的一个模板标签。
这个标签由父组件决定，有默认插槽，具名插槽和作用域插槽。
默认：匿名插槽，直接在组件送写slot。一个组件只能有一个匿名
具名：带有名字的插槽，slot name='xxx'可以有多个。
作用域: 可以有名字也可以无，不同点，在子组件渲染时，
可以将子组件内部的数据传递给父组件，父组件根据子组件的数据决定如何渲染
Vue模版编译原理
解析阶段：对 template 字符串解析，将标签，指令，属性转为抽象语法树 AST
优化阶段：遍历 AST 找其中的静态节点进行标记，方便在重新渲染的时候进行 diff 比较时 ，跳过一些静态节点
生成阶段：将 AST 转为 render函数字符串
===================================================================================
前后端API交互如何保证数据安全性
1.使用https通讯
2.请求签名，防止参数被篡改
3.身份确认机制，每次请求都要验证合法
4.app中使用 ssl , 防止抓包操作
5.对所有请求响应都加密
================================================================================================
js相关的面试题
微任务有哪些?
1.Promise 2.await和async
这样记忆: es6(Promise) es7(await和async)
宏任务有哪些?
1.setTimeout 2.setInterval
3.DOM事件 4.AJAX请求
微任务与宏任务的区别?
微任务的执行时机比宏任务早。
但是并不不意味着=>微任务的结果先返回数据
严格的来说：ps:微任务》DOM渲染》宏任务 .
js的基本数据类型有哪些？
JavaScript一共有6种数据类型
其中有7种基本数据类型：String,Boolean、Number,Undefined,Null,Symbol
数据类型的转化
转换为布尔值--调用Boolean()方法
转换为数字-调用Number()、parseInt()、parseFloat()方法
转换为字符串调用.toString()或者 加上一个空的字符串( +'' )
ps:null和underfined没有.toString方法
有哪些内置对象?
Function、Arguments、Math、Date、RegExp(正则表达式)、Error
Ajax 是什么?
我对 ajax 的理解是，它是一种异步通信的方法.
通过js脚本向服务器发起 http 通信，
然后根据服务器返回的数据，更新网页的相应部分.
而不用刷新整个页面的一种方法。
如何创建一个 Ajax？
1.创建Ajax对象 2.配置 Ajax请求地址 3.发送请求 4:监听请求，接受响应
//1：创建Ajax对象 兼容IE6及以下版本
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
//2：配置 Ajax请求地址
xhr.open('get','index.xml',true); //
//3：发送请求
xhr.send(null); // 严谨写法
//4:监听请求，接受响应
xhr.onreadysatechange=function(){
if(xhr.readySate ==4 && xhr.status==200 || xhr.status==304 )
console.log(xhr.responsetXML)
}
谈谈你对模块化开发的理解？（高级）
我的理解:一个模块是实现一个特定功能的一组方法,
在最开始的时候,js 只实现一些简单的功能，所以并没有模块的概念 .
但随着程序越来越复杂,代码的模块化开发变得越来越重要。
由于函数具有独立作用域的特点，最原始的写法是使用函数来作为模块，
但是这种方式容易造成全局变量的污染，并且模块间没有联系。
后来提出了对象写法，通过将函数作为一个对象的方法来实现，
这样解决了直接使用函数作为模块的一些缺点。
但是这种办法会暴露所有的所有的模块成员，外部代码可以修改内部属性的值。
所以现在最常用的是立即执行函数的写法，
通过利用闭包来实现模块私有作用域的建立，同时不会对全局作用域造成污染。
AMD 和 CMD 规范的区别？
它们之间的主要区别有两个方面:
1.AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块。
而 CMD 推崇就近依赖，只有在用到某个模块的时候再去 require
2.对依赖模块的执行时机处理不同。
AMD在依赖模块加载完成后就直接执行依赖模块。
CMD 在依赖模块加载完成后并不执行，只是下载而已，
等到所有的依赖模块都加载好后，进入回调函数函数，
遇到 require 语句 的时候才执行对应的模块，
(这样模块的执行顺序就和我们书写的顺序保持一致了)
requireJS的核心原理是什么？(高级)
require.js 的核心原理是通过动态创建 script 脚本，来异步引入模块，
然后对每个脚本的 load 事件进行监听，
如果每个脚本都加载完成了，再调用回调函数。
ps：require.js 实现了 AMD 规范。
ES6 模块与 CommonJS 模块的差异(高级)
1=>CommonJS 模块输出的是一个值的拷贝， CommonJS 模块输出的是值
ES6 模块输出的是值的引用。
2=> CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
CommonJS 模块就是对象，即在输入时是先加载整个模块，生成一个对象，
然后再从这个对象上面读取方法，这种加载称为“运行时加载”。
而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
arguments 的对象是什么？
arguments对象是函数中传递的参数值的集合。
它是一个类似数组的对象，因为它有一个length属性.
使用数组索引表示法arguments[1]可以访问单个值。
但它没有数组中的内置方法，如：forEach、reduce、filter和map。
通过Array.prototype.slice将arguments对象转换成一个数组。
注意:箭头函数中没有arguments对象。
=======================================================================================================
说说浏览器的内核?
浏览器名称 内核
谷歌浏览器(chrome) blink
欧朋浏览器(Opera) blink
火狐浏览器(firefox) Gecko
苹果浏览器(safari) webkit
ps:Blink其实是Webkit的分支
你对浏览器内核的理解？
浏览器内核也就是我们说的渲染引擎。
负责对网页语法进行解释。
如将HTML,JavaScript渲染（显示）为网页。
渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
不同的浏览器内核对网页编写语法的解释不同
简单介绍一下 V8 引擎的垃圾回收机制 高级
v8 引擎将内存分为了新生代和老生代。
新创建的对象或者只经历过一次的垃圾回收的对象被称为新生代。
经历过多次垃圾回收的对象被称为老生代。
新生的对象容易早死，老生代活得更久
新生代被分为 From 和 To 两个空间。
To 一般是闲置的,当 From 空间满了的时候会执行 Scavenge 算法进行垃圾回收。
这个算法分为三步：
1.首先检查 From 空间的存活对象，
如果判断这个存活对象是否满足晋升到老生代的条件，
满足条件则晋升到老生代，如果不满足条件则移动 To 空间。
2.如果对象不存活，则释放对象的空间。
3.最后将 From 空间和 To 空间角色进行交换
V8 新生代对象晋升到老生代有两个条件：
1.第一个是判断对象否已经经过一次 Scavenge 回收。
若经历过，则将该对象从 From 空间复制到老生代中；
若没有经历，则复制到 To 空间。
2.第二个是 To 空间的内存使用占比是否超过限制。
当对象从 From 空间复制到 To 空间时，若 To 空间使用超过 25%，
则对象直接晋升到老生代中。
设置 25% 的原因主要是因为算法结束后，
两个空间结束后会交换位置，如果 To 空间的内存太小，会影响后续的内存分配。
ps:老生代采用了标记清除法和标记压缩法。
参考的地址：https://juejin.cn/post/6844904200917221389#heading-43
ECMAScript 是什么？
ECMAScript 是编写脚本语言的标准，
这意味着JavaScript遵循ECMAScript的标准规范。
ECMAScript 和 Javascript，本质上都跟一门语言有关，一个是语言的约束条件，一个是语言本身的名字。
只不过发明JavaScript的那个人（网景公司），把东西交给了ECMA，
让ECMA规定一下JavaScript的标准，所以这样一个神奇的东西诞生了，这个东西的名称就叫做ECMAScript。
javaScript = ECMAScript + DOM + BOM（自认为是一种广义的JavaScript）
ECMAScript说什么JavaScript就得做什么！
JavaScript（狭义的JavaScript）做什么都要问问ECMAScript我能不能这样干！如果不能我就错了！能我就是对的！
——突然感觉JavaScript好没有尊严，为啥要搞个人出来约束自己，
那个人被创造出来也好委屈，自己被创造出来完全是因为要约束JavaScript。
-==============
======================================
面试题之CSS盒模型
css
盒模型
盒模型有两种：标准盒模型和ie盒模型
标准模型 （宽、高）= content 的宽高
ie模型（宽、高）= content 的宽高 + padding 的宽高 + border 的宽高
CSS如何设置这两种模型
标准模型 box-sizing: content-box;
ie 模型 box-sizing: border-box;
浏览器默认是标准盒模型
JS如何设置获取盒模型对应的宽和高
1、内联样式的宽和高：dom.style.width/height
2、渲染后的结果，只有ie支持 : dom.currentStyle.width/height
3、所有浏览器支持，和第二个原理一样，通用性更好些： window.getComputedStyle(dom).width/height
4、计算一个元素的决定位置（根据视窗-左顶点）：dom.getBoundingClientRect().width/height
BFC的基本概念
BFC就是“块级格式化上下文”的意思.
盒子与盒子之间彼此独立，互不影响。
创建BFC的方式
1.float 除了none以外的值
2.overflow 除了visible 以外的值（hidden，auto，scroll ）
3.display (table-cell，table-caption，inline-block, flex, inline-flex)
4.position值为（absolute，fixed）
在以上的情况里可以创建BFC。
BFC的使用场景
1.解决margin叠加问题
2.用于清除浮动，计算BFC高度.
flex布局、两/三栏布局、水平/垂直居中；
清除浮动；
css3动画、H5新特性。2
