前端常见面试题（附答案）

1、web 开发中会话跟踪的方法有哪些？
①　URL重写
URL(统一资源定位符)是Web上特定页面的地址，URL重写的技术就是在URL结尾添加一个附加数据以标识该会话,把会话ID通过URL的信息传递过去，以便在服务器端进行识别不同的用户 。
②　隐藏表单域
将会话ID添加到HTML表单元素中提交到服务器,此表单元素并不在客户端显示 。
③　Cookie
Cookie是Web服务器发送给客户端的一小段信息，客户端请求时可以读取该信息发送到服务器端，进而进行用户的识别。对于客户端的每次请求，服务器都会将Cookie发送到客户端,在客户端可以进行保存,以便下次使用。
④　Session
每一个用户都有一个不同的session，各个用户之间是不能共享的，是每个用户所独享的，在session中可以存放信息。

2、HTTP methods？
GET
通常用于请求服务器发送某个资源，HTTP/1.1要求服务器必须实现该方法。
HEAD
HEAD和GET类似，只是服务器的响应中只返回首部（没有实体部分）。
PUT
向服务器写入文档，就是让服务器用请求的主体部分来创建一个由所请求的URL命名的新文档，或者如果那个URL已经存在的话，就用这个主体来替代它。
POST
POST通常用来支持HTML的表单，表单中填好的数据被发送到服务器，服务器将其交给对应的程序进行处理。
TRACE
客户端发起一个请求，请求可能会穿过防火墙、代理、网关或其他一些应用程序，每个中间节点都可能会修改原始的HTTP请求。
OPTIONS
OPTIONS方法请求Web服务器告知其支持的各种功能，这为客户端应用程序提供了一种手段，使其不用实际访问那些资源就能判定访问各种资源的最优方式。
DELETE
DELETE方法用于请服务器删除请求URL所指定的资源。
扩展方法
HTTP被设计成字段可扩展的，扩展方法指的是没有在HTTP/1.1中定义的方法，这些方法为开发者提供了一种扩展这些HTTP服务能力的手段。

3、从浏览器地址输入 url 到显示页面的步骤（以http为例）？
1.域名解析
2.TCP连接（三次握手）
第一次握手：建立连接时，客户端向服务端发送请求报文
第二次握手：服务器收到请求报文后，如同意连接，则向客户端发送确认报文
第三次握手，客户端收到服务器的确认后，再次向服务器给出确认报文，完成连接。
三次握手主要是为了防止已经失效的请求报文字段发送给服务器，浪费资源。
3.浏览器发送HTTP请求（请求行，请求头，请求正文）
4.服务器处理HTTP请求
服务器处理http请求，并返回响应报文。响应报文包括三个部分：（状态码，响应头，响应正文（html，css，js，图片））
5、浏览器页面渲染
浏览器接受到http服务器发送过来的响应报文，并开始解析html文档，渲染页面。具体的渲染过程包括：构建DOM树、构建渲染树、定位页面元素、绘制页面元素等。
6、断开TCP连接
客户端与服务器四次挥手，断开tcp连接。

第一次挥手：客户端想分手，发送消息给服务器
第二次挥手：服务器通知客户端已经接受到分手请求，但还没做好分手准备
第三次挥手：服务器已经做好分手准备，通知客户端
第四次挥手：客户端发送消息给服务器，确定分手，服务器关闭连接

4、如何进行网站性能优化？

1、减少http请求，合理设置 HTTP缓存
2、使用浏览器缓存
3、启用压缩
4、CSS Sprites（合并 CSS图片，减少请求数的又一个好办法。）
5、LazyLoad Images（图片懒加载，大图片用此技术，不会出现加载延迟卡顿）
6、CSS放在页面最上部，javascript放在页面最下面
7、异步请求Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）
8、减少cookie传输

5、容器包含若干浮动元素时如何清理（包含）浮动？（不完整）
容器元素闭合标签前添加额外元素并设置clear: both，设置容器元素伪元素进行清理（推荐的清理浮动方法），

6、css hack 原理及常用hack？
原理：针对不同的浏览器（特别是IE）写不同的css，
主要方法：CSS 内部hack、选择器hack、HTML 头部引用，第一种最常用。

7、垂直居中的方法？
设定行高（line-height）（适用于单行的行内元素）
添加伪元素
calc动态计算
使用表格或假装表格
transform
绝对定位
使用Flexbox

8、重绘和回流（重排）是什么，如何避免？
属性和位置也会受到影响，浏览器需要重新构造渲染树，这个过程称为重排，重新绘制到屏幕上的过程称为重绘。
减少重绘和重排的方法：
1.不在布局信息改变时做 DOM 查询
2.使用 cssText 或者 className 一次性改变属性
3.使用 fragment（Fragment是一种可以嵌入在活动中的UI片段，能够让程序更加合理和充分地利用大屏幕的空间）
4.对于多次重排的元素，如动画，使用绝对定位脱离文档流，让他的改变不影响到其他元素

9、PNG，GIF，JPG的区别及如何选？
JPEG适合照片

GIF适合动画

PNG8适合其他任何种类——图表，buttons，背景，图表等等。

10、JavaScript 跨域通信？
跨域通信

11、对象到字符串的转换步骤？
var obj = eval(’(’ + str + ‘)’);
var obj = str.parseJSON();
var obj = JSON.parse(str);
特别注意：如果obj本来就是一个JSON对象，那么使用eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是使用parseJSON（）函数处理后会有问题（抛出语法异常）。
例如：
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
或者
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
alert(last);

12、函数内部的 arguments 变量有哪些特性，有哪些属性，如何将他转换为数组？
arguments[index] 分别对应函数调用时的实参，并且通过arguments修改实参时会同时修改实参
arguments.length 为实参的个数（Function.length表示形参长度）
arguments.callee 为当前正在执行的函数本身，使用这个属性进行递归调用时需注意this的变化
换为数组：var args = Array.prototype.slice.call(arguments, 0);

13、评价一下三种方法实现继承的的优缺点，并改进。
http://blog.sina.com.cn/s/blog_1552b39d40102wn2f.html

14、focus/blur 与 focusin/focusout 的区别与联系。
focus与focusin
1.共同点:当 div> 元素或其任意子元素获得焦点时执行事件
2.区别：focus不支持冒泡，而focusin支持冒泡；

blur与focusout
1.共同点:当 div 元素或其任意子元素失去焦点时执行事件
2.区别：blur不支持冒泡，而focusout支持冒泡；

**15、sessionStorage ，localStorage， cookie 区别？ **
区别

16、JavaScript 有哪几种方法定义函数？
函数定义语句、函数直接量表达式和Function()构造函数的方法。

17、什么是闭包，闭包有什么用？
函数嵌套函数，内部函数可以引用外部函数的变量和参数。
防止全局变量污染效果，不会被JS回收，可以让变量长期驻扎在内存中。

18、let var const 的区别箭头函数 与 function 的区别？
var的作用域是函数体的全部，因为JS解码方式为变量提升，所以var没有块级作用域。
let拥有块级作用域，并且不能重复声明一个变量，
const不能修改声明的变量，var和let都能修改，const声明的是常量。

箭头函数 与 function 的区别
1，箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式：一种只包含一个表达式，连{ … }和return都省略掉。还有一种可以包含多条语句，这时候就不能省略{ … }和return。
2，箭头函数内没有arguments，可以用展开运算符…解决，argumentys是参数的集合， 是一个类数组/伪数组体现在他不能调用数组的方法
3，箭头函数的this，始终指向父级上下文（箭头函数的this取决于定义位置父级的上下文，跟使用位置没关系，普通函数this指向调用的那个对象）
4，箭头函数不能通过call() 、 apply() 、bind()方法直接修改它的this指向。(call、aaply、bind会默认忽略第一个参数，但是可以正常传参)
5，箭头函数没有原型属性
19，HTTP 状态码 101、200、301、302、304的具体含义。
已定义范围 分类
1xx 100-101 信息提示
2xx 200-206 成功
3xx 300-305 重定向
4xx 400-415 客户端错误
5xx 500-505 服务器错误