只是我自己刷的哦!不是真的面试问到的,是在为面试做准备!
箭头函数和普通函数有什么区别?
箭头函数是匿名函数,不能作为构造函数,不能使用new。
箭头函数不绑定arguments,取而代之用rest参数解决。
箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的this值。
箭头函数通过call()或apply()方法调用一个函数时,只传入了一个参数,对this没有影响。
箭头函数没有原型属性。
箭头函数不能当做Generator函数,不使用yield关键字。
new操作具体做了什么?
创建一个空的对象
将this指向这个对象
通过this,为这个对象添加属性
通过this,将__proto__
属性指向构造函数的原型对象
call、apply、bind区别?
call()、apply()和bind()都是用来改变函数执行时的上下文的,可以借助他们实现继承。
call()和apply()唯一的区别就是参数不一样,call()是apply()的语法糖。
bind()是返回一个新的函数,供以后调用,而apply()和call()是立即调用。
JS判断变量是不是数组的方法?
1、instanceof
var arr=[];
arr instanceof Array
2、原型prototype+toString+call()
var arr=[];
Object.prototype.toString.call(arr)
3、原型protitype+isPrototypeOf()
var arr=[];
Array.prototypr.isPrototypeOf(arr)
4、构造函数constructor
var arr=[];
console.log(arr.constructor.toString())
5、数组方法isArry()
var arr=[];
Array.isArray(arr)
Vue双向绑定
数据劫持:vue.js是采用数据劫持结合发布者-订阅者模式,通过Object.definePrototy()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
MVVM
MVVM为: Model、View、ViewModel
Model代表数据模型,例View返回的data对象
View代表UI组件
VM是View和Model的桥梁,主要负责:数据绑定和视图监听
所理解的MVVM响应式原理
MVVM作为绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭建起Observer、Compile之间的通信桥梁,达到数据变化->视图更新;视图交互变化->数据model变更的双向绑定效果。
Vue生命周期(2.x)
beforeCreate:创建之前,还没有data数据和Method方法
Created:创建完成,data和Method可以使用了
beforeMount:渲染之前
mounted:页面渲染已经完成,可以操作DOM了
beforeUpdate:data改变之前,对应的组件重新渲染之前
updated:data改变之后,对应的组件重新渲染完成
beforeDestory:在实例销毁之前,此时实例还可以使用
destroyed:实例销毁后
第一次进入组件或者页面,会执行哪些生命周期?
beforeCreate
Created
beforeMount
mounted
- 如果使用了keep-alive组件会多执行一个activated
- 但是第二次进入之后就只执行activated,因为组件被缓存了。
keep-alive组件作用
vue性能优化
一般结合路由使用,如果没有变化,可以做一个缓存,不用重新加载。
activated和deactivated两个生命周期钩子函数。
用keep-alive包裹的组件在切换的时候不会进行销毁,而是缓存到内存中,并执行deactivated函数,命中缓存渲染结束后会执行activated钩子函数。
Vue优化方式
v-if和v-show
图片懒加载
路由懒加载
减少重新渲染和创建dom结点的时间,采用虚拟dom
使用Object.freeze()
方式冻结data中的属性,从而阻止数据劫持
v-if和v-show
1、v-if是动态向dom树内添加或者删除dom元素
v-show是通过设置dom元素的display样式控制显示与隐藏
2、编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适的销毁和重建内部的事件监听和子组件
v-show只是简单的css切换
3、编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在第一次条件变化时才开始局部编译
v-show是在任何条件都被编译,然后被缓存,dom元素保留
4、v-if性能切换消耗更高
v-show初始渲染消耗更高
5、v-if适合运营条件不太变化
v-show适合频繁切花
虚拟dom
虚拟dom是相对于浏览器所渲染出来的真实dom,在react、vue等技术出来之前,想要改变页面展示内容只能通过遍历查询dom数找到需要修改的dom节点,然后进行修改来达到更新ui的目的。
这种方式相当损耗计算资源,因为每次查询都要遍历整颗dom树,如果建立一个和dom树虚拟的dom对象(js对象),以对象嵌套的方式来表示dom树,那么每次dom的更改就变成了js对象属性的更改,这样查找js对象的属性变化比查询dom树性能开销小。
dom树优缺点
缺点:首次大量渲染dom时,由于多了一层虚拟dom的计算,会比插入innerHTML慢
优点:减少了dom操作,减少了回流与重绘。
保证性能的下限,性能虽然不是最好但是具备局部更新的能力,大部分时候会比正常dom性能高。
回流与重绘
回流
render树中一部分或全部元素需要改变尺寸、布局、或着需要隐藏而需要重新构建,这个过程叫做回流
回流必将引起重绘
每个页面至少需要一次回流,就是在页面第一次加载的时候。
重绘
render树中一部分元素改变,而不影响布局的,只影响外观的,比如颜色。
页面至少经历一次回流和重绘(第一次加载的时候)。
当页面中元素样式的改变并不影响它在文档流中的位置时(例如:color、background-color、visibility等),这些属性只是影响元素的外观,风格,而不会影响布局的,浏览器会将新样式赋予给元素并重新绘制它,这个过程称为重绘。
触发回流或重绘的情况:
• 页面首次渲染
• 浏览器窗口大小发生改变
• 元素尺寸或位置发生改变
• 元素内容变化(文字数量或图片大小等等)
• 元素字体大小变化
• 添加或者删除可见的DOM元素
区别
回流必将引起重绘,但是重绘不一定会引起回流。
比如只有颜色改变的时候只会发生重绘不会发生回流。
页面布局和几何属性改变时就需要回流。
添加或者删除可见的DOM元素,元素位置改变,元素尺寸改变、内容改变、页面渲染初始化、浏览器窗口改变等
优化
使用DocumentFragment进行缓存操作,引发一次回流和重绘;
使用display:none技术,只引发两次回流和重绘;
使用cloneNode(true or false)和replaceChild技术,引发一次回流和重绘;
不要经常访问会引起浏览器flush队列的属性,如果确实要访问,就利用缓存;
让元素脱离动画流,减少回流的Render tree的规模;
位于<head>
间的代码片段是做什么用的?
-
<meta name="viewport" content="width=device-width, initial-scale=1">
表示支持响应式 -
<meta name="apple-mobile-web-app-capable" content="yes" />
iPhone私有标签,它表示:允许全屏模式浏览 -
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
iPhone私有标签,它指定的iPhone中safari顶端的状态条的样式 -
<meta name="format-detection" content="telephone=no; email=no" />
不识别邮件和不把数字识别为电话号码 -
initial-scale :初始的缩放比
-
minimum-scale:允许用户缩放到最小比例
-
maximum-scale:允许用户缩放到最大比例
-
user-scalable:用户是否可以手动缩放
网关协议
BGP:边界网关协议
ICMP:控制报文协议
PPP:点对点协议
RIP:内部网关协议(IGP)
BGP:外部网关协议