前端面试的一些经常使用知识

时间 2019-11-12

原文原文链接

ES6的了解

新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操做符左边为输入的参数，而右边则是进行的操做以及返回的值Inputs=>outputs。）、for-of（用来遍历数据—例如数组中的值。）arguments对象可被不定参数和默认参数完美代替。ES6将promise对象归入规范，提供了原生的Promise对象。增长了let和const命令，用来声明变量。增长了块级做用域。let命令实际上就增长了块级做用域。ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。。还有就是引入module模块的概念javascript

js继承方式及其优缺点

　　原型链继承的缺点

借用构造函数（类式继承）一是字面量重写原型会中断关系，使用引用类型的原型，而且子类型还没法给超类型传递参数。

借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。因此咱们须要原型链+借用构造函数的模式，这种模式称为组合继承

　　组合式继承css

组合式继承是比较经常使用的一种继承方法，其背后的思路是 使用原型链实现对原型属性和方法的继承，而经过借用构造函数来实现对实例属性的继承。这样，既经过在原型上定义方法实现了函数复用，又保证每一个实例都有它本身的属性。

关于Http 2.0 你知道多少？

HTTP/2引入了“服务端推（server push）”的概念，它容许服务端在客户端须要数据以前就主动地将数据发送到客户端缓存中，从而提升性能。html

HTTP/2提供更多的加密支持前端

HTTP/2使用多路技术，容许多个消息在一个链接上同时交差。html5

它增长了头压缩（header compression），所以即便很是小的请求，其请求和响应的header都只会占用很小比例的带宽。java

defer和async
defer并行加载js文件，会按照页面上script标签的顺序执行 async并行加载js文件，下载完成当即执行，不会按照页面上script标签的顺序执行angularjs

谈谈浮动和清除浮动

浮动的框能够向左或向右移动，直到他的外边缘碰到包含框或另外一个浮动框的边框为止。因为浮动框不在文档的普通流中，因此文档的普通流的块框表现得就像浮动框不存在同样。浮动的块框会漂浮在文档普通流的块框上。es6

如何评价AngularJS和BackboneJS

backbone具备依赖性，依赖underscore.js。Backbone + Underscore + jQuery(or Zepto) 就比一个AngularJS 多出了2 次HTTP请求.web

Backbone的Model没有与UI视图数据绑定，而是须要在View中自行操做DOM来更新或读取UI数据。AngularJS与此相反，Model直接与UI视图绑定，Model与UI视图的关系，经过directive封装，AngularJS内置的通用directive，就能实现大部分操做了，也就是说，基本没必要关心Model与UI视图的关系，直接操做Model就好了，UI视图自动更新。chrome

AngularJS的directive，你输入特定数据，他就能输出相应UI视图。是一个比较完善的前端MVW框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等全部功能，模板功能强大丰富，而且是声明式的，自带了丰富的 Angular 指令。
说说你对闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优势是能够避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易形成内存泄露。在js中，函数即闭包，只有函数才会产生做用域的概念

闭包有三个特性：
1.函数嵌套函数

2.函数内部能够引用外部的参数和变量

3.参数和变量不会被垃圾回收机制回收

请你谈谈Cookie的弊端

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但仍是有不少局限性的。

第一：每一个特定的域名下最多生成20个cookie
```
1.IE6或更低版本最多20个cookie

2.IE7和以后的版本最后能够有50个cookie。

3.Firefox最多50个cookie

4.chrome和Safari没有作硬性限制
```
IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。

cookie的最大大约为4096字节，为了兼容性，通常不能超过4095字节。

IE 提供了一种存储能够持久化用户数据，叫作userdata，从IE5.0就开始支持。每一个数据最多128K，每一个域名下最多1M。这个持久化数据放在缓存中，若是缓存没有清理，那么会一直存在。

优势：极高的扩展性和可用性
```
1.经过良好的编程，控制保存在cookie中的session对象的大小。

2.经过加密和安全传输技术（SSL），减小cookie被破解的可能性。

3.只在cookie中存放不敏感数据，即便被盗也不会有重大损失。

4.控制cookie的生命期，使之不会永远有效。偷盗者极可能拿到一个过时的cookie。
```

缺点：

1.`Cookie`数量和长度的限制。每一个domain最多只能有20条cookie，每一个cookie长度不能超过4KB，不然会被截掉.


2.安全性问题。若是cookie被人拦截了，那人就能够取得全部的session信息。即便加密也与事无补，由于拦截者并不须要知道cookie的意义，他只要原样转发cookie就能够达到目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，咱们须要在服务器端保存一个计数器。若是咱们把这个计数器保存在客户端，那么它起不到任何做用。

浏览器本地存储

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。

web storage和cookie的区别

Web Storage的概念和cookie类似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，而且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还须要指定做用域，不能够跨域调用。

除此以外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开发者本身封装setCookie，getCookie。

可是cookie也是不能够或缺的：cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生

浏览器的支持除了IE７及如下不支持外，其余标准浏览器都彻底支持(ie及FF需在web服务器里运行)，值得一提的是IE老是办好事，例如IE七、IE6中的userData其实就是javascript本地存储的解决方案。经过简单的代码封装能够统一到全部的浏览器都支持web storage。

localStorage和sessionStorage都具备相同的操做方法，例如setItem、getItem和removeItem等
cookie 和session 的区别：

一、cookie数据存放在客户的浏览器上，session数据放在服务器上。
二、cookie不是很安全，别人能够分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session 三、session会在必定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。四、单个cookie保存的数据不能超过4K，不少浏览器都限制一个站点最多保存20个cookie。
五、因此我的建议：将登录信息等重要信息存放为SESSION 其余信息若是须要保留，能够放在COOKIE中
display:none 隐藏对应的元素，在文档布局中再也不给它分配空间，它各边的元素会合拢，就当他历来不存在。 visibility:hidden 隐藏对应的元素，可是在文档布局中仍保留原来的空间。

Doctype做用? 严格模式与混杂模式如何区分？它们有何意义?

1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签以前。告知浏览器以何种模式来渲染文档。

2）、严格模式的排版和 JS 运做模式是以该浏览器支持的最高标准运行。

3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。

4）、DOCTYPE不存在或格式不正确会致使文档以混杂模式呈现。

常见兼容性问题？

png24位的图片在iE6浏览器上出现背景，解决方案是作成PNG8.也能够引用一段脚本处理.
浏览器默认的margin和padding不一样。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

IE6双边距bug:块属性标签float后，又有横行的margin状况下，在ie6显示margin比设置的大。

浮动ie产生的双倍距离（IE6双边距问题：在IE6下，若是对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
#box{ float:left; width:10px; margin:0 0 0 100px;} 这种状况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 _display:inline;将其转化为行内属性。(_这个符号只有ie6会识别) 渐进识别的方式，从整体中逐渐排除局部。首先，巧妙的使用“\9”这一标记，将IE游览器从全部状况中分离出来。接着，再次使用“+”将IE8和IE七、IE6分离开来，这样IE8已经独立识别。 css .bb{ background-color:#f1ee18;/*全部识别*/ .background-color:#00deff\9; /*IE六、七、8识别*/ +background-color:#a200ff;/*IE六、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ } 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给咱们带来没必要要的麻烦，最好养成书写DTD声明的好习惯。如今可使用[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法：`<doctype html>`
ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，可是margin-top和margin-bottom却会发生重合。解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

前端面试的一些经常使用知识

ES6的了解

js继承方式及其优缺点

原型链继承的缺点

关于Http 2.0 你知道多少？

defer和async

谈谈浮动和清除浮动

如何评价AngularJS和BackboneJS

说说你对闭包的理解

请你谈谈Cookie的弊端

浏览器本地存储

web storage和cookie的区别

cookie 和session 的区别：

Doctype做用? 严格模式与混杂模式如何区分？它们有何意义?

常见兼容性问题？

　　原型链继承的缺点