web前端小实训面试题01

小实训面试题

1、 响应式布局如何实现

响应式布局可以让网站同时适配不同分辨率和不同的手机端，让客户有更好的体验。
方案一：百分比布局
利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素； 能够设置的属性有 width、height、padding、margin，其他属性比如 border、font-size 不能用百分比设置的，

注意：当屏幕大于图片的宽度时，会进行拉伸；解决拉伸方法就是改为
max-width: 50%，但当屏幕大于图片的宽度时，两边会有空白。栏目是利用设置单栏目 width: 25%来适应不同的分辨率。
由于没办法对 font-size 进行百分比设置，所以用的最多就是对图片和大块布局进行百分比设置。

方案二：使用媒体查询 (CSS3 @media 查询)
利用媒体查询设置不同分辨率下的css 样式，来适配不同屏幕。
媒体查询相对于百分比布局，可以对布局进行更细致的调整，但需要在每个分辨率下面都写一套 css 样式；分辨率拆分可视项目具体情况而定。
注意：IE6、7、8 不支持媒体查询。

方案三.rem 响应式布局
当前页面中元素的rem 单位的样式值都是针对于html 元素的font-size 的值进行动态计算的，所以有两种方法可以达到适配不同屏幕：
第一种利用媒体查询，在不同分辨率下给 html 的 font-size 赋值。第二种利用 js 动态计算赋值，
缺点就是打开页面时候，元素大小会有一个变化过程。

方案四.vw 响应式布局
根据 PSD 文件宽度或高度作为标准，元素单位 px 转换为 vw 或 vh，比如font-size: 12px，PSD 文件宽度 375，转换公式 12 * 100 / 375，则样式改为font-size: 3.2vw，下面是我经常使用的工具，有利于提高转换效率。
现阶段手机端用的最多就是这个方法，能保持不同屏幕下元素显示效果一致， 也不用写多套样式。

方案五.flex 弹性布局
利用 flex 属性来适配不同屏幕

2、 rem 布局原理

rem：相对于根元素(即 html 元素)font-size 计算值的倍数。通俗的说，1rem = html 的 font-size 值
这段代码。a 标签的 font-size 值为 0.5rem，实际就是 100px*0.5=50px。
html{font-size:100px;} a{font-size:.5rem;}

如何使用 rem 进行布局？
1.标签的 rem 单位的值怎么计算
通过使用 rem + js 改变 html 标签的 font-size（整体缩放）实现兼容性更高的页面下面来举个例子，
当我们拿到的设计图是 750px 的时候，窗口宽度 750px，html 的 font-size 的大小为
100px；
也就是说 1rem = 100px；所以标题的 font-size 的大小为 26/100=.26rem；

2.如何实现兼容各种屏幕大小的设备
使用到 javascript 来动态改变 html 标签 font-size 的大小，其他的 rem 单位的数值就会被浏览动态计算转为 px 单位，从而达到和设计图高度的相似。
当屏幕 750px 的时候，html 的 font-size 值是 100px；窗口大小变化的时候，可以通过js 获取到窗口大小。
这时候获取到一个比例 750：100=获取到的屏幕大小：html 标签的 px 单位的值以下 js 代码，用于实现根据获取到的屏幕大小，动态修改 html 标签的 px 单位的值

3、 数据类型判断

1.typeof typeof 对于基本数据类型判断是没有问题的，但是遇到引用数据类型（如：Array）是不起作用
2.instanceof 判断 new 关键字创建的引用数据类型
不考虑 null 和 undefined（这两个比较特殊）以对象字面量创建的基本数据类型

3.constructor constructor 似乎完全可以应对基本数据类型和引用数据类型 但如果声明了一个构造函数，并且把他的原型指向了 Array 的原型，所以这种情况下，constructor 也显得力不从心
4.Object.prototype.toString.call() 完美的解决方案

4、 原型和原型链

1、原型的概念
JavaScript 的所有对象中都包含了一个 [proto] 内部属性，这个属性所对应的就是自身的原型
JavaScript 的函数对象，除了原型 [proto] 之外，还有 prototype 属性，当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的

原型 [proto]
2、原型链的概念
当一个对象调用自身不存在的属性/方法时，就会去自己 [proto] 关联的前辈 prototype 对象上去找，如果没找到，就会去该 prototype 原型 [proto] 关联的前辈 prototype 去找。依次类推，直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”。
3、总结
JavaScript 中的对象，都有一个内置属性[Prototype]，指向这个对象的原型对象。当查找一个属性或方法时，如果在当前对象中找不到，会继续在当前对象的原型对象中查找；如果原型对象中依然没有找到，会继续在原型对象的原型中查找（原型也是对象，也有它自己的原型）；直到找到为止，或者查找到最顶层的原型对象中也没有找到，就结束查找，返回 undefined。这个查找过程是一个链式的查找，每个对象都有一个到它自身原型对象的链接，这些链接组建的整个链条就是原型链。拥有相同原型的多个对象，他们的共同特征正是通过这种查找模式体现出来的。
在上面的查找过程， 我们提到了最顶层的原型对象， 这个对象就是Object.prototype，这个对象中保存了最常用的方法，如 toString、valueOf、hasOwnProperty 等，因此我们才能在任何对象中使用这些方法。

5、 闭包

闭包:
定义 当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数的内部变量,且返回的那个函数在外部被执行,就产生了闭包.

函数嵌套函数 内部的函数 可以 访问外部函数的变量,
返回的函数一旦在外部被执行，就产生了闭包

闭包是一个环境,具体指的就是外部函数–高阶函数 closure
闭包的三个特性
1:函数套函数
2:内部函数可以直接访问外部函数的内部变量或参数
3:变量或参数不会被垃圾回收机制回收 GC

闭包的优点:
1:变量长期驻扎在内存中
2:避免全局变量的污染

3:私有成员的存在

闭包的缺点
常驻内存 增大内存的使用量 使用不当会造成内存的泄露. 闭包的两种写法:
1：
function a () { var num=1;
function b () { alert(num)

}
return b;//把函数 b 返回给函数 a;
}
alert(a())//弹出函数 a, 值是函数 b;
2：
function a () { var num=1;
return function b () {//把函数 b 返回给函数 a; alert(num=num+2)
}
}
alert(a())//弹出函数 a, 值是函数 b;
调用方式：
//1:直接调用
a()()//内部函数的执行

//2：通过赋值在调用var f = a();
f()

6、 js 继承

ES5 有 6 种方式可以实现继承，分别为：
1.原型链继承
原型链继承的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
缺点：
1通过原型来实现继承时，原型会变成另一个类型的实例，原先的实例属性变成了现在的原型属性，该原型的引用类型属性会被所有的实例共享。
2在创建子类型的实例时，没有办法在不影响所有对象实例的情况下给超类型的构造函数中传递参数。
2.借用构造函数
借用构造函数的技术，其基本思想为:
在子类型的构造函数中调用超类型构造函数。
优点:
1可以向超类传递参数
2解决了原型中包含引用类型值被所有实例共享的问题

缺点:
•方法都在构造函数中定义，函数复用无从谈起，另外超类型原型
中定义的方法对于子类型而言都是不可见的。
3.组合继承(原型链 + 借用构造函数)
组合继承指的是将原型链和借用构造函数技术组合到一块，从而发挥二者之长的一种继承模式。基本思路：
使用原型链实现对原型属性和方法的继承，通过借用构造函数来实现对实例属性的继承，既通过在原型上定义方法来实现了函数复用，又保证了每个实例都有自己的属性。

缺点:
•无论什么情况下，都会调用两次超类型构造函数：一次是在创建
子类型原型的时候，另一次是在子类型构造函数内部。优点:
•可以向超类传递参数
•每个实例都有自己的属性
•实现了函数复用
4.原型式继承
原型继承的基本思想：
借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。

在 object() 函数内部，先穿甲一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回了这个临时类型的一个新实例， 从本质上讲，object() 对传入的对象执行了一次浅拷贝。
ECMAScript5 通过新增 Object.create()方法规范了原型式继承。这个
方法接收两个参数：一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象(可以覆盖原型对象上的同名属性)，在传入一个参数的情况下，Object.create() 和 object() 方法的行为相同。
在没有必要创建构造函数，仅让一个对象与另一个对象保持相似的情况下，原型式继承是可以胜任的。
缺点:
同原型链实现继承一样，包含引用类型值的属性会被所有实例共享。
5.寄生式继承
寄生式继承是与原型式继承紧密相关的一种思路。寄生式继承的思路 与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数， 该函数在内部已某种方式来增强对象，最后再像真地是它做了所有工作一 样返回对象。

基于 person 返回了一个新对象 -—— person2，新对象不仅具有person 的所有属性和方法，而且还有自己的 sayHi() 方法。在考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种有用的模式。
缺点：
•使用寄生式继承来为对象添加函数，会由于不能做到函数复用而效率低下。
•同原型链实现继承一样，包含引用类型值的属性会被所有实例共享。
6.寄生组合式继承
所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法，基本思路：
不必为了指定子类型的原型而调用超类型的构造函数，我们需要的仅是超类型原型的一个副本，本质上就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。寄生组合式继承的基本模式如下所示：

•第一步：创建超类型原型的一个副本
•第二步：为创建的副本添加 constructor 属性
•第三步：将新创建的对象赋值给子类型的原型
至此，我们就可以通过调用 inheritPrototype 来替换为子类型原型赋值的语句：

优点:
只调用了一次超类构造函数，效率更高。避免在 SuberType.prototype

上面创建不必要的、多余的属性，与其同时，原型链还能保持不变。因此寄生组合继承是引用类型最理性的继承范式。

ES6 实现继承

7、 什么是深拷贝，浅拷贝，如何实现

深拷贝和浅拷贝是针对复杂数据类型来说的，浅拷贝只拷贝一层，而深拷贝是层层拷贝。
深拷贝
深拷贝复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。 深拷贝后的对象与原来的对象是完全隔离的，互不影响， 对一个对象的修改并不会影响另一个对象。
浅拷贝
浅拷贝是会将对象的每个属性进行依次复制，但是当对象的属性值是引用类型时，实质复制的是其引用，当引用指向的值改变时也会跟着变化。
可 以 使 用 for in 、 Object.assign 、 扩 展 运 算 符 … 、Array.prototype.slice()、Array.prototype.concat() 、递归等递归函数实现深拷贝

8、 事件冒泡，事件捕获

什么是事件？
事件是文档和浏览器窗口中发生的特定的交互瞬间。 事件是 javascript 应用跳动的心脏，也是把所有东西黏在一起的胶水，当我们与浏览器中 web 页面进行某些类型的交互时，事件就发生了。
事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘上的某些按键，事件还可能是 web 浏览器中发生的事情，比如说某个 web 页面加载完成，或者是用户滚动窗口或改变窗口大小。
什么是事件流？
事件流描述的是从页面中接受事件的顺序，但有意思的是，微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，IE 的事件流是事件冒泡流(event bubbling)， 而 Netscape 的事件流是事件捕获流(event capturing)。

事件冒泡和事件捕获的概念：
事件冒泡和事件捕获是描述事件触发事件时序问题的术语，事件捕获指的是从 document 到触发事件的那个节点，也就是说自上而下的去触发事件，相反的， 事件冒泡是自下而上的去触发事件，绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获，true 为事件捕获，false 为事件冒泡， jQuery 的e.stopPropagation 会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。
第一种：事件冒泡
IE 提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点

执行顺序： p=>button=>div=>body
正如上面我们所说的，它会从一个最具体的的元素接收，然后逐级向上传播，
p=>button=>div=>body 事件冒泡可以形象地比喻为把一颗石头投入水中， 泡泡会一直从水底冒出水面，也就是说从小到大开始传播。
第二种：事件捕获
网景公司提出的事件流叫事件捕获流。
事件捕获流的思想是不太具体的 DOM 节点应该更早接收到事件，而最具体的节点应该最后接收到事件，针对上面同样的例子，点击按钮，那么此时 click 事件会按照这样传播：（下面我们就借用 addEventListener 的第三个参数来模拟事件捕获流），也就是上面的例子就会倒过来。

正如我们看到的，和冒泡流万全相反，从最不具体的元素接收到最具体的元素接收事件 body=>div=>button=>p

9、 h5 和css3 的新特性

h5 每个人有每个人的理解,我的理解呢！我的理解是 h5 呢并不是新增一些标签和样式更多的是里面新增的一些功能例如重力感应，他可以让我们感知当前手机的状态，可以帮助我们完成手机摇一摇，监听当前我们步数，还有开启 3d 模式让我们的 2d 空间变成一个 3d 模式,而且 h5 中为了挺高页面性能，页面元素的变大，不在是元素本身的大小变化，而是一种视觉上的效果，从而减少了 dom 操作，防止了页面的重绘，当然 h5 中不单单是这些还有webgl 游戏引擎 canvas、svg 完成图表以及一些小游戏的开发例如大转盘，数钱游戏，jd 妈妈再打我一次等等！

10、 Axios 拦截做过哪些

Axios 拦截分为请求拦截和响应拦截，请求拦截就是在你请求的时候会进行触发！只要是你发送一个 axios 请求就会触发！所以我们主要用它做我们的loading 加载和数据的权限验证,包括我们所有的数据预加载也可以实现，响应拦截主要是我们在 loading 加载，和做所有数据加载需要整体的结束，这个时候的结束就需要在数据马上发给前端的时候进行隐藏和结束，包括我们的请求头的设置，后端数据已经发送过来的时候，我们为了确保请求头的传递就必须在看看header 里面是否有你需要的请求，如果有的话，再次进行设置！当然用 axios 拦截也可以配置公用地址，以及对于跨域问题解决，这个就是用 axios 拦截实现的功能。

11、 sessionStoragelocalStorage cookie 的区别

1.localStorage 生命周期是永久，这意味着除非用户显示在浏览器提供的UI 上清除 localStorage 信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
2.sessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除。存 放数据大小为一般为 5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对 Object 和 Array 有更好的支持。

作用域不同
不同浏览器无法共享 localStorage 或 sessionStorage 中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享 sessionStorage 的信息。这里需要注意的是，页面及标
3.cookie 的优点：具有极高的扩展性和可用性
1.通过良好的编程，控制保存在 cookie 中的 session 对象的大小。
2.通过加密和安全传输技术，减少 cookie 被破解的可能性。
3.只有在 cookie 中存放不敏感的数据，即使被盗取也不会有很大的损失。
4.控制 cookie 的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就是一个过期的 cookie。
4.cookie 的缺点：
1.cookie 的长度和数量的限制。每个 domain 最多只能有 20 条 cookie，每个cookie 长度不能超过 4KB。否则会被截掉。
2.安全性问题。如果 cookie 被人拦掉了，那个人就可以获取到所有 session
信息。加密的话也不起什么作用。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若吧计数器保存在客户端，则起不到什么作用。 localStorage、sessionStorage、Cookie 共同点：都是保存在浏览器端，且同
源的。

12、 图片懒加载实现原理

一.什么是懒加载？

懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。
二.为什么要懒加载？

懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载

出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。
总结出来就两个点：

1.全部加载的话会影响用户体验
2.浪费用户的流量，有些用户并不像全部看完，全部加载会耗费大量流量。三.懒加载的实现原理？
由于网页中占用资源较多的一般是图片，所以我们一般实施懒加载都是对图
片资源而言的，所以这里的实现原理主要是针对图片。
大家都知道，一张图片就是一个标签，而图片的来源主要是 src 属性。浏览器是否发起亲求就是根据是否有 src 属性决定的。
既然这样，那么我们就要对标签的 src 属性下手了，在没进入可视区域的时候，我们先不给这个标签赋 src 属性，这样浏览器就不会发送请求了。

13、 瀑布流原理

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式
视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是 Pinterest， 后逐渐在国内流行即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。

总结瀑布流布局原理：
瀑布流的实现原理就是通过比较每一列的高度，如果这一列高度低的话就在这一列进行添加，如果可视区距离和滚动距离相加的话比你当前页面的高度还要高的时候，页面就开再次加载多个，这个主要也是页面布局，如果你的布局实现的不好的话！也会出现问题，首先每一列的高度，都是需要自适应的，不能设置高