前端面试题总结

还有7天，2018年便过去了，回头看看，这段时间本身有出去面试过，也遇到了不少面试题，如下是个人一些总结，这篇关于面试的文章，我也会不定时的更新。

HTML

1.说一下你对HTML语义化的理解？

语义化就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2.浏览器的内核，你知道的有哪些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。
Presto内核：Opera7及以上。      [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。   [ Chrome的：Blink（WebKit的分支）]

3.说一说对HTML5的离线储存的理解

离线缓存是Html5新特性之一，简单理解就是第一次加载后将数据缓存，在没有清除缓存前提下，下一次没有网络也
能够加载，用在静态数据的网页或游戏比较好用。固然，Html5新的特性都不是全部浏览器都能支持的，离线缓存也
同样。反正IE9（包括）及IE9如下的浏览器目前是不支持的。若是用在移动端，应该都能支持。检测是否支持离线
缓存也是比较简单的。

详细的使用请参考：
https://www.cnblogs.com/wuzhiquan/p/4844258.html

4.请描述一下 cookies，sessionStorage 和 localStorage 的区别

储存大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage也有大小的限制，可是比cookie大，能够达到5M或更大

有期时间：

localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage：数据在当前浏览器窗口关闭后自动删除。
cookie：设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭，能够设置其过时时间

存储位置：
localStorage和sessionStorage都保存在客户端，不与服务器进行交互通讯。
cookie数据始终在同源的http请求中携带（即便不须要），记会在浏览器和服务器间来回传递。

5.请描述一个网页从开始请求道最终显示的完整过程？

一个网页从请求到最终显示的完整过程通常能够分为以下7个步骤：
（1）在浏览器中输入网址；
（2）发送至DNS服务器并得到域名对应的WEB服务器IP地址；
（3）与WEB服务器创建TCP链接；
（4）浏览器向WEB服务器的IP地址发送相应的HTTP请求；
（5）WEB服务器响应请求并返回指定URL的数据，或错误信息，若是设定重定向，则重定向到新的URL地址；
（6）浏览器下载数据后解析HTML源文件，解析的过程当中实现对页面的排版，解析完成后在浏览器中显示基础页面；
（7）分析页面中的超连接并显示在当前页面，重复以上过程直至无超连接须要发送，完成所有数据显示。

6.webSocket 如何兼容低浏览器？

Adobe Flash Socket
ActiveX HTMLFile（IE）
基于 multipart 编码发送 XHR
基于长轮询的 XHR

CSS

1.怎样让一个div垂直居中

第一：定位以后根据div的宽高计算margin;
第二:flex布局
第三:transform: translate(-50%, -50%) （定位以后）;

2.css定义的权重

!important > 行间样式 > id > class|属性|伪类 > 标签|伪元素 > 通配符

3.清除浮动的方法有哪些

第一：给父元素高度；
第二：让父元素一块儿浮动起来
第三：clear:both;
第四：定义伪类:after

4.使用css实现一个持续的动画效果

animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}

5.右边宽度固定，左边自适应

第一:display:flex布局；
第二：浮动；
第三：右边定位，左边给一个往右的padding；

6.对于css的hack理解

可见该文章:https://www.cnblogs.com/mumble/p/4576489.html

7.隐藏一个元素的方法有哪些

visibility: hidden; 这个属性只是简单的隐藏某个元素，可是元素占用的空间任然存在
opacity: 0; CSS3属性，设置0可使一个元素彻底透明
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域以外
display: none; 元素会变得不可见，而且不会再占用文档的空间。
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留
<div hidden="hidden"> HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态
height: 0; 将元素高度设为 0 ，并消除边框
filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

JS

1.对于数组的操做方法有哪些

pop() 删除一个数组中的最后的一个元素；
shift() 删除数组的第一个元素；
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
push() 向数组的末尾添加元素；
reverse() 颠倒数组中元素的顺序；
splice() 添加/删除数组元素；
sort() 数组排序；
copyWithin() 指定位置的成员复制到其余位置；
fill() 填充数组；
join() 数组转字符串；
slice() 浅拷贝数组的元素；
indexOf() 查找数组是否存在某个元素，返回下标；
includes() 查找数组是否包含某个元素 返回布尔；
every 检测数组全部元素是否都符合判断条件；
some 数组中的是否有知足判断条件的元素；
filter 过滤原始数组，返回新数组；
map 对数组中的每一个元素进行处理，返回新的数组；
reduce 为数组提供累加器，合并为一个值；

更多的方法和方法对于的参数用法等，能够本身再去了解一下。

2.数组去重的方法

[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
或者使用for循环

3.数据类型

Boolean
Null
Undefined
Number
String
Symbol :（ECMAScript 6 新定义 ，Symbol 生成一个全局惟1、表示独一无二的值） 
Object :（Array、Function、Object）

4.你对重绘、重排的理解？

重绘：不从新布局，只是元素的外观改变;
重排：重排是更明显的一种改变，能够理解为渲染树须要从新计算，重排必定会引发重绘。


页面渲染初始化（这个没法避免）
DOM元素的几何属性变化：元素尺寸（宽或高）改变。
DOM树的结构变化：例如节点的增减（添加或者删除可见的DOM元素），移动，元素位置改变等。
改变元素的一些样式，调整浏览器窗口大小，滚动条出现等等

以上都会让页面发生重排

5.说说你要用到的es6和es7

对于这个问题，建议你们能阮一峰老师的书
http://es6.ruanyifeng.com/#docs/module

6.函数节流是什么，有什么优势

目的：
从字面上就能够理解，函数节流就是用来节流函数从而必定程度上优化性能的。例如，DOM 操做比起非DOM 交互需
要更多的内存和CPU 时间。连续尝试进行过多的DOM 相关操做可能会致使浏览器挂起，有时候甚至会崩溃。尤
在IE 中使用onresize 事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件会连续触发。在oresize 
事件处理程序内部若是尝试进行DOM 操做，其高频率的更改可能会让浏览器崩溃。又例如，咱们常见的
一个搜索的功能，咱们通常是绑定keyup事件，每按下一次键盘就搜索一次。可是咱们的目的主要是每输入一些内容
搜索一次而已。为了解决这些问题，就可使用定时器对函数进行节流。

函数节流的原理：
某些代码不能够在没有间断的状况连续重复执行。第一次调用函数，建立一个定时器，在指定的时间间隔以后运行
代码。当第二次调用该函数时，它会清除前一次的定时器并设置另外一个。若是前一个定时器已经执行过了，这个操
做就没有任何意义。然而，若是前一个定时器还没有执行，其实就是将其替换为一个新的定时器。目的是只有在执行
函数的请求中止了一段时间以后才执行。
http://www.cnblogs.com/LuckyW...

7.你知道哪些HTTP的状态码，他们分别表明什么

咱们通常常见的就是200，304，400，401，404，405，500等，详细可见以下地址
http://tool.oschina.net/commons?type=5

8.说一说你对闭包的理解

官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（一般是一个函数），于是这些变量也
是该表达式的一部分。
太官方了，硬是绕口，我以为闭包简单来讲就是函数套函数，有权访问另外一个函数做用域内变量的函数。
闭包的好处就是：
1.但愿一个变量长期驻扎在内存中；
2.避免全局变量的污染。
3.私有成员的存在。
闭包的缺点：
1.常驻内存，增长内存使用量。
2.使用不当会很容易形成内存泄露。

9.判断数据类型的方法有哪些

var a = [1,2,3]

1.最多见的判断方法：**typeof**
alert(typeof a)   ------------> object

2.判断已知对象类型的方法： **instanceof**
alert(a instanceof Array) ---------------> true

3.**Object.prototype.toString** 
Object.prototype.toString.call('') ; --------------->[object String]

4.**constructor**
alert(c.constructor === Array) ----------> true

5.**jquery.type()**
若是对象是undefined或null，则返回相应的“undefined”或“null”。
jQuery.type( undefined ) === "undefined"
jQuery.type( null ) === "null"
若是对象有一个内部的[[Class]]和一个浏览器的内置对象的 [[Class]] 相同，咱们返回相应的 [[Class]] 名
字。 (有关此技术的更多细节。 )
jQuery.type( true ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( "test" ) === "string"
其余一切都将返回它的类型“object”。

还有很大一部分关于js的面试题，以后再继续补充