前端面试四

一.Js执行的机制是什么样的

js是单线程语言，一次只能执行一个任务，所有的任务都需要排队，被称为事件循环机制。

所有任务可以分成两种，一种是同步任务,另一种是异步任务.同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。异步任务指的是，不进入主线程、而放入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行.任务队列又分为宏任务和微任务,同步任务执行之后,然后去执行所有的微任务，当所有微任务执行完毕之后。再次执行宏任务开始循环，直到执行完毕，然后再执行所有的微任务，就这样一直循环下去,就称为事件循环机制。

宏任务:整块代码 setTimeout setInterval UI交互事件 等等

微任务:Promise.then/cath/finally回调函数（平时常见的)

二。lodash的常见api?

lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。

_.cloneDeep 深拷贝

_.reject 根据条件去除某个元素。

三.平时都是用那些工具进行打包的？babel是什么？

WebPack是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的 HTML Javascript CSS以及各种静态文件,让开发过程更加高效.对于不同类型的资源,webpack有对应的模块加载器,模块打包器会分析模块间的依赖关系,最后生成了优化且合并后的静态资源

babel可以帮助我们转换一些当前浏览器不支持的语法，它会把这些语法转换为低版本的语法以便浏览器识别

四.谈谈set,map是什么？ 

set 是es6 提供的一种新的数据结构，它类似于数组，但是成员的值都是唯一的。

map 是es6 提供的一种新的数据结构,它类似于对象，也是键值对的集合，但是键的范围不仅限于字符串，各种类型的值都可以当做键.也就是说，Object 结构提供了字符串和值的对应，map 结构提供了值和值的对应,是一种更完善的 hash 结构实现。如果你需要键值对的数据结构，map 比 object更合适。

五。promise是什么，它的作用是什么？

Promise 是异步编程的一种解决方案.简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，可以从修改对象获取异步操作的消息,它解决了回调地狱的问题，也就是异步嵌套问题

六。get 和 post 请求有哪些区别？

1.数据传输模式：get 通过URL地址传输数据    post 通过请求体传输

2.数据安全:  get 数据暴露在URL中,可通过浏览历史记录、缓存等很容易查到数据信息

post 数据因为在请求主体内,所以有⼀定的安全性保证

3.数据类型： get 只允许 ASCII 字符   post 无限制

4.功能特性：   get 安全且幂等（这里的安全是指只读特性，就是使用这个方法不会引起服务器状态变化,幂等是指同一个请求方法执行多次和执行一次的效果是一样的）

post  非安全(会引起服务器端的变化)非幂等

八.BFC是什么？

BFC（块级格式化上下文）,怎么触发BFC

1.根元素（html） 2.浮动的元素    3.绝对定位的元素（元素的position为absolute 或 fixed）

4.overflow 也会触发BFC

作用:  1.可以包含内部浮动的元素  2.可以清除浮动带来的影响   3.阻止外边距重叠   4.解决外边距塌陷。

BFC是值浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

九.Js的数据类型有哪些？

js的数据类型分为基本数据类型（string、number、boolean、null、undefined、symbol）和复杂数据类型（Array,function,Object）

基本数据类型的特点：直接存储在栈中的数据

复杂数据类型的特点：存储的对象在栈中引用，真实的数据存放在堆内存

不同的类型数据导致赋值变量时的不同：1.简单类型赋值,是生成相同的值,两个对象对应不同的地址  2. 复杂类型赋值,是将保存对象的内存地址赋值给另一个变量.也就是两个变量指向堆内存中同一个对象.

十.call、apply、bind三者的异同

共同点 : 都可以改变this指向; 不同点: call 和 apply 会调用函数. call 和 apply传递的参数不一样,call后面传入的是一个参数列表,apply使用数组传递,而bind不会调用函数, bind方法和call很相似，第一参数也是的this指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入),改变this指向后不会立即执行，而是返回一个永久改变this指向的函数。

十一.SPA(单页面应用)的理解

所谓单页面Web应用 ,就是只有一个HTML的的应用程序,这种方法避免了页面之间切换会打断用户体验, 通常是为响应用户操作,动态加载适当的资源并添加到页面,页面也不会重新加载

优点1.用户体验好，内容的改变不需要重新加载整个页面

2.良好的前后端分离，分工更明确

3.具有桌面应用的即时性 网站的可移植性和可访问性

缺点 1.首屏加载慢  2. 不利于SEO

十二.作用域链的理解

作用域是一个对象可被调用的区域，而作用域链就是调用某个函数或属性时，先在当前作用域寻找，如果找不到的情况下去父级寻找，如果父级找不到继续向上级寻找，直到找到全局作用域为止，这个链式查找的过程，就是作用域链

十三。SPA首屏加载慢怎么解决？

首屏时间指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成，但需要展示当前需要的内容.1.减小入口文件体积常用的手段是路由懒加载，把不同路由对应的组件分割成不同的代码块，待路由被请求的时候会单独打包路由,加载速度大大增加

2.静态资源本地缓存  3.图片资源的压缩对页面上使用到的图标，可以使用在线字体图标,或者雪碧图，将众多小图标合并到同一张图上，用以减轻http请求的压力。  4.组件重复打包 5.使用SSR也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器

从头搭建一个服务端渲染是很复杂的,vue建议使用nuxt.js实现服务端渲染

十四.关于NextTick的理解

我们可以理解成,vue在更新dom时是异步执行的。当数据发生变化,vue将开启一个异步更新队列，等队列中所有数据变化完成之后，再统一进行更新,举一个例子,修改data中的message,这时候想获取页面dom最新的节点，却发现获取到的是旧值,这是因为message数据在发现变化的时候,vue并不会立刻去更新dom，而是将修改数据的操作放在了一个异步操作队列中,等待同一事件循环之后,进行dom的更新.

十五.对盒子模型的理解

标准盒子模型 : 遵循 W3C 标准的盒子模型，其内容部分不包括 padding border ，市面上大部分浏览器都默认按照标准盒子模型来渲染页面元素。

怪异盒子模型 : 也成称为IE盒子模型, 其内容部分包括 padding border 但不包括 margin