小实训面试题

小实训面试题

响应式布局如何实现

方案一： 百分比布局
利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元 素； 能够设置的属性有 width、height、padding、margin，其他属性比如 border、font-size 不能用百分比设置的
方案二： 使用媒体查询 (CSS3 @media 查询)利用媒体查询设置不同分辨率下的css 样式，来适配不同屏幕，媒体查询相对于百分比布局，可以对布局进行更细致的调整，但需要在每个分辨率下面都写一套 css 样式；分辨率拆分可视项目具体情况而定。
注意：IE6、7、8 不支持媒体查询。
方案三. rem 响应式布局

rem 布局原理

如何使用 rem 进行布局/strong>
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 单位的值

数据类型判断

原型和原型链

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

闭包

闭包定义:
当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数的内部变量,且返回的那个函数在外部被执行,就产生了闭包.
闭包是一个环境,具体指的就是外部函数–高阶函数 closure
闭包的三个特性
1:函数套函数
2:内部函数可以直接访问外部函数的内部变量或参数
3:变量或参数不会被垃圾回收机制回收 GC
闭包的优点:
1:变量长期驻扎在内存中
2:避免全局变量的污染
3:私有成员的存在
闭包的缺点
常驻内存 增大内存的使用量 使用不当会造成内存的泄露. 闭包的两种写法:
1：

2：

js继承

1.原型链继承
原型链继承的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
缺点：
1通过原型来实现继承时，原型会变成另一个类型的实例，原先的实例属性变成了现在的原型属性，该原型的引用类型属性会被所有的实例共享。
2在创建子类型的实例时，没有办法在不影响所有对象实例的情况下给超类型的构造函数中传递参数。
2.借用构造函数
借用构造函数的技术，其基本思想为:
在子类型的构造函数中调用超类型构造函数。
优点:
1可以向超类传递参数
2解决了原型中包含引用类型值被所有实例共享的问题
缺点:
?方法都在构造函数中定义，函数复用无从谈起，另外超类型原型
中定义的方法对于子类型而言都是不可见的。
3.组合继承
组合继承指的是将原型链和借用构造函数技术组合到一块，从 而发挥二者 之长的一种继承模式。
优点:
?可以向超类传递参数
?每个实例都有自己的属性
?实现了函数复用
4.原型式继承
原型继承的基本思想：
借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。
缺点:同原型链实现继承一样，包含引用类型值的属性会被所有实例共享。
5.寄生式继承
6.缺点：
使用寄生式继承来为对象添加函数，会由于不能做到函数复用而效率低下。
同原型链实现继承一样，包含引用类型值的属性会被所有实例共享。
7.寄生组合式继承
优点:
只调用了一次超类构造函数，效率更高。
8.ES6 实现继承

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

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

事件冒泡，事件捕获

什么是事件/strong>
事件是文档和浏览器窗口中发生的特定的交互瞬间。 事件是 javascript 应 用跳动的心脏，也是把所有东西黏在一起的胶水，当我们与浏览器中 web 页面进行某些类型的交互时，事件就发生了。
事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘上的某些按键，事件还可能是 web 浏览器中发生的事情，比如说某个 web 页面加载完成，或者是用户滚动窗口或改变窗口大小。
什么是事件流/strong>
事件流描述的是从页面中接受事件的顺序，但有意思的是，微软和网景开发团队居然提出了两个截然相反的事件流概念，IE 的事件流是事件冒泡流而 网 景 的事件流是事件捕获流
事件冒泡和事件捕获的概念：
事件冒泡和事件捕获是描述事件触发事件时序问题的术语，事件捕获指的是从 document到触发事件的那个节点，也就是说自上而下的去触发事件，相反的， 事件冒泡是自下而上的去触发事件，绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获，true 为事件捕获，false 为事件冒泡， jQuery 的e.stopPropagation 会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。
第一种：事件冒泡
IE 提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点执行顺序： p=>button=>div=>body
第二种：事件捕获
网景公司提出的事件流叫事件捕获流。
事件捕获流的思想是不太具体的 DOM 节点应该更早接收到事件，而最具体的节点应该最后接收到事件，针对上面同样的例子，点击按钮，那么此时 click 事件会按照这样传播：（下面我们就借用 addEventListener 的第三个参数来模拟事件捕获流），也就是上面的例子就会倒过来。

h5 和css3 的新特性

Axios 拦截做过哪些

sessionStorage localStorage cookie 的区别

图片懒加载实现原理

一.什么是懒加载/strong>
懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。
二.为什么要懒加载/strong>
懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载

瀑布流原理

瀑布流原理：
瀑布流的实现原理就是通过比较每一列的高度，如果这一列高度低的话就在这一列进行添加，如果可视区距离和滚动距离想加的话比你当前页面的高度还要高的时候，页面就开再次加载多个，这个主要也是页面布局，如果你的布局实现的不好的话！也会出现问题，首先每一列的高度，都是需要自适应的，不能设置高通过每一块内容将每一列撑起来，还有一个问题就是，滑动底部，根据每个电脑的不同，所以他每个人,获取的高度是不同而且有的时候，页面的整体高度和页面可视区高度加上滚动高度差 1px 这个时候就需要我们提前加载，不然滑动到底部也加载不出来！

meta 标签内属性及详解

name 属性
1.keywords
用于告诉搜索引擎，你网页的关键字。举例：

2.description
用于告诉搜索引擎，你网站的主要内容。举例：

3. viewport(移动端的窗口)

4.robot
robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。
举例：
5.author
用于标注网页作者

6.generator(网页制作软件)

7.copyright(版权)

8.revisit-after(重访)
如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问

9.renderer
renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。

http-equiv属性
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
10.Expires(期限)
说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输

注意：必须使用GMT的时间格式。
11.Pragma(cache模式)
说明：禁止浏览器从本地计算机的缓存中访问页面内容。

注意：这样设定，访问者将无法脱机浏览。
12.Refresh(刷新)
说明：自动刷新并指向新页面。
(注意后面的分号，分别在秒数的前面和网址的后面)
注意：其中的2是指停留2秒钟后自动刷新到URL网址
13.Set-Cookie(cookie设定)
说明：如果网页过期，那么存盘的cookie将被删除。
用法：
注意：必须使用GMT的时间格式
14.Window-target(显示窗口的设定)
说明：强制页面在当前窗口以独立页面显示。
用法：
注意：用来防止别人在框架里调用自己的页面
15.content-Type(显示字符集的设定)
说明：设定页面使用的字符集。
用法：
注意：HTML5中使用 来设定
meta标签的charset的信息参数如时，代表说明网站是采用的编码是简体中文；
meta标签的charset的信息参数如时，代表说明网站是采用的编码是繁体中文；
meta标签的charset的信息参数如时，代表说明网站是采用的编码是日文；
meta标签的charset的信息参数如时，代表说明网站是采用的编码是韩文；
meta标签的charset的信息参数如时，代表说明网站是采用的编码是英文；
meta标签的charset的信息参数如时，代表世界通用的语言编码；
16.content-Language（显示语言的设定）
用法：
17.Cache-Control指定请求和响应遵循的缓存机制。

解构赋值

来源：汤思雨