前端面试题(3)

1.HTML5中新增了哪些内容？

广义上的html5指的是最新一代前端开发技术的总称，包括html5，CSS3，新增的webAPI。
Html中新增了header,footer,main,nav等语义化标签，新增了video,audio媒体标签，新增了canvas画布。新增了一些标签属性，例如input的placeholder。
Css3中新增了：圆角，阴影，滤镜，vwvh单位，flex布局，媒体查询，过度和动画，伪类。
webAPI,新增了localStorage和sessionStorage，querySelector，webSocket，requestAnimationFrame，Worker(类似分线程)，地理位置。

2.Css中Position定位都有哪些方式，分别是什么效果。

static(默认)， 静态定位，流式布局
relative，相对定位，参与流式布局，可以使用left等在原有位置上进行位置调整。
absolute，绝对定位，脱离文档流，相对于另一个元素进行定位。
fixed，固定定位，脱离文档流，相对于浏览器窗口定位，不随页面滚动而改变位置。
sticky，粘性定位，可实现动态fixed。

3.absolute定位的元素相对于哪个元素进行定位。

相对于离自己最近的、position为非static的祖先元素进行定位。

4.前端页面中动画都有哪些实现方式，各自分别适用于哪些场景？

Transition：简单的动画，只需要在两个状态之间变化的动画。
keyframeAnimation：适合需要在多个状态连续进行的动画。
js动画：功能最强的动画，但是效率最低。

5.怎么隐藏页面中的某个元素？

Display:none; 隐藏且不占用位置。
Visibility:hidden; 隐藏但保留位置。

6.怎样实现在动画结束之后执行一段代码？

过度动画：监听transitionend事件。
关键帧动画：监听animationend事件。
Js动画：1，手写js动画时，直接在停止动画的代码之后添加要执行的代码，如果使用js动画工具库，则把要执行的代码写在动画结束时的回调函数中。

7.怎样解决js中回调函数多层嵌套问题和多异步任务并发执行问题。

多层嵌套问题：使用promise，使用async+await。
多异步任务并发执行问题：合并promise。

7.1.页面打开时需要发送很多ajax请求（例如加载下拉列表项），而且部分ajax请求之间还有依赖关系，如何优雅地编写代码保证这些请求即高效又有序地执行？

使用promise或者async函数，防止回调函数多层嵌套。
当多个异步任务需要先后执行时，使用Promise连续.then控制。
多个异步任务并发执行没有先后依赖时，使用Promise.all合并。

8.Js函数中的this究竟指向谁？

独立存在的函数，直接调用时，非严格模式下其中的this指向全局对象(浏览器中是window,nodejs中是global)，严格模式下指向undefined。
如果是对象的方法，则通过谁调用，就指向谁。
构造函数通过new调用时，this是正在创建的对象。,

8.1.怎样改变函数中this的指向。

函数中的this是可以通过方法改变的。
Call ，call是函数对象的方法，作用是指定this，调用这个函数。
apply，和call基本一样，唯一的区别是，传参方式不同，aplly需要提供一个数组。
Bind，bind也是函数对象的方法，作用是生成一个新的函数，新的函数和原函数代码一样，但是里面的this是绑定过的。

8.2.如何保证一个类中的很多方法（函数）不管怎么调用，this总是指向实例对象？

在类中声明实例方法时直接声明为箭头函数，或者在声明时添加bind(this)，或者在构造函数中对实例方法进行bind(this)。

9.浏览器中事件传播的流程是什么？怎样阻止事件的传播？怎样阻止事件的默认行为。

事件触发后，先从根元素到叶子元素逐层捕获，然后再从叶子元素到根元素逐层冒泡。

e.stopPropergation();
e.preventDefault();

10.怎样判断一个变量是什么类型的。

typeof只能判断类型，所以，数组和对象返回的都是object，这时就需要使用instanceof来具体判断。
instanceof用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。

//typeof
let value = 6;
console.log(typeof value) //number

//instanceof使用格式：前面是个对象，后面是一个构造函数。而且返回的是布尔型的，不是true就是false。
object instanceof constructor

// 例子
function People(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
const student = new People('大龙', '20', man);

console.log(student instanceof People); //true
console.log(student instanceof Object);  //true

11.数组有哪些常用方法，字符串、数字有哪些常用方法。

11.1.数组

不改变原数组（创造新数组）的方法

• concat

concat()：拼接两个或两个以上的数组，并返回一个新数组，不会改变原有数组的值.
var arr = ['青龙','白虎'];
 console.log(arr.concat(2,'大象'))  //Array(4) [ "青龙", "白虎", 2, "大象" ]
 console.log(arr)    //Array [ "青龙", "白虎" ]

• slice

slice()：从已有的数组中返回选定的元素。
语法：arrayObject.slice(start,end)
start 必需。规定从何处开始选取(包括该位)。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end 可选。规定从何处结束选取(不包括该位)。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
var arr = ['html','js','css','vue','react'];
let newArr = arr.slice(2,4)
console.log(arr)  //Array [ "html", "js", "css", "vue", "react" ]
console.log(newArr)  //Array [ "css", "vue" ]

• join

join()：把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
//参数：1个，可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
var arr = ['青龙','白虎','朱雀','玄武']
console.log(arr.join())  //青龙,白虎,朱雀,玄武
console.log(arr.join('+'))  //青龙+白虎+朱雀+玄武

改变数组的方法

1.pop(): 删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。
pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。
2.push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。

3.reverse():用于颠倒数组中元素的顺序。

4.shift(): 数组的第一个元素从其中删除，并返回第一个元素的值,如果数组是空的，那么 shift() 方法将不进行任何操作.
shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。
5.unshift():将参数添加到原数组开头，并返回数组的长度.

• splice

参数	描述
index	必需。整数，规定添加/删除元素的位置（元素在数组的下标），使用负数可从数组结尾处规定位置。
howmany	必需。要删除的元素数量。如果设置为 0，则不会删除元素。
item1, …, itemX	可选。向数组添加的元素。

splice()：向/从数组中添加/删除元素，然后返回被删除的元素。
注意：splice方法会改变原始数组。
var arr = ['青龙','白虎','朱雀','玄武'];
   arr.splice(2,1,'大象',"狮子")

   console.log(arr) 	//Array(5) [ "青龙", "白虎", "大象", "狮子", "玄武" ]

12.怎样实现元素上下左右都居中？

• 实现元素本身内容居中：text-align:center+行高。或flex布局。
• 实现子元素在父元素中居中：绝对定位+上下左右设置0+margin:auto。
• 绝对定位+left,top:50%+transform:translate:-50%。Flex布局。

13.怎样在不使用新元素的情况下清除浮动？

在浮动元素的父元素上添加一个class,为这个class添加后缀.after样式，其中写content:””;display:block;clear:both

14什么是响应式页面，是依赖什么技术实现的。

能够根据不同的浏览器尺寸，显示不同的布局方式。依赖媒体查询实现。

15.什么是元素盒模型，包含哪几部分？计算元素尺寸时从哪部分开始计算？

元素从结构上分为4层，内容，内间距，边框，外间距。
通过box-sizing设置计算方式，默认为content-box,及计算内容盒，可以设置为border-box,计算到边框盒。

16.什么是原型和原型链？

• Js中的对象都有一个属性叫做__proto__(也是一个对象)，表示对象的原型。当访问对象中的属性或方法时，首先在对象本身中寻找，如果找不到则会在原型中寻找，原型中也找不到时会在原型的原型中寻找，直到最顶层为止。
• js中的类(构造函数)都有一个prototype的属性，表示本类的原型类型，通过这个类实例化的对象(这个构造函数创建的对象)， _proto__都指向本类的prototype，从而实现了类方法的共享。一个类的prototype也是一个对象，它也有__proto_，把它的__proto__指向另一个类的prototype时，那么这个类的对象就能访问另一个类中的方法，从而实现了方法的继承。
• A类的prototype.__proto__指向另一个类B，B的prototype.__proto__又可以指向C，这种结构叫做原型链。

17.闭包是什么？有什么作用？

当一个函数A的作用域被内部的B函数引用时，A函数的作用域就会被B函数闭包，如果函数A返回了函数B，当A函数执行完毕时，A函数的作用域也不会释放。

闭包可以实现对象的私有属性和私有方法。
闭包可以封装变量，从简减少对全局作用域的污染。

18.ES6中新增加了哪些特性？

箭头函数，字符串模板，let块级作用域声明方式，const常量，class声明类，结构赋值，Promise，ES6模块化。

• 箭头函数对this的影响是什么？
  箭头函数中的this总是函数所在上下文中的this,也就是相当于普通函数+bind(this)
• 什么时候使用const？
  赋值之后不需要再进行修改的量可以使用const
• let与var的区别是什么？你使用哪一个？
  Let是块级作用域变量，var是函数级作用域变量，两个都用。

18.1如何中断Promise的then/catch调用链（即不让后面的then/catch被调用）？

return Promise.reject()

19.什么是跨域请求，怎样实现跨域请求。

一个页面发送到非本身来源的请求叫做跨域请求，浏览器只禁止ajax跨域请求。

三种跨域请求的方式：
1，cors，服务器在响应头中添加access control allow origin字段，浏览器在收到请求之后就会认为本次请求时允许跨域的。
2，JSONP,浏览器使用创建script标签的形式发送请求，将一个函数名作为请求参数发给服务器，服务器将需要返回的数据封装在一段js代码中（把前端发来的函数名进行调用，把要发送的数据作为参数），然后把这段代码返回给前端，前端立刻执行这个函数。
3，代理服务器，将请求先发送给代理服务器，代理服务器装发给目标服务器。

20.Nodejs中有哪些内置模块？分别是什么作用？

Path,fs,http,https,url,assert,

怎么列出一个文件夹下的所有文件？
Fs.readDir()

开启Webpack的watch功能时，只要你一保存文件，项目就会自动重新编译，其中的原理是什么？
Fs.watchFile方法或者fsWatcher类

请你列出url的结成部分

协议名protocal，域名domain（或者IP地址），端口号port，路径path，参数query，哈希值hash

21.Express中常用的中间件都有哪些？

static , bodyparser , session , multer ,

22.cookie和localstorage有什么区别？

都可以实现在用户的浏览器中存储一些数据。
不同：cookie是由服务端主导的，主要用于存储用户身份验证信息。localstorage是由前端js控制的，主要用于缓存业务逻辑数据。Cookie会随着请求头和响应头往返于服务器和浏览器之间。

LocalStorage能存储多少数据量？如果数量过大会出现什么问题？怎么办？
不同浏览器有区别，一般都是5MB左右。

23.vue的组件配置对象中都有哪些常用字段？分别是什么作用？

Data,props,computed,components,methods,watch,filters,mounted等生命周期函数

什么时候使用watch？

需要监听组件数据变化时

watch可以监视什么？

凡是vue组件改造的set,get属性，都可以监听。

mixin都能混入什么？

Data，methods，生命周期钩子函数，

24.vue中数据绑定是怎么实现的？双向绑定指令v-model的本质是什么？

Vue组件data中的数据在组件创建时，都会被改造为set,get类型的属性，当数据发生变化时set方法就会调用，set方法中添加了重新渲染的代码。
v-model相当于 v-bind:value 加 v-on:input

25.vue中怎么实现非父子组件之间的传值？

• 在项目规模不是特别大时，可以创建一个空组件作为总线，项目中其他组件都可以通过总线进行传值。
  大大型项目中，可以使用vuex进行数据管理，将数据统一放在store中进行管理。

• 怎么找到父组件的父组件的父组件？
  $parent. $parent. $parent.

• 怎么找出所有的子孙组件？
  $children

• Vuex的核心概念有哪些？它们的作用是什么？组件如何使用store中的数据如何改变store中的数据？
  State，仓库中的状态（数据）。Getters，状态的衍生状态。Mutation，状态的修改方法。Actions，状态的异步修改方法。
  使用mapState函数将store中的数据map到组件compouted中。
  使用mapAction和mapActions函数将store中的修改方法map到组件的methods中。

26.webSocket是什么？适用于哪些网站？

webSocket是一种双工通信技术，可以实现服务器主动向客户端发送数据。

27.微信小程序和前端开发的区别？

微信小程序开发中，使用的主要文件：
Wxml,wxss,wxs,js,json
前端开发的项目时运行在浏览器中的。能够调用浏览器提供的webAPI
微信小程序是运行在微信提供的平台中的。能够调用微信提供的API。

有没有用过小程序UI库？用过哪个？用了哪些组件？
weUI。Iview。
微信API有哪些限制让你觉得不爽？
1，没有状态管理工具；2，事件只能绑定一个监听函数；3，模板中事件绑定方法不能传参；4，异步API不支持promise；5，wxs功能过于单调。

28.前端开发中实现动画有几种方式？其各自的特点是什么？

1：css过渡，2：css关键帧动画，3：js动画，4：canvas动画。
从动画执行效率上对比：canvas>css过渡>css关键帧动画>js动画。
从动画功能上对比：canvas=js动画>css关键帧动画>css过渡。
Canvas动画最优秀，但是开发成本高。

29.什么是WebWorker？在哪些场景下需要使用WebWorker？

WebWorker是h5中新增的WebAPI，用于启动一个独立的线程，主线程和分线程只能通过相互发送消息进行通信。当前端页面中有耗时很长的代码需要执行时，可以放在worker中执行，否则会卡塞主线程，影响用户体验。

30.在浏览器地址栏输入一个网址，从敲下回车键，到页面完全加载完毕，中间都发生了什么？

1，如果地址栏中输入的是一个域名，浏览器会先使用自己的DNS缓存进行域名解析，转为IP地址，如果缓存中不存在，则会请求使用上层DNS（操作系统的DNS），操作系统会先查询本地HOST文件，如果HOST文件中不存在则会使用网络设置的DNS进行域名解析。最终得到域名对应的IP地址。
2，获得IP地址后，浏览器按照IP地址进行连接(tcp连接)，连接成功之后按照http协议的格式（请求行，请求头，请求头）发送http请求，服务器会返回响应报文（响应行，响应头，响应体），浏览器收到响应报文后，会根据响应头中的Content-Type字段来决定如何进行下一步处理，对于普通的网页Content-Type值是text/html，浏览器就会在页面中打开本次请求响应体中的数据。

3，在打开页面时，浏览器首先对html文本进行解析，创建DOM树，然后将每个节点渲染到页面上，其中如果出现了附带资源的标签（例如img,script等），浏览器会再次按照这些资源的src发送请求，当请求完成之后将请求内容插入到页面中，其中script标签资源是同步加载的，其他资源是异步加载的。

打开一个有很多图片的页面时，浏览器与服务器会建立多少个连接？
一般情况下1个连接。如果图片来自不同的域名则会是多个连接。

31.如何优化网页打开的速度？

1，尽量减少页面资源的请求次数（可以通过base64图片、合并图片、合并js，css文件实现）。
2，对页面代码进行压缩（主要是js代码压缩）
3，合理地使用懒加载。
4，对于不需要支持多国语言的中文网页，可以使用放弃使用UTF-8，使用GBK编码。
(以上是从前端角度进行优化，下面几条是从服务端角度优化)
5，网页中的静态资源使用CDN服务。
6，使用缓存，服务端使用redis进行接口缓存，同时在响应头中通过lastmodified,Etag等字段控制浏览器缓存。
7，使用gzip进行数据压缩。
8，使用多域名，部分浏览器对于同一个域名的并发请求量设置有上限，所以可以把页面资源分布在不同域名中，例如静态资源独自使用一个域名。

32.::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用。

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

33.Css文件中@import，@font-face，@keyframes,@media这4个关键字的作用是什么？

@import，导入另一个css文件，@font-face，导入一个字体文件，@keyframes声明一个关键帧动画，@media声明一个媒体查询条件。

34.常用的浏览器有哪些？他们分别是什么内核？

1，chrome、safari属于webkit内核。
2，老IE(10和10以下) 属于Trident内核。
3，firefox属于Gecko内核。
4，新IE属于Edge内核。
5，360等特殊浏览器：多内核浏览器。

这么多内核有什么差别？你怎么看待这些差别？
由于W3C对于HTML5标准的指定不是是非详细，或者各浏览器厂商没有完全遵守HTML标准，导致不同的浏览器内核对页面的渲染会有一些差异。所以在前端开发中要解决浏览器之间的差异，进行样式统一。

35.行元素和块元素的区别是什么？

行内元素：会在水平方向排列，设置width无效，height无效，margin上下无效，padding上下无效。
块级元素：各占据一行，垂直方向排列。

图片（img）下方会占据一些空白，怎么消除？
父元素font-size设置为0

36.什么是HTML语义化？HTML语义化的好处是什么？

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

37，HTTP协议的状态码都有哪些？分别是什么意思？

200，请求成功。
301，重定向。
304，使用缓存。
403，禁止访问。
404，资源不存在
500，服务端错误。
针对上述状态码jQuery ajax在什么时候触发 fail/error？
只要请求有响应都会success，只有请求失败才会fail
Axios什么情况下catch？
1，2，3开头.then，4,5开头.catch
Fetch呢？
1，2，3开头.then，4,5开头.catch

38.什么叫优雅降级和渐进增强?

都是解决网站对于老旧版本浏览器的兼容问题。

• 优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
• 渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

39，webpack工具的功能是什么？

Webpack是为前端开发设计的自动化打包工具，能够对项目中的js、css、图片等资源进行打包（其中js可以直接打包，其他类型资源需要各自对应的loader支持），相比于传统的grunt、gulp等构建工具，webpack在打包js代码时，能够识别多种模块化语法，进行模块化打包。

Webpack怎么打包图片到js中，原理是什么？打包到js中的图片怎么显示到页面上？
对于小图片，打包之后会形成base64图片，而大图片会打包成一个url地址。

Vue项目中放在哪些位置的图片会被打包？如何避免大图被打包？
放在assets中的静态资源会被打包，将大图片放在public文件夹中。
Webpack怎么打包css？原理是什么？打包到js中的css怎么加载到页面上？
使用css-loader和style-loader，打包原理是通过js代码在页面中创建style标签，然后将css代码插入。
Webpack能否打包字体文件？能否打包字体图标？
能，需要file-loader。
Webpack如何生成多个HTML页面？
将webpack配置文件中的打包入口配置为多个入口。
Webpack怎么实现将某个模块（在项目的node_modules中）中的文件复制到编译输出文件夹中？
使用CopyWebpackPlugin插件，将要拷贝的文件添加到webpack的配置文件中。
Webpack的核心概念有哪些，你能画一副图表示编译过程码？

40，什么是XSS攻击？怎么防范？

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。
防范：
首先代码里对用户输入的地方和变量都需要仔细检查长度和对<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。避免直接在cookie 中泄露用户隐私，例如email、密码等等。其次，通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值，不可能拿来重放。如果网站不需要再浏览器端对cookie 进行操作，可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。

41，什么是CSRF攻击？怎么防范？

Cross—Site Request Forgery，跨域请求伪造。
CSRF攻击攻击原理及过程如下：

1. 用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；
   2.在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A；
2. 用户未退出网站A之前，在同一浏览器中，打开一个TAB页访问网站B；
3. 网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A；
4. 浏览器在接收到这些攻击性代码后，根据网站B的请求，在用户不知情的情况下携带Cookie信息，向网站A发出请求。网站A并不知道该请求其实是由B发起的，所以会根据用户C的Cookie信息以C的权限处理该请求，导致来自网站B的恶意代码被执行。
   防范：在服务端敏感接口中添加referer判断。

42，HTTP和HTTPS的区别是什么？

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。
默认HTTP的端口号为80，HTTPS的端口号为443。
为什么HTTPS安全
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性

43，栈和队列的区别是什么?js中怎样实现栈结构？

栈和队列都是线型数据结构，栈只有一个入口，同时也是出口，所以数据遵循先进后出，后进先出的规则。队列一侧是入口，另一侧是出口，所以数据先进先出，后进后出。
Js中的数组可以实现栈和队列。Push和pop方法是一对栈操作，push和shift是一对队列操作。

44，关于Http 2.0 你知道多少？

HTTP/2引入了“服务端推（server push）”的概念，它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。
HTTP/2提供更多的加密支持
HTTP/2使用多路技术，允许多个消息在一个连接上同时交差。
它增加了头压缩（header compression），因此即使非常小的请求，其请求和响应的header都只会占用很小比例的带宽。

45，cookie 和session 的区别?

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。Session基于cookie。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗

3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

46，如何为对象添加set/get属性？

47，react的组件有哪些声明方式？区别是什么？

48，vue组件怎么使用store中的数据？

56，css选择器都有哪些？各个选择器的优先级顺序是什么？
!important>id>class>属性选择器>标签名选择器>

重置样式表是什么？有什么用？你用过哪些重置样式表？
Normalize.css  reset.css，磨平不同浏览器之间的样式差异
Less/SCSS比css高级到哪了？
增加了变量，函数，混入，嵌套等功能。
POSTCSS是什么？
使用js书写css的工具。
AutoPrefixer是什么？
自动为css添加各种浏览器私有样式的前缀。

57，css3的新特性都有哪些？
圆角，阴影，变形，渐变色。

58，什么是元素外间距重叠？那种情况下会产生外间距重叠？
流式布局中块元素的上下外间距会产生重叠。

59，常见兼容性问题有哪些？
png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
对于老IE浏览器使用css hack解决兼容问题。
IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
Retina屏幕手机浏览器的1px边框问题，通过前后缀伪元素或者缩放解决。

怎么查一个JS/CSS/HTML特性的在各种浏览器及各个版本上是否支持？
上MDN查询或者直接试
怎么查各种浏览器及其各个版本的使用率？
百度“2019年国内浏览器市场占比”

60，localstorage能否实现跨域访问？
正常情况下localstorage不能跨域访问，但是可以通过iframe实现间接的跨域访问，域名A的网站在页面中通过iframe打开域名B的页面，然后通过postMessage给B网页发送消息，域名B页面读取localstorage数据之后再通过postMessage将数据传递给A页面，从而实现跨域访问localStorage。也就是说B页面必须配合，A页面才能跨域访问。

61，浏览器事件的传播流程是什么？如何阻止事件传播和默认行为？
事件传播顺序：先捕获，后冒泡。
阻止事件传播stopPropergation。阻止事件默认行为 preventDefault。

62，ES6的async函数怎么使用？
Async函数没有返回值，或者只能返回Promise对象。在async函数的函数体中可以使用await，await 后面只能调用返回Promise的函数，且通过await调用之后返回值不再是promise，而是promise.then时所传递的数据（如果失败则会抛异常）。从而实现以同步代码的格式调用异步函数。

Promise通过catch()捕获reject状态，async/await如何捕获reject状态？
Try…catch
如果await调用中的Promise是reject状态，await下面的代码是否会执行？为什么？
不执行，因为抛异常了。

如果await调用中的Promise一直是pending状态，await下面的代码是否会执行？为什么？
不执行，只有promise成功之后才会继续执行。

63，什么是深拷贝和浅拷贝？
浅拷贝就是只复制数组（对象）本身，而不复制其内容（引用类型的数据内容），最终两个数组中指向同一套数据。深拷贝则是既赋值本身也赋值内容。
Js中对于引用类型的数据，默认进行的都是浅拷贝。

64，JS如何实现对数组（对象）的深拷贝？
对于不含方法的纯数据对象，可以转为JSON字符串再解析为对象，对于包含方法的对象，则需要使用递归遍历其属性逐个赋值。

65，什么是JS严格模式？怎么进入严格模式？严格模式下有哪些限制？

严格模式是JS的一种特殊执行模式，设立”严格模式”的目的，主要有以下几个：
1，消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
2， 消除代码运行的一些不安全之处，保证代码运行的安全；
3，提高编译器效率，增加运行速度；
4， 为未来新版本的Javascript做好铺垫。

在函数中或全局域的开头添加字符串”use strict”进入严格模式。

严格模式主要有以下限制：
变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀0表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字（比如protected、static和interface）

66，什么是函数防抖和函数节流？
函数防抖：对于频繁触发的事件，如果只希望其最后一次（或第一次）执行绑定函数的执行，则需要使用函数防抖。
函数节流：对于频繁触发的事件，希望其按照一定的频率进行绑定函数调用，则使用函数节流。
函数防抖和节流都可以通过settimeout实现。

67，什么是MVC和MVVM？
MVC:model-view-controller
MVVM:model-view-view-model，

MVC模式通过controller控制器协调model和view的交互，View 传送指令到 Controller，Controller 完成业务逻辑后，要求 Model 改变状态，Model 将新的数据发送到 View，用户得到反馈，所有通信都是单向的。

MVVM模式使用数据双向绑定，model和view直接进行交互。

68，js的模块化技术都有哪些？
CommonJS，同步模块化标准，NodeJS采用的就是这套标准。
AMD，异步模块化，requireJS使用的标准。
ES6模块化，ES官方的标准，本质上也是一种同步模块化。

69，vue组件中的mixin字段作用是什么？
Mixin是组件混入项，可以将mixin对象中的内容混入到当前组件中，从而实现组件逻辑的复用。

70，React框架中高阶的作用是什么？哪些情况下使用？
高阶组件的本质是一个函数，它接受一个参数组件，然后内部创建一个新组件，将参数组件包裹在新组建中，在新组件中扩展新的内容，最终返回新的组件。使用这种组件组合技术，可以将高阶组件和任何组件结合，从而实现高阶组件逻辑的复用。
当一个组件业务逻辑很复杂时，也可以将组件模板部分写成function组件，然后逻辑部分写为高阶组件和function组件结合，从而实现组件模板和逻辑的分离。

React项目中常见Container/Component模式，Component负责接收属性数据、渲染界面和调用函数属性（实现视图逻辑），Container负责实现函数属性，Ajax调用等（业务逻辑）；请分析这种模式的优缺点。
能够将组件的视图部分和逻辑部分进行分离，利于各自的开发和后续维护，尤其是大型组件，可以实现代码分散。缺点是两个组件之间增加了传值的代价（例如ref），把MVVM的结构搞出了MVC的味道。

如何调试Redux，查看当前状态、action数据流？
浏览器安装react调试插件。

71，vue框架中标签的ref属性有什么作用？
在组件代码中获取原生HTML标签对象，或者获取组件对象。

72，babel的作用是什么？
将ES6代码转为ES5代码。

babel会进行哪几类转换？
Es6/7转es5，jsx转js，ts转js,
babel插件和预设是什么？

Babel插件可以在babel进行代码转换时使用一些额外的功能，插件预设就是一组插件列表。
如何让babel针对特定浏览器转换出最精简和高效的代码？
使用preset-env预设。

73，你都用过哪些vue（react）的组件库？
Vant,elementUI,ivew,antd.

74，怎么解决页面加载时的闪烁问题？
对页面整体内容进行隐藏，显示加载进度条，然后在页面的加载完毕事件中取消进度条，显示页面内容。
在vue中可以通过v-cloak指令进行。

75，你是否会使用混合(hybrid)APP开发技术进行手机APP开发？
会使用uni-app/cordova/react-native

76，前端页面中的图形绘制使怎么做？
可以使用svg或者canvas。

77，这个项目是用vue开发的，如果换成react你能做吗？

React与Vue相比哪个更简单？为什么？
Vue更简单，学习成本低，有大量指令可以用。
Vue项目中使用了计算属性，怎么转成React？
React没有计算属性，只能写成方法，然后模板里绑定方法调用。
Vue项目中使用了过滤器，怎么转成React？
React没有过滤器，可以将过滤函数写在单独的js文件中，哪个组件用哪个组件导入，然后在模板中绑定函数调用。
Vue项目中使用了插槽slot，怎么转成React？
Props.children
Vue项目中使用$emit()/@事件，怎么转成React？
This.props.xxxxxx() xxxxx是父组件传过来的方法
Vue项目中使用