1.BOM与DOM
BOM：浏览器对象模型；
DOM：文档对象模型；
2.JavaScript组成部分
ECMAScript：JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)。
BOM：浏览器对象模型；
DOM：文档对象模型；
3.手写ajax函数
1.创建ajax核心对象；
2.设置请求方式可地址；
3.发起请求；
4.监听状态变化；
5.接收返回数据；
4.浏览器渲染机制
（1）静态渲染（初始化渲染） HTML解析器解析html为htmlDom树，css解析器解析css为cssDom树，这两个dom树结合成渲染树，就是renderTree，根据就是renderTree进行渲染和展示，如果遇到javascript对dom进行修改（添加dom或者删除dom），就会执行javascript的操作，直到执行结束；
（2）动态渲染（用户操作渲染）用户点击页面操作，比如改变背景色，叫重绘，如果改变某个dom结构，比如增加或者减少某个div，叫回流，回流必会引起重绘，重绘不一定引起回流。
5.浏览器事件机制
EventLoop
6.输入url后加载过程
1.DNS解析，解析域名对应的ip地址； （1）.先在本地解析：浏览器缓存-->系统缓存-->查找本地host文件-->本地DNS服务器缓； （2）.如果本地不存在，则去互联网域名服务器解析：根域名服务器-->顶级域名服务器-->权威域名服务器；
2.建立链接（三次握手）；
3.页面渲染；
4.断开链接（四次挥手）；
7.webSocket与http
8.AMD、CMD、commonJS
都是对模块定义的一种规范，
AMD是requireJS在推广过程中对模块定义的规范的产出，
CMD是SeaJS在推广过程中对模块定义的规范的产出，
AMD是提前执行，CMD是延迟执行
AMD:define(["a", "b"],function(){}) CMD:define(function(require, a, b))
define是用来定义一个模块，require是用来引入模块。
commonJS：
node应用由模块组成，采用的commonjs模块规范。每一个文件就是一个模块，拥有自己独立的作用域，变量，以及方法等，对其他的模块都不可见。CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。require方法用于加载模块。
特点：
所有代码都运行在模块作用域，不会污染全局作用域。 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
9.前端性能优化
10.vue周期函数
beforeCreate：实例创建之前执行，但是无法方位数据
created：可以访问数据，可初始化数据或者时间监听
beforeMount：模板编译，但是dom节点未加载完毕，无法访问dom
mounted：dom节点加载完毕，可以访问
beforeUpdate：组件更新前调用
updated：组件更新后调用
beforeDestory：实例销毁前执行
destoryed：实例销毁后执行
11.react周期函数
constrictor：构造函数初始化，不能访问数据
componentWillMount：dom节点未加载完毕，可以访问数据并进项修改
componentDidMount：dom节点加载完毕，可以更改数据和事件监听
componentWillReceiveProps：可以实时更新Props的数据，重新渲染render
componentShouldUpdate：发生重渲染时，render渲染之前会调用，返回false或者true，false的时候不会再执行render，但是初始化的时候也不会调用
componentWillUpdate：componentShouldUpdate调用完之后被调用
componentDidUpdate：render渲染后调用
componentWillUnmount：组件销毁前调用
unmount：组件销毁后调用
12.跨域请求
13.webpack与gulp
14.ES6
15.浏览器如何实现多个标签页之间的通讯
16.css盒模型
17.css选择符有哪些？哪些属性可以继承
18.BFC
19.创建对象的方式
20.dom节点的操作
21.eval是做什么的
22..bind，call()和apply()的用法或者区别
23.如何判断当前脚本在浏览器环境还是node环境
24.react新的生命周期，弃用是生命周期
新：getDerivedStateFromProps(props, state) 弃用：componentWillUpdate，componentWillMount，componentWillReceiveProps
25.js事件循环
26.数组去重
1.遍历数组法
var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
var newArr = []
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i])
}
}
2.数组下标判断法
var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
var newArr = []
for (var i = 0; i < arr.length; i++) {
if (arr.indexOf(arr[i]) === i) {
newArr.push(arr[i])
}
}
3.ES6 Set去重
Array.from(new Set(arr))
4.利用sort
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return;
}
arr = arr.sort()
var arrry= [arr[0]];
for (var i = 1; i < arr.length; i++) {
if (arr[i] !== arr[i-1]) {
arrry.push(arr[i]);
}
}
return arrry;
}
5.利用filter
function unique(arr) {
return arr.filter(function(item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}
27.flex的所有的属性
diplay:flex
flex-director:row,colunm,row-reverse,column-reverse
flex-wrap:nowrap,wrap,wrap-reverse
justify-content:flex-start,flex-end,center,space-between,space-around
align-items:flex-start,flex-end,center,
28.react跨组件传值
react中context跨组件传值（爷孙组件等多组件深度传值）
29.如何形象地解释 JavaScript 中 map、foreach、reduce、filter间的区别？
1.map
对数组进行映射（对原数组中的每一项做某种操作，操作的结果保存在新数组中返回）
不会修改原数组
let arr = [1,2,3,4,5,6];
arr.map((item, index) => {
item.
})
30.事件监听中的true和false
let event = new Event("foo", { // 创建一个 type 为 foo 的事件对象，可以被阻止默认行为
"cancelable": true
})
document.addEventListener("foo", function(event) { // 在 document 上绑定 foo 事件的监听函数
console.log(event.defaultPrevented) // false
event.preventDefault()
console.log(event.defaultPrevented) // 还是 false，preventDefault() 无效
}, {
passive: true
})
document.dispatchEvent(event) // 派发自定义事件
<div id="s1">
<div id="s2">
</div>
</div>
第三个参数 false 和 true 分别对应 事件冒泡 和 事件捕获 假设上面的代码, s1和s2都用addEventListener绑定了点击事件 当false时, 点击s2, 则先执行s2, 再执行s1, 即从点击的元素开始往父级冒泡 当true是, 点击s2, 则先执行s1, 再执行s2, 即按document -> html -> body -> s1 -> s2的顺序捕获
31.react中diff的算法，key值可以使用index吗？
不可以，key值需要保证当前真实dom唯一存在，如果进行删除操作，删除的选项后面所有的key值均发生变化，所以最好用当前数据中的特殊id值。
虚拟dom是什么？
虚拟dom是一个JavaScript对象，我们用JS很容易模拟一个DOM树的结构，例如用这样的一个函数createEl(tagName, props, children)来创建DOM结构。
tagName标签名、props是属性的对象、children是子节点。
{
tag: 'div'
props: {
id: 'app',
class: 'page-box'
},
children: [
{
tag: 'p',
props: {
id: 'box',
class: 'home-page'
}
children: [
'this is text'
]
}
]
}
32.箭头函数中与普通函数的区别
1.箭头函数是匿名函数，不能作为构造函数，不能使用new；
2.箭头函数不能绑定arguements，取而代之用的是rest参数解决；
3.箭头函数没有原型属性；
4.箭头函数的this永远指向其上下文的this，没有办法改变指向，普通函数的this指向调用它的对象；
5.箭头函数不绑定this，会捕获其所在的上下文的this，作为自己的this值；
33.label中的for标签
34.typeof，instanceof，Object.prototype.toString.call();
let a = 1;
console.log(typeof (a))
console.log(a instanceof Number)
Object.prototype.toString.call(a)
number
false
"[object Number]"
let a = "1";
console.log(typeof (a))
console.log(a instanceof String)
Object.prototype.toString.call(a)
string
false
"[object String]"
let a = {"a": 1};
console.log(typeof (a))
console.log(a instanceof Object)
Object.prototype.toString.call(a)
object
true
"[object Object]"
let a = [1];
console.log(typeof (a))
console.log(a instanceof Object)
Object.prototype.toString.call(a)
object
true
"[object Array]"
let a = [1];
console.log(typeof (a))
console.log(a instanceof Array)
Object.prototype.toString.call(a)
object
true
"[object Array]"
let a = function(){};
console.log(typeof (a))
console.log(a instanceof Function)
Object.prototype.toString.call(a)
function
true
"[object Function]"
let a = function(){};
console.log(typeof (a))
console.log(a instanceof Object)
Object.prototype.toString.call(a)
function
true
"[object Function]"
35.做的项目中遇到的问题或者难点
（1）获取当前小程序所在的app （2）下拉加载
36.• 面试精选
JS基础（闭包、DOM事件模型、事件委托、JQ的ready跟window.onload的区别、原型链（查找顺序）、面向对象(继承方案)、函数式编程（纯函数的理解）、异步编程（回调、Promise及对ES6相关API的考察）、跨域方案、长连方案） • CSS基础（盒模型、查找优先级、清除浮动、margin折叠、两栏和三栏实现方案、rem和em的区别、移动端页面HTTP头的设置） • 浏览器基础（AJAX建联的几个状态、数据存储方案（localstorage、IndexDB+HTTP的Cookie）、缓存方案（appCache、ServiceWorker）、基本渲染原理） • 网络基础（HTTP状态码、HTTP(S)协议建联过程、HTTP协议中缓存相关特性） • 基础框架（React、Vue等）的实践，重点是React的知识，包括生命周期的理解、组件间通讯机制、数据绑定实现原理、虚拟DOM的优缺点、组件化实现的经验；thunk、saga、redux等是否用过及使用经验方面的问题 • 工程化实践（列举几种事件流处理方案，Webpack、gulp等处理过哪些任务） • 性能优化方案（基本优化方案，节流函数、动画API、加载优化，缓存利用，script的defer和async） • Web安全（SQL注入、XSS、CSRF等） • (可选)设计模式的应用（列举用过的几种设计模式） • (可选)架构实践（node web工程，组件化、模块化实践的经验） • 算法题（两个任意的数组，数据元素都是升序的，求两个数据组所有元素的前N大数）
37./deep/和!important的作用和区别
场景：一般我们使用vue和element-ui，在修改第三方组件库的样式时候，会修改到页面不存在的html的标签样式，此时就需要使用深度作用选择器。
1.脚手架vue-cli搭建的 less默认是不支持 >>> ，但是可用 /deep/ 和 ::v-deep；scss支持 >>> 2.使用/deep/的父标签后，子标签直接嵌套写样式!important就可以生效了。千万不能子标签也写/deep/，也就是说不能有两层/deep/。两层会无效。
标题下文以element-ui的表格el-table为例修改样式
正常书写样式的结果：
总的来说就是：我们会在拿不到的标签设置样式时候，在前面使用 /deep/ 以及 !important配合使用。 /deep/ 不生效就换成 ::v-deep 或 >>>
38.this.nextTick的原理
this.nextTick在vue项目中使用，监听dom元素更新之后的动作，当数据更新了，在dom中渲染后，自动执行该函数vue.nextTick()
定义：在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM。
所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的js代码。
理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。
39.移动端适配（app，微信小程序，浏览器H5，RN）
（1）没有IEH5和IOS小程序时，meta标签即可适配
<meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no" name="viewport" />
（2）存在IEH5和IOS小程序时，需要根据不同的设备做不同的适配
var meta = document.createElement("meta"); //创建meta标签
meta.setAttribute("name", "viewport"); //设置meta标签属性
var dpr = 1 || window.devicePixelRatio;
meta.setAttribute('content', 'width=device-width,initial-scale=' +
1 / dpr + ', maximum-scale=' + 1 / dpr + ', minimum-scale=' + 1 / dpr + ', user-scalable=no');
window.document.head.appendChild(meta);
function getStyle(obj, attr) {
if (obj.currentStyle) { //IE浏览器
return obj.currentStyle[attr];
}else {
return getComputedStyle(obj, false)[attr];
}
}
//判断当前系统
var ua = ***navigator***.userAgent,
isIOS = (/iPhone|iPad/gi).test(ua), //iso设备
isWeixin = /(?:MicroMessenger)/.test(ua);
document.addEventListener('DOMContentLoaded', function(e) { //当页面加载时执行
var fontSize = (getStyle(***document***.documentElement,"fontSize") || '16').replace('px', '') ;
if (isIOS && isWeixin) { //iOS手机并且是微信小程序时
document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 7.5 + 'px';
}else{
document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 7.5 / fontSize * 100 + "%" ;
}
}, false);
40.iOS手机为啥能打印出window
App开发和H5开发的区别
对于app开发，每一种移动操作系统都要重新开发一个app，比如安卓操作系统就需要基于Java开发app，而苹果操作系统就需要基于Objective-C开发app。
h5页面是运行再浏览器端的应用，所以无论是什么操作系统只要可以打开浏览器就可以运行h5页面，因此不需要基于操作系统额外开发。
这里的window不是windows操作系统，是浏览器对象模型的基类，跟操作系统没关系，只要是浏览器，小程序，H5都能打印出window全局对象
41.css3
圆角border-radius；盒阴影box-shadow；CSS3背景渐变background-image；
style={{ transform: `translateY(${translateValue})`}}
-webkit-animation: signbtnmove 3s 1;
@keyframes signbtnmove {
0% {
transform: scale(1);
-webkit-transform: scale(1);
left: 0;
top: 0;
}
34% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
left: 0;
top: 0;
}
100% {
transform: scale(0.3);
-webkit-transform: scale(0.3);
left: -200%;
top: 200%;
}
}
