前端知识点七61、性能优化减少 HTTP 请求使用服务端渲染静态资源使用 CDN 将 CSS 放在文件头部，Jav

61、性能优化

减少 HTTP 请求
使用服务端渲染
静态资源使用 CDN
将 CSS 放在文件头部，JavaScript 文件放在底部
使用字体图标 iconfont 代替图片图标
压缩文件
图片优化 1）图片延迟加载 2）响应式图片 3）图片压缩 4）CSS3 效果代替图片 5）精灵图
使用事件委托
降低 CSS 选择器的复杂性浏览器读取选择器，遵循的原则是从选择器的右边到左边读取
使用 flexbox
减少内存泄漏闭包的使用，全局变量的使用
减少重排重绘当改变 DOM 元素位置或大小时，会导致浏览器重新生成渲染树，这个过程叫重排。当重新生成渲染树后，就要将渲染树每个节点绘制到屏幕，这个过程叫重绘。重排会导致重绘，重绘不会导致重排。
link代替import
减少dom操作
避免css表达式
防抖和节流函数
数据扁平化管理
列表的滚动窗口
本地缓存
按需加载资源
使用负载均衡方案

62、webpack性能优化

路由懒加载
image-webpack-loader
vender.js过于大，进行拆分由于webpack打包后的js过大，以至于在加载资源时间过长。所以将文件打包成多个js文件，在需要的时候按需加载。
引入三方组件库过大的话，可以进行按需加载
web前端项目，静态资源放在cdn上比较多，gzip的压缩是非常必要的，它直接改变了js文件的大小，减少两到三倍。 nginx: 开启gzip和缓存
服务器缓存

63、继承

原型链继承核心：父类实例作为子类原型优点：1：复用了父类构造函数方法缺点：1：不能向父类构造函数方法传参, 2：子类实例共享父类构造函数引用属性

function Parent(name){
  this.name = name || 'parent'
  this.arr = [1] 
}
Parent.prototype.say = function(){
  console.log('hello')
}
function Child(like){
  this.like = like
}
Child.prototype = new Parent()
Child.prototype.constructor = Child
		
let boy1 = new Child()
let boy2 = new Child()
//优点1：复用了父类构造函数方法
console.log(boy1.say === boy2.say)	//true
//缺点1：不能向父类构造函数方法传参
console.log(boy1.name, boy2.name) // parent parent
//缺点2：子类实例共享父类构造函数引用属性
boy1.arr.push(2)
console.log(boy2.arr)			//[1,2]

构造函数继承核心：借用父类构造函数方法来增强子类实例优点：1：子类实例可以强父类传参，2：子类实例不共享父类引用属性，3：可实现多继承（通过多个call或者apply继承多个父类）缺点：1：父类方法不能复用（相当于每次创建实例都重新创建了一次方法）, 2：不能继承子类原型上的方法

function Parent(name){
  this.name = name
  this.arr = [1] 
  this.say = function(){
    console.log('hello')
  }
} 
function Child(name, like){
  Parent.call(this,name)
  this.like = like
}
		
let boy1 = new Child('Jhon', 'Apple')
let boy2 = new Child('Mary', 'Orange')
//优点1：可以向父类构造函数传参
console.log(boy1.name, boy2.name)	//Jhon Mary
//优点2：子类不共享父类构造函数的引用属性 
boy1.arr.push(2)
console.log(boy2.arr)			//[1]
//缺点1：方法不能复用
console.log(boy1.say === boy2.say) 	//false
//缺点2：不能继承父类原型上的方法
Parent.prototype.walk = function(){
  console.log('walk')
}
console.log(boy1.walk)	//undefined

组合继承核心：通过调用父类构造方法继承父类属性并保存传参的优点，通过父类的实例作为子类的原型复用方法优点：1：创建子类实例，可以向父类传参，2：原型方法实现复用，3：不共享父类构造函数的引用属性缺点：1：调用了两次父类构造函数的方法

//组合继承
function Parent(name){
  this.name = name
  this.arr = [1]
}
Parent.prototype.say = function(){
  console.log('hello')
}
function Child(name, like){
  Parent.call(this, name)		//第二次调用父类构造函数方法
  this.like = like
}
Child.prototype = new Parent()	 //第一次调用父类构造函数方法
Child.prototype.constructor = Child
let boy1 = new Child('John', 'Apple')
let boy2 = new Child('Mary', 'Orange')
//优点1：可以向父类构造函数传参
console.log(boy1.name, boy2.name) // John   Mary
//优点2：可以复用父类原型上的方法
console.log(boy1.say === boy2.say)	//true
//优点3：不共享父类构造函数引用属性
boy1.arr.push(2)
console.log(boy2.arr)	//[1]
//缺点1：调用了两次父类构造函数

组合继承优化

function Parent(name){
  this.name = name
  this.arr = [1]
}
Parent.prototype.say = function(){
  console.log('hello')
}
function Child(name, like){
  Parent.call(this, name)				 
  this.like = like
}
//通过Object.create把Parent.prototype进行复制一份，1.避免调用 2.深度拷贝不会共享属性
Child.prototype = Object.create(Parent.prototype)		 
Child.prototype.constructor = Child
let boy1 = new Child('John', 'Apple')
let boy2 = new Child('Mary', 'Orange')
let parent = new Parent('Label')
//优点1：可以向父类构造函数传参
console.log(boy1.name, boy2.name) // John   Mary
//优点2：可以复用父类原型上的方法
console.log(boy1.say === boy2.say)	//true
//优点3：不共享父类构造函数引用属性
boy1.arr.push(2)
console.log(boy2.arr)	//[1] 
//父类实例指向父类原型
console.log(boy1.constructor, boy2.constructor, parent.constructor)

64、原型链

在js中万物皆对象，任何对象都会有一个__proto__属性,当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

65、0.1 + 0.2 === 0.3 嘛？为什么？

10进制整数转化为2进制，除2取余 10进制小数转化为2进制，乘2取整 0.1和0.2都是无限循环，截取52位，0舍1入（类似4舍5入） 0.2+0.7 = 0.899999999999

66、v-show和v-if指令的共同点和不同点？

答: 共同点：都能控制元素的显示和隐藏；不同点：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。

67、如何获取dom?

答：ref="domName" 用法：this.$refs.domName

68、单页面应用和多页面应用区别及优缺点

答：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新单页面的优点：用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。单页面缺点：不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。

69、vue常用修饰符

stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
capture：与事件冒泡的方向相反，事件捕获由外到内；
self：只会触发自己范围内的事件，不包含子元素；
once：只会触发一次。
passive：滚动时候触发
sync

70、get和post的区别

GET与POST都有自己的语义，不能随便混用。
对参数的数据类型，GET只接受ASCII字符，而POST支持多种编码方式。
参数传输：GET请求的参数在URL中，POST请求是在请求的body里。