共计 3644 个字符，预计需要花费 10 分钟才能阅读完成。
还有 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 生成一个全局唯一、表示独一无二的值）
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
还有很大一部分关于 js 的面试题，之后再继续补充
