小实训面试题

小实训面试题

响应式布局如何实现

响应式布局可以让网站同时适配不同分辨率和不同的手机端，让客户有更   好的体验。

方案一： 百分比布局
利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元 素； 能够设置的属性有 width、height、padding、margin，其他属性比如 border、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 属性来适配不同屏幕

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 单位的值

数据类型判断

1.typeof	typeof 对于基本数据类型判断是没有问题的，但是遇到引用数据类型（如：Array）是不起作用
2.instanceof	判断 new 关键字创建的引用数据类型
3.不考虑 null 和 undefined（这两个比较特殊）以对象字面量创建的基本数据类型constructor  constructor  似乎完全可以应对基本数据类型和引用数据类型 但如果声明了一个构造函数，并且把他的原型指向了 Array 的原型，所以这种情况下，constructor 也显得力不从心
4.Object.prototype.toString.call()	完美的解决方案

原型和原型链

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：

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()

js继承

ES5 有 6 种方式可以实现继承，分别为：

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

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

深拷贝和浅拷贝是针对复杂数据类型来说的，浅拷贝只拷贝一层，而深拷贝是层层拷贝。

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

事件冒泡，事件捕获

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

h5 和css3 的新特性

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

Axios 拦截做过哪些

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

sessionStorage localStorage cookie 的区别

1.localStorage 生命周期是永久，这意味着除非用户显示在浏览器提供的UI   上清除 localStorage 信息，否则这些信息将永远存在。存放数据大小为一般  为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
sessionStorage  仅在当前会话下有效，关闭页面或浏览器后被清  除。存 放数据大小为一般为 5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对 Object 和 Array 有更好的支持。作用域不同
不同浏览器无法共享 localStorage 或 sessionStorage 中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享 sessionStorage 的信息。这里需要注意的是，页面及标
   2**.cookie 的优点：** 具有极高的扩展性和可用性
1.通过良好的编程，控制保存在 cookie 中的 session 对象的大小。
2.通过加密和安全传输技术，减少 cookie 被破解的可能性。
3.只有在 cookie 中存放不敏感的数据，即使被盗取也不会有很大的损失。
4.控制 cookie 的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就是一个过期的 cookie。</pre>
**3.cookie 的缺点：**
1.cookie 的长度和数量的限制。每个 domain 最多只能有 20 条 cookie，每  个cookie 长度不能超过 4KB。否则会被截掉。
2.安全性问题。如果 cookie 被人拦掉了，那个人就可以获取到所有 session信息。加密的话也不起什么作用。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若吧计数器保存在客户端，则起不到什么作用。</pre> localStorage sessionStorage、
**Cookie 共同点** ：都是保存在浏览器端，且同源的。

图片懒加载实现原理

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

瀑布流原理

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

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

meta 标签内属性及详解

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

<meta name="keywords" content="博客，前端">

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

<meta name="description" content="这是我的前端博客">

3. viewport(移动端的窗口)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

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

<meta name="author" content="希染，584297508@qq.com">

6.generator(网页制作软件)

<meta name="generator" content="vscode">

7.copyright(版权)

<meta name="copyright" content="希染">

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

<meta name="revisit-after" content="7 days" >

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

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

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

<meta http-equiv="expires" content="Thu,06 Dec 2018 14:51:18 GMT">

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

<meta http-equiv="Pragma" content="no-cache">

注意：这样设定，访问者将无法脱机浏览。
12.Refresh(刷新)
说明：自动刷新并指向新页面。
<meta http-equiv="Refresh" content="2; URL = http://www.baidu.com"> (注意后面的分号，分别在秒数的前面和网址的后面)
注意：其中的2是指停留2秒钟后自动刷新到URL网址
13.Set-Cookie(cookie设定)
说明：如果网页过期，那么存盘的cookie将被删除。
用法：<meta http-equiv="Set-Cookie" content="cookie value=xxx;expires=Thu,06 Dec 2018 14:51:18 GMT;path=/">
注意：必须使用GMT的时间格式
14.Window-target(显示窗口的设定)
说明：强制页面在当前窗口以独立页面显示。
用法：<meta http-equiv="Window-target" content="_top">
注意：用来防止别人在框架里调用自己的页面
15.content-Type(显示字符集的设定)
说明：设定页面使用的字符集。
用法：<meta http-equiv="content-Type" content="text/html;charset=gb2312">
注意：HTML5中使用 来设定
meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；
meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；
meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；
meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；
meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；
meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；
16.content-Language（显示语言的设定）
用法：<meta http-equiv="Content-Language" content="zh-cn"/>
17.Cache-Control指定请求和响应遵循的缓存机制。

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
解构赋值，左右结构必须一样，使用左边定义的值，快速的取出数据中对应的数据值，而且 定义和赋值必须放到一起，不然的话就会报错，取不出来数据值，而且左边也必须是一个 js 存在数据结构不然的话也会报错，解构赋值的主要作用还是，快速的让我们在数据中抓取出我们想要的数据。