记录一个应届前端小白在面试中遇到的问题 | 持续更新

Q:简述同步和异步的区别
A:同步：
同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。
异步：
将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。

Q:前后端分离核心思想
A:前端HTML页面通过AJAX调用后端的RESTFUL API接口并使用JSON数据进行交互。

Q:闭包的概念
A:闭包就是能够读取其他函数内部变量的函数
闭包可以用在许多地方。它的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

Q:js的基本数据类型
A:js中有5种数据类型：Undefined、Null、Boolean、Number和String

Q:undefined 和 null 区别
A:null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。
undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就undefined。
javaScript权威指南： null 和 undefined 都表示“值的空缺”，你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。

Q:http 和 https 有何区别？如何灵活使用？
A:http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。

https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份

Q:浏览器缓存有哪些，通常缓存有哪几种
A:一、http缓存 二、websql
cookie localstorage sessionstorage flash缓存

Q:cookie和session的区别
A:存储位置不同
cookie的数据信息存放在客户端浏览器上。
session的数据信息存放在服务器上。

存储容量不同
单个cookie保存的数据<=4KB，一个站点最多保存20个Cookie。
对于session来说并没有上限，但出于对服务器端的性能考虑，session内不要存放过多的东西，并且设置session删除机制。

存储方式不同
cookie中只能保管ASCII字符串，并需要通过编码方式存储为Unicode字符或者二进制数据。
session中能够存储任何类型的数据，包括且不限于string，integer，list，map等。

隐私策略不同
cookie对客户端是可见的，别有用心的人可以分析存放在本地的cookie并进行cookie欺骗，所以它是不安全的。
session存储在服务器上，对客户端是透明对，不存在敏感信息泄漏的风险。

有效期上不同
开发可以通过设置cookie的属性，达到使cookie长期有效的效果。
session依赖于名为JSESSIONID的cookie，而cookie JSESSIONID的过期时间默认为-1，只需关闭窗口该session就会失效，因而session不能达到长期有效的效果。

服务器压力不同
cookie保管在客户端，不占用服务器资源。对于并发用户十分多的网站，cookie是很好的选择。
session是保管在服务器端的，每个用户都会产生一个session。假如并发访问的用户十分多，会产生十分多的session，耗费大量的内存。

浏览器支持不同
假如客户端浏览器不支持cookie：
cookie是需要客户端浏览器支持的，假如客户端禁用了cookie，或者不支持cookie，则会话跟踪会失效。关于WAP上的应用，常规的cookie就派不上用场了。
运用session需要使用URL地址重写的方式。一切用到session程序的URL都要进行URL地址重写，否则session会话跟踪还会失效。
假如客户端支持cookie：
cookie既能够设为本浏览器窗口以及子窗口内有效，也能够设为一切窗口内有效。
session只能在本窗口以及子窗口内有效。

跨域支持上不同
cookie支持跨域名访问。
session不支持跨域名访问。

Q:什么是WebStorage？
A:WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。
WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。
HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。

Q:对比cookie，WebStorage有什么优点？
A:（1）存储空间更大：cookie为4KB，而WebStorage是5MB；
（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；
（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；
（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；
（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；
（6）WebStorage提供了一些方法，数据操作比cookie方便；
　　　　setItem (key, value) —— 保存数据，以键值对的方式储存信息。
　　 getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
　　removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
　　clear () —— 删除所有的数据
　　key (index) —— 获取某个索引的key

Q:localStorage（本地存储）和sessionStorage（会话存储）的区别
A:
1、生命周期：
localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB
3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
5、获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。
6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

Q:js常用设计模式的实现思路，单例，工厂，代理，装饰，观察者模式
A:
单例：任意对象都会单例，不需要特别处理；（单例模式中的单件确保类有且仅有一个）；
工厂：同样形式参数返回不同的实例；
代理：新建类调用老类的接口，包一下；
观察者：就是事件模式比如按钮事件；
发布者，订阅者：发布一个对象/字符串到所有订阅者；
观察者模式就是处理对象间一对多的依赖关系的，当一个对象发生变化，其它依赖他的对象都要得到通知并更新。
抽象工厂的目的是要提供一个创建一系列相关或相互依赖对象的接口，而不需要指定它们具体的类。这种模式可以汽车制造厂所使用的金属冲压设备中找到。这种冲压设备可以制造汽车车身部件。同样的机械用于冲压不同的车型的右边车门、左边车门、右前挡泥板、左前挡泥板和引擎罩等等。通过使用转轮来改变冲压盘，这个机械产生的具体类可以在三分钟内改变。
装饰模式
工厂模式：把实现同一件事情的相同代码放到一个函数中，之后如果用到这个功能就不用再重新写代码，直接调用，也叫函数的封装；减少页面的冗余代码，提高代码的重复利用率；达到开发软件时的低耦合高内聚。

Q:性能优化的方法（百度找到的方法）
A:
尽量减少HTTP请求次数
压缩合并js
css精灵
内联图片。src用data:url scheme

减少DNS查询
有的内容资源都放在同一个域(Domain)下面，这样访问整个网站就只需要进行一次DNS查找，这样可以提高性能
由于这些资源都在同一个域，而HTTP /1.1 中推荐客户端针对每个域只有一定数量的并行度（它的建议是2），那么就会出现下载资源时的排队现象
建议在一个网站里面使用至少2个域，但不多于4个域来提供资源

使用CDN
网站上静态资源即css、js全都使用cdn分发，图片亦然,因为cdn拥有众多服务器，用户请求可以请求距离他近的服务器，加快速度
避免空的src和href

为文件头指定Expires(过期时间)或者Cache-Control头部。

使用gzip压缩内容(服务端)

把CSS放到顶部

把JS放到底部

避免使用CSS表达式

将CSS和JS放到外部文件中

可缓存的AJAX异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段,
$.ajax({
url: ‘url’,
dataType: “json”,
cache: true, //如果有缓存请求缓存
success: function(son, status) {}
})

使用GET来完成AJAX请求
POST方法：首先发送文件头，然后才发送数据

减少DOM元素数量

不要404。
所以发出http请求但获得没用的响应（如404）是完全不必要的，并且会降低用户体验，这样首先会降低（占用）并行下载数
如果有404状态码 在此页面展示404样式，不是直接跳转到404页面

不要在html中缩放图片

http方面的问题：

Q:http全称？
A:超文本协议传输

Q:常用的HTTP方法有哪些
A:
GET：用于请求访问已经被URL（统一资源标识符）识别的资源，可以通过URL传参给服务器。
POST：用于传输信息给服务器，主要功能与Get方法类似，但一般推荐POST方式。
PUT：传输文件，报文主体包含文件内容，保存到对应URL位置。
HEAD：获取报文首部，与GET方法类似，只是不返回报文主体，一般用于验证URL是否有效。
DELET：删除文件，与PUT方法相反，删除对应URL位置的文件。
OPTIONS：查询相应URL支持的HTTP方法。

Q:http工作流程
A:
1.收线客户机与服务器需要建立连接，只要单击某个超级连接，http的工作开始
2.建立连接后，客户机发送一个请求给服务器，请求方式的格式为：统一资源标识符（URL）、协议版本号、后边是MIME信息包括请求修饰符、客户机信息和可能的内容。
3.服务器接到请求后，给与相应的相应信息，其格式为一个状态行，包括信息的协议版本号、一个成功或错误的代码，后边是MIME信息包括服务器信息、实体信息和可能的内容。
4.客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上，然后客户机与服务器断开链接

Q:Http的报文组成
A:
请求报文：请求行：请求方法 URL地址 协议名称或版本号
请求头: 键值对 服务端据此获取客户端的信息
空行: 分隔请求头和请求体
请求体: 通过请求体传值

响应报文： 状态行： 说明所请求的资源情况
响应头 ： 描述服务器基本信息
空行 ： 分隔响应头和响应体
响应体：服务端返回的数据

Q:网络七层协议
A:
网络七层协议由下往上分别为物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。其中物理层、数据链路层和网络层通常被称作媒体层，是网络工程师所研究的对象；传输层、会话层、表示层和应用层则被称作主机层，是用户所面向和关心的内容。
HTTP协议对应于应用层，TCP协议对应于传输层，IP协议对应于网络层，HTTP协议是基于TCP连接的,三者本质上没有可比性。 TCP/IP是传输层协议，主要解决数据如何在网络中传输；而HTTP是应用层协议，主要解决如何包装数据。Socket是应用层与TCP/IP协议族通信的中间软件抽象层，是它的一组接口

数据结构方面的问题

Q:数据结构有哪几种类型？
A:
逻辑结构，分为4种：集合、线性、树形、图形
物理结构（也叫做存储结构），主要也是4种：顺序、链式、索引、散列

Q:常用的数据结构有哪些？
A:常用的数据结构有：数组，栈，链表，队列，树，图，堆，散列表等

Q:
A:

Q:
A: