常见面试题（3）

1.说说你对盒子模型的理解？

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）盒子由内外边距，内容和边框组成。

盒子分为标准盒子和怪异盒子

• 标准盒子：宽是由width+margin+padding+border，高是由height+margin+padding+border
• 怪异盒子：宽是由width+margin，高是由height+margin组成的。

2.如何让一个盒子水平垂直居中,有哪些方法越多越好？

1. 利用文本居中text-align:center和行高：line-height 进行实现
2. 利用子绝父相和外边距margin实现
3. 利用flex布局实现
4. 利用定位
5. 利用margin:auto
6. 计算父盒子与子盒子的空间距离
7. 利用transform实现居中
8. 利用display：table-cell

3.说说javascript都有哪些数据类型，如何存储的？

js数据类型分为原始数据类型和（基本数据类型）和对象数据类型（引用数据类型）

基本数据类型：null、undefined、number、string、boolean、symbol

引用数据类型：object、array、function、date

1. 基本数据类型存储在栈中，栈是有结构的，每个区块都是按照后进先出的方式次序存放，基本类型的数据相对是比较稳定的，占的内存也比较小，所有寻找速度比较快，如果基本类型复制的话，栈中重新开辟个新的内存空间来储存新复制的新值，所以两者是独立的，没有任何关联！
2. 引用数据类型存储在堆中，堆是没有结构的，数据可以任意存放，引用类型的值是储存在堆中（heap）,但是栈内存中保存着一个堆内存的对象的引用

栈：存储基本数据类型和指定代码的环境。

堆：存储引用类型值得空间。

注意：每个对象在堆中有一个引用地址，引用类型在栈中会保存其引用地址，以便快速查找到堆内存中的对象。

4.如何理解响应式，实现响应式的方法以及原理有哪些？有什么区别？

1.响应式设计

是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸，屏幕定向等）进行相应的响应和调整.

2.基本原理

通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport

3.实现方式

• 媒体查询

• 百分比

• vw/vh

• rem

4.响应式布局的优缺点

优点:

1. 面对不同分辨率，灵活性强
2. 能够快捷解决多设备显示适应问题

缺点：

1. 仅适用布局、信息、框架并不复杂的部门类型网站
2. 兼容各种设备工作量大，效率低下
3. 代码累赘，会出现隐藏无用的元素，加载时间加长
4. 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
5. 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

5.Css性能优化有哪些常见的方法？具体如何实现？

1. 异步加载css 文件压缩
2. 除去无用的css
3. 有效的使用选择器
4. 减少昂贵的属性
5. 排版与重绘
6. 减少排版次数
7. 不使用@import引入css

6.判断数据类型的方法有哪些？有什么区别？

1. Type of 可以对基本数据类型进行判断
2. Instanceof 判断是否在原型链上
3. Constructor 查看对象的原型
4. Object.prototype.tostring 默认返回调用者的具体类型

7.说说你对事件循环的理解？

JavaScript是一门单线程的语言，意味着同一时间内只能做一件事，但是这并不意味着单线程就是阻塞，而实现单线程非阻塞的方法就是事件循环,同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。

8.说说你对BOM的理解，BOM的核心都有哪些？作用是什么

BOM它是一个浏览器的一个对象模型，它指向的window的顶级对象，经常作为浏览 器窗口的一些变化出现，比方说浏览器的前进、后退以及刷新使用。

BOM一共有5个对象分别为：history，location、navigator、screen、window

其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退，前进，刷新，浏览器的窗口发生变化，滚动条的滚动，以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率，bom的核心对象是window，hash:url中#后面的字符串，没有返回空字符串 host：服务器名称和端口号 href：完整的url, port:端口号 search：字符串查询

9.Bind,call,apply有什么区别？如何实现一个bind方法？

1. call方法的第一个参数也是this的指向，后面传入的是一个参数列表跟apply一样，改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次
2. apply接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次
3. bind方法和call很相似，第一参数也是this的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入)改变this指向后不会立即执行，而是返回一个永久改变this指向的函数

调用函数，第二个参数传入this指向，返回一个新的函数

通过fn.bing(obj,1,2)()可以实现bind改变this指向

10.如何理解闭包？闭包的应用场景是？

闭包就是有权访问另一个函数内部变量的函数。闭包产生的原因：内部函数存在对外部函数局部变量的引用就会导致闭包。

闭包的特性：

1. 函数套函数
2. 内部函数可以直接访问外部函数的内部变量或参
3. 变量或参数不会被垃圾回收机制回收

闭包的优点：

1. 变量长期驻扎在内存中
2. 避免全局变量的污染
3. 私有成员的存在

闭包的缺点：驻内存 增大内存的使用量 使用不当会造成内存的泄露.

闭包应用场景：

1. 闭包解决索引值得问题
2. 函数防抖
3. 回调

函数中的局部变量在函数执行完后会被销毁，有时候，我们不希望这个局部变量会被销毁，我们还想在外部进行持续的操作和访问，我们就会用到闭包这种方式