【概念性的基本都是度娘等方式找到的O(∩_∩)O~，可能会有一些差错】
语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语
言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。
promise:
异步执行的同步代码
1、promise是一个构造函数
2、参数是一个回调 回调中有2个参数 一个是resolve 一个是reject
3、当异步执行完毕的时候 如果成功则调用resolve 通过.then里面的第一个参数来接受成功的回调 如果失败则调用reject 通过.then里面的第二个参数来接受失败
的回调
如何解决多个异步同步执行
var p1 = new Promise(function(resolve){
setTimeout(function() {
console.log('1');
resolve();
},4000)
})
function p2(){
return new Promise(function(resolve){
setTimeout(function() {
console.log('2')
resolve()
},3000)
})
}
function p3(){
return new Promise(function(resolve){
setTimeout(function() {
console.log('3')
resolve()
},2000)
})
}
function p4(){
return new Promise(function(resolve){
setTimeout(function() {
console.log('4')
resolve();
},1000)
})
}
p1.then(function(){
return p2();
}).then(function(){
return p3();
}).then(function(){
return p4();
})
封装promise
function PromiseFn(cb){
//状态值
this.status = "pending";
//参数
this.msg = "";
//回调
let _this = this;
cb(function(res){
_this.status = "resolve";
_this.msg = res;
},function(){
_this.status = "reject";
})
return this;
}
PromiseFn.prototype = {
then(){
var cb = arguments;
var _this = this;
var timer = null;
timer = setInterval(function(){
if(_this.status == "resolve"){
cb[0](_this.msg);
clearInterval(timer)
}else if(_this.status == "reject"){
cb[1]()
clearInterval(timer)
}
}, 500)
}
}
new PromiseFn(function(resolve){
setTimeout(function(){
console.log('1');
resolve("123");
},2000)
})
.then(function(res){
console.log(res)
})
三次握手四次挥手：https://m.pythontab.com/article/1323
子类选择器和后代选择器的区别和性能的优劣：
>作用于元素的第一代后代，空格作用于元素的所有后代。
子选择器的效率更高点。
用伪类选择器设计一个面包屑导航：
<style> li{ list-style:none; float:left; margin-right:5px; } #box li a{ display:block; position:relative; text-indent:3px; height:20px; padding:0 5px 0 6px; font-size:12px; line-height:20px; background:#3498db; color:#fff; } #box li a:after{ content: ""; /* 该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。 */ border-top:10px solid pink; border-bottom:10px solid pink; border-left:10px solid #3498db; position:absolute; top:0; right:-10px; z-index:4; border-top: 10px solid transparent; border-bottom: 10px solid transparent; /* border-left: 10px solid #3498db; */ } #box li a:before{ content:""; border-top:10px solid pink; border-bottom:10px solid pink; border-left:10px solid #fff; position:absolute; left:0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } #box li:first-child a{ border-top-left-radius: 2px; border-bottom-left-radius: 2px; } #box ul li:first-child a:before { display: none; } #box ul li:last-child a:after { display: none; } #box li a:hover{ background:salmon; } #box li a:hover:after{ border-left-color:salmon; } </style> </head> <body> <div id="box"> <ul> <li><a href="#">首页</a></li> <li><a href="#">首页1</a></li> <li><a href="#">首页2</a></li> <li><a href="#">首页3</a></li> <li><a href="#">首页4</a></li> </ul> </div> </body>
css预编译：less语言
什么是css预处理器？优点是什么？
css预处理器用一种专门的编程语言，进行web页面样式设计，然后在编译成正常的css文件，以供项目使用。在css中使用 变量、简单的逻辑程序、函数。可以让你的css更加简洁 、适应性更强、可读性更佳、更易于代码的维护。
JS预编译:进行函数和变量的声明提升，先进行空间分配，执行时进行赋值
const arr = [] arr.push(6)会不会报错，为什么？
不会
js 动画和css动画的区别：
代码复杂度，js 动画代码相对复杂一些
动画运行时，对动画的控制程度上，js 能够让动画，暂停，取消，终止，css动画不能添加事件
动画性能看，js 动画多了一个js 解析的过程，性能不如 css 动画好
深拷贝 浅拷贝：
深拷贝和浅拷贝是只针对Object和Array这样的复杂类型的
也就是说a和b指向了同一块内存，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝
浅拷贝， ”Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象
深拷贝，JSON.parse()和JSON.stringify()给了我们一个基本的解决办法。但是函数不能被正确处理
事件流：
当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的过程叫做DOM事件流；
元素触发事件时，事件的传播过程称为事件流，过程分为捕获和冒泡两种
冒泡事件：微软提出的 事件由子元素传递到父元素的过程，叫做冒泡
捕获事件：网景提出的 事件由父元素到子元素传递的过程，叫做事件捕获
事件处理机制：事件冒泡 事件处理 事件捕获 事件默认
jsonp 发起一次请求之后不能再发起，再次调用需要再创建一个script标签
es6定义变量的方式有6种：function var class let const import
ajax 同步发起请求接收数据不用写onreadyststechange事件直接写ajax.responseText
垂直居中的几种方法
1）margin:0 auto
2 ) position 定位
父元素设置为：position: relative;
子元素设置为：position: absolute;
距上50%，据左50%，然后减去元素自身宽度的距离就可以实现
3）position transform
transform: translate(-50%,-50%); 【待补充】
4 ) flex布局
5） table-cell布局
父元素设置相对定位，子元素设置绝对定位，top、bottom、left和right 均设置为0，*margin设置为auto
伪数组转成真数组方法
1）使用Array.prototype.slice.call();
2）使用ES6中Array.from方法;
3）可以声明一个空数组，通过遍历伪数组把他们重新添加到新的数组中
4）使用原型继承
aLi.__proto__ = Array.prototype
var aLi = document.querySelectorAll('li');
console.log(aLi.constructor === Array) //false4
aLi.__proto__ = Array.prototype;
console.log(aLi.constructor === Array) //true
简述一下src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么 将js脚本放在底部而不是头部。
px和em的区别
相同点：px和em都是长度单位；
异同点：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
rem是相对于html为基准的单位，一般会将html设置为font-sieze：100px,以下的font-size值设置为/100后的值就可以了
浏览器的内核分别是什么?
IE: trident内核 360浏览器 遨游1、2 猎豹。。。。 -ms-
Firefox：gecko内核 -moz-
Safari：webkit内核 （遨游3.x为IE与Webkit双核） -webkit-
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核 -o-
Chrome：Blink(基于webkit，Google与Opera Software共同开发)
优雅降级、渐进增强：
优雅降级是从复杂的现状开始，并试图减少用户的体验供给，而渐进增强是从非常基础的能够起作用的版本开始不断扩充，以适应未来环境的需求，渐进意味着往前看，降级意味
着往后看；
BFC：
块级格式化上下文，是一个独立的渲染区，规定了内部的块如何布局，并且与外部不相关，是web页面中盒模型布局的css渲染模式，属于常规文档流；
作用：自适应两档布局，清楚内部浮动，防止margin上下重叠；
instanceof 运算符是用来在运行时指出对象是否是特定类的一个实例，它返回的是一个布尔值
http状态码：
1开头表示信息类：接收到请求并继续处理；
2开头表示响应类：动作被成功接收理解和接受；
3开头表示重定向类：为了完成指定动作，必须接收进一步的处理；
4开头表示客户端错误：请求包含语法错误或不能正确执行；
5开头表示服务器错误：服务器不能正确执行一个正确的请求；
jq jsonp ajax是两种技术；前端解决跨域的方式jsonp；后端可以设置请求头或者正向代理反向代理等
fetch可以在前端解决跨域但是不能拿回请求
js的垃圾回收机制是什么原理（js）!!
找出不再使用的变量，然后释放掉其占用的内存，并且垃圾收集器会按照固定的时间间隔，周期性地执行这一操作；
垃圾回收策略：标记清除(较为常用)和引用计数。
标记清除：定义和用法：当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为："离开环境"。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变 量，剩下的就是被视为准备回收的变量。
到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。
引用计数：
定义和用法：引用计数是跟踪记录每个值被引用的次数。
基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。
经常遇到的解决js兼容性问题列举至少三个（js）!
事件 e = e || window.event
事件委托 e.target || e.srcElement
添加事件监听 addEventListener || attachEvent
键盘事件 e.keyCode || e.which
阻止冒泡 e.stopPropagation || e.cancelBubble
获得非行间样式 getComputedStyle(div1,null)[‘color’] ||div1.currentStyle[‘color’]
document.documentElement || document.body
你知道哪些针对jQuery的优化方法
(1)基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。
(2)频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。
比如：var str=$("a").attr("href");
for (var i = size; i < arr.length; i++) {}
(3)for 循环每一次循环都查找了数组 (arr) 的.length 属性，在开始循环的时候设置一个变量来存储这个数字，可以让循环跑得更快：
for (var i = size, length = arr.length; i < length; i++) {}
网页加载速度优化的方法：减少请求，整合资源（讲js代码和css放到一个公共的文件中供多个页面使用），
箭头函数和普通函数的区别
匿名函数的this指向不能用bind / call之类的去改变
(1).this的区别
原因：箭头函数不会自动绑定局部变量，如this，arguments，super(ES6)，new.target(ES6)等，所以箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域。在
箭头函数中调用 this 时，仅仅是简单的沿着作用域链向上寻找，找到最近的一个 this 拿来使用
[--- 箭头函数中的this指向问题
定义一个函数时是不知道this指向的，只能在函数调用时才能确定；箭头函数本身的this是不指向任何，会沿着作用域链向上查找，最接近的一个普通函数中的this就是指向；
匿名函数和闭包中this指向window ----]
(2).实际上箭头函数中并不只是 this 和普通函数有所不同，箭头函数中没有任何像 this 这样自动绑定的局部变量，包括：this，arguments，super(ES6)，new.target(ES6)…
…在普通函数中，会自动绑定上的各种局部变量，箭头函数都是十分单纯的沿着作用域链向上寻找……
AMD和CMD的区别
【AMD：异步模块化定义，是一个模块化开发的规范，AMD在定义模块的时候要先声明其依赖的模块。】
共同点：都是一种框架在推广的过程中对模块定义的规范产出；而且他们都是异步加载模块。
CMD 推崇依赖就近,是延迟执行。AMD 推崇依赖前置,是提前执行
js/css等优化
js方面(事件委托：节约内存，提高性能；for循环中将length属性放到外面，这样就只做一次查找)
css（精灵图：多张图片整合到一张图上，减少http请求的次数）