前端简答题

什么情况下会遇到跨域，描述一下常见处理跨域的几种方式。

答：浏览器最核心，最基本的安全功能是同源策略。限制了一个源中加载文本或者脚本与其他源中资源的交互方式，当浏览器执行一个脚本时会检查是否同源，只有同源的脚本才会执行，如果不同源即为跨域。

1. Jsonp：原理就是利用了script标签不受同源策略的限制，在页面中动态插入了script，script标签的src属性就是后端api接口的地址，并且以get的方式将前端回调处理函数名称告诉后端，后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去。
2. CORS：(跨域资源共享)是一种允许当前域的资源被其他域的脚本请求访问的机制。 当使用XMLHttpRequest发送请求时，浏览器如果发现违反了同源策略就会自动加上一个请求头:origin,后端在接受到请求后确定响应后会在Response Headers中加入一个属性:Access-Control-Allow-Origin,值就是发起请求的源地址，浏览器得到响应会进行判断Access-Control-Allow-Origin的值是否和当前的地址相同，只有匹配成功后才进行响应处理。现代浏览器中和移动端都支持CORS，IE下需要8+。
3. 服务器跨域，服务器中转代理。前端向本地服务器发送请求，本地服务器代替前端再向服务器接口发送请求进行服务器间通信，本地服务器是个中转站的角色，再将响应的数据返回给前端

说说get和post请求     

GET请求会被浏览器主动cache，而POST不会，除非手动设置。

·  GET请求只能进行url编码，而POST支持多种编码方式。

·  GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

·  GET请求在URL中传送的参数是有长度限制的，而POST没有。

·  对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

·  GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

·  GET参数通过URL传递，POST放在Request body中。

·  GET产生一个TCP数据包；POST产生两个TCP数据包。（对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据））

一个页面从输入 URL 到页面加载完的过程中都发生了什么事情?   

加载过程：

浏览器根据 DNS 服务器解析得到域名的 IP 地址

向这个 IP 的机器发送 HTTP 请求

服务器收到、处理并返回 HTTP 请求

浏览器得到返回内容

渲染过程：

根据 HTML 结构生成 DOM 树

根据 CSS 生成 CSSOM

将 DOM 和 CSSOM 整合形成 RenderTree

根据 RenderTree 开始渲染和展示

遇到<script>时，会执行并阻塞渲染

http与https的区别    

·  为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。

·  http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

·  http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

常见的HTTP状态码你了解多少？描述一下状态码的含义。  

200、301、302、303、403、404、503

（1）200：请求成功，一切正常，数据成功返回

（2）301：永久性重定向，是指所请求的文档在别的地方;文档新的URI会在定位响应头信息中给出。浏览器会自动连接到新的URI。

（3）302：临时重定向，该状态码表示请求的资源已被分配了新的URI，希望用户（本次）能使用新的URI访问。

（4）303：该状态码表示由于请求对应的资源存在着另一个URI，应使用GET方法定向获取请求的资源

（5）403：Foribidden 服务器端理解本次请求，但是拒绝执行任务，没有权限访问

（6）404：NOT found 请求的资源，网页无法找到，不存在

（7）503：服务器端无法响应，服务器由于在维护或已经超载而无法响应

阐述Promise解决了什么问题，它如何解决的，async和await又解决了什么问题？   

Promise使用一种标准的模式来解决异步问题，使得异步处理有章可循。它将一个异步任务分为两个阶段，unsettled和settled，unsettled阶段有权力将异步任务推向settled阶段。同时，它将异步任务划分为3种状态：pending、resolved、rejected，无论是resolved还是rejected，都属于settled阶段，pending一定属于unsettled阶段。状态一定是从pending改变到resolved或rejected中的任意一种，一旦改变，状态不可逆。状态可以附带数据，该数据可以被后续处理所接收。后续处理通过then或catch注册，有两种，分别处理resolved状态或rejected状态。

async和await是ES7的关键字，用于进一步简化Promise的操作，它可以让我们像编写同步代码那样处理Promise

阐述什么是迭代器、可迭代协议、可迭代对象、生成器？

迭代器是一个普通的对象，内部提供了next方法，调用后得到一个包含value和done属性的对象，value属性表示这一次迭代得到的数据，done指示是否迭代完成。

可迭代协议是一个规范，如果某个对象拥有知名符号Symbol.iterator，并且该符号是一个迭代器创建函数，则该对象满足可迭代协议

只要满足可迭代协议的对象，称之为可迭代对象

生成器本质上既是一个可迭代对象、又是一个迭代器。它是由生成器函数创建的。生成器函数一定返回一个生成器，它的出现是为了方便迭代器的编写，我们可以通过yield关键字不断的产生迭代结果，并且通过生成器控制迭代过程

介绍一下css的盒子模型？盒模型分几种类型？如何切换盒模型？ 

答：css盒子模型又称框模型(Box Model)，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）元素框的总高度=元素（element）的height + padding的上下边距的值+ margin的上下边距的值 ＋border的上下宽度。

IE6混杂模式盒模型：最终显示的宽或高为设置width/height = content+padding*2+border*2

标准盒模型：最终显示宽高为width+border+padding

切换盒模型设置css3属性box-sizing，将标准盒模型切换IE6混杂模式盒模型：box-sizing:border-box。