前端面试题
1、call和applay的区别？
call和apply是函数的两个非继承而来的方法。这两个方法是在特定的作用域中调用函数，实际上是等于设置函数体内的this对象的值。可以传入两个参数。第一个参数是运行函数所在的作用域，另一个是传入的参数。
区别是：apply第二个参数掺入的是数组或者argument对象，call第二个参数传入的是一个一个的参数，也就是说传递给函数的参数必须一个一个列举出来
call和apply真正的作用的扩充函数的作用域。
window.color="red";
var o={color:"blue"};
function sayColor(){
alert(this.color);
}
sarColor.call(this) //red
sayColor.call(window) //red
sayColor.call(o) //blue
PS:bind
ES5还定义了一个方法：bind()。这个方法会创建一个函数的实例。其this值会绑定到传给bind()函数的值。
window.color="red";
var o={color:"blue"};
function sayColor(){
alert(this.color)
};
var objectSayColor=sayColor.bind(o);
objectSayColor() //blue
2、什么是闭包？
闭包是指有权访问另一个函数作用域中的函数。创建闭包的方法很常见，就是在一个函数内部创建另外一个函数。
闭包引起的一个问题就是：内存泄漏。
3、什么是盒子模型？有什么区别？
W3C盒子模型和IE盒子模型。
W3C盒子模型包括padding、margin、border、content。其中content的宽度=width；
IE盒子模型与W3C盒子模型的区别就是width=content+border+margin
无论是IE和还是W3C，margin的效果都是一样的。对于行级元素，margin上下无效，左右有效。对于块级相邻元素的情况如下：
（1）都是正数：取最大值。距离=Math.max(margin-bottom,margin-top);
(2)都是负数：取最小值。距离=Math.min(margin-bottom,margin-top);
(3)一个正数、一个负数。取正负相加的值。距离=marin-top+margin-bottom;
4、如何优化性能？
·什么是前端性能优化？
从用户访问资源到资源完整的展现在用户的面前。通过技术手段和优化策略，缩短每个步骤的处理的时间，从而提升资源的访问和呈现速度。
·原因：
在web站点的构建过程当中，很多因素都会影响访问速度，从而用户体验低下导致用户的流失。
·优化的方法：
减少http请求次数，合并js、css
使用CDN，将用户安排在近的服务器上
使用缓存，缓存ajax,使用外部的css和js以便缓存
压缩资源 使用gzip压缩js和css文件
代码层面 避免使用通配符选择器、样式选择器，样式放在顶部，脚本放在底部
5、浏览器的渲染机制是什么？
第一步：浏览器解析html，构建DOM树
第二步：根据css构建渲染树，包括元素的大小、颜色，隐藏的元素不会被构建在该树中
第三步：根据css样式构建布局树，主要确定元素的位置
第四步：根据前面的信息，绘制渲染树
6、快速排序？顺便说说常见的几种排序
冒泡排序、插入排序、归并排序、快速排序
7、继承的方式有哪些？优缺点是什么？
（1）原型链继承
function A(){
}
function B(){
}
//继承A的方法
B.prototype=new A();
//以下可以给B的原型添加方法
B.prototype.getName=function(){
return this.name
}
var person=new B();
优点：只需要一行代码
在B的原型上添加属性或者方法时，不会影响到A。
缺点：书写顺序问题。给B添加的方法的代码一定要放在替换原型的语法之后
无法实现多继承
无法传参
包含引用类型的原型，导致会被所有的实例共享。
//关于引用类型共享的问题
function A(){
this.colors=["red","blue"];
}
function B(){
}
B.prototype=new A();
var person1=new B();
person1.colors.push("yellow");
console.log("person1_color",person1.colors);
var person2=new B();
console.log("person2_color",person2.colors);
（2）借用构造函数继承（有时也叫伪造经典或者经典继承）
function A(){
}
function B(){
A.call(this);
}
var person=new B();
优点：可以传递参数
可以实现多继承
解决了共享的问题
缺点：创建的实例只是子类的实例
只能继承构造函数的实例和方法。而一般在构造函数中，会写一些属性，原型中会写一些方法。所以只能继承构造函数中的属性
每创建一个东西，都是重新创建一个新的实例，会占用多余的内存，不存在复用
（3）组合继承（伪经典继承）
function A(){
}
function B(){
A.call(this); //执行第一次
}
B.prototype=New A(); //执行第二次
B.prototype.constructor=B;
var person1 =new B();
优点：可以实现多继承
可以传参
缺点：父类的构造函数被调用了两次。如果父类的构造函数较大，比较耗性能，就会影响性能
同名覆盖，在实例中有一份，在原型中有一份，就会占用多余的内存
（4）原生式继承
利用的原理是B.__proto__=A
function (o){
function F(){};
F.prototype=o;
return F();
}
（5）寄生式继承 使用与对象
function createOther(o){
var clone=Object(o);
clone.sayHi=function(){ //对象增强
alert("sayHi");
}
return clone;
}
//例：
var person={
name:"kangxiaoxiao",
freiends:["lala","meimie"]
}
var createOther=createOther(person);
createOther.sayHi();
（6）寄生组合式继承
function inheritPrototype(B,A){
var prototype=Object(A.prototype); //创建对象
prototype.constructor=B //对象增强
B.prototype= prototype; //指定对象
}
//例：
function A(name){
this.name=name;
this.colors=["red","blue"]
}
A.prototype.sayName=function(){
alert(this.name);
}
function B(name,age){
A.call(this,name);
this.age=age
}
inheritPrototype(B,A);
B.prototype.sayAge=function(){
alert(this.age)
}
var person1=new B("kangxiaoxiao","27");
8、以下方法有什么问题？如何优化？（涉及到内存泄漏）
function assignHandler(){
var doc=document.createElement("div");
doc.onclick=function(){
alert(doc.id)
}
}
以上的代码创建了一个作为doc元素时间处理程序的闭包，而这个闭包又创建了一个循环引用。由于匿名函数保存了一个对assignHandler()的活动对象的引用，因此就无法减少element的引用数。只要匿名韩式存在，doc的引用数至少就是1，因此它所占用的内存就永远不会被收回。
改进的办法如下：
function assignHandler(){
var doc=document.createElement("div");
var id=doc.id
doc.onclick=function(){
alert(id);
}
doc=null;
}
好处：将id赋值给一个变量，减少对doc的循环引用。将element变量设置为null，能够解除对DOM对象的引用，顺利减少其引用次数，确保正常回收占用的内存。
9、vue的生命周期
创建前／后：beforeCreate/created
挂载前／后：beforeMount/mounted
更新前／后：beforeUpdate/updated
卸载前／后： beforeDestory/destoryed
10、vue常见的指令有哪些？
v-if v-module v-show v-on:click
11、返回false的哪些？
null undefind 0 -0 NAN 空字符串
12、请求数据，渲染页面，可以在vue的哪些生命周期中进行？
mounted
13、vue如何封装自定义组件？什么算是好的自定义组件
·注册全局组件
//创建实例
new Vue({
el: '#some-element',
// 选项
})
//注册全局组件
Vue.component('my-component', {
// 选项
template: '<div>A custom component!</div>'
})
//自定义元素
<div id="example">
<my-component></my-component>
</div>
//局部注册：
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 将只在父组件模板中可用
'my-component': Child
}
})
14、vue双向绑定的原理？
vue会遍历data中的所有属性，并使用object.definProperty把这些属性全部转化成getter／setter。而每个组件的实例都有watcher对象，它会在组件渲染过程中记录为依赖。之后当依赖项setter被调用时，会同志wather重新计算，从而致使它关联的组件得到更新。
15、微信小程序如何实现本地存储？
大小限制为10M
//存入 异步
wx.setStorage({
key:"key",
data:"value"
})
//存入 同步
try {
wx.setStorageSync('key', 'value')
} catch (e) {
}
//获取
wx.getStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})
//获取storage的信息 异步
wx.getStorageInfo({
success: function(res) {
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
}
})
//删除
wx.removeStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})
//清除storage
wx.clearStorage()
16、小程序常用的组件有哪些？常用的API
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success: function(res) {
console.log(res.data)
}
})
17、小程序与H5有什么不同？
（1）是运行环境的不同
传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。
（2）是开发成本的不同
只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG
（3）是获取系统级权限的不同
系统级权限都可以和微信小程序无缝衔接
（4）便是应用在生产环境的运行流畅度
长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验总是不尽人意，需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立
18、小程序中能不能嵌入H5页面？
可以，个人和海外类型的不支持
<!-- wxml --> <!-- 指向微信公众平台首页的web-view --> <web-view src="https://mp.weixin.qq.com/"></web-view>
19、你对加班怎么看？
各有看法
20、什么是语义化？
根据内容选择合适的标签，便于开发人员阅读和爬虫的SEO及浏览器的解析。
21、在Js中，转换成false的值有？
null、undefined、NAN、0，-0，空字符串
22、this的指向的分类
（1）纯函数的调用，this指向全局作用域（window）
（2）作为对象的方法和属性，指向的是对象
（3）作为构造函数的调用，指向的是构造函数的实例
（4）强制指向一个对象。call／apply指向的传入的第一个参数
23、图片懒加载等原理
将图片的地址给懂data=XXX,当滚至该区域时，用src代替
