前端面经-html,http,web基础篇

1、h5新特性

• 语义话标签：header、footer、section、nav、aside、article（有利于代码可读性和SEO(搜索引擎优化)
• 增强型表单：input的多个type
• 新增表单元素：datalist、keygen、output
• 音频视频：audio
• canvas
• 地理定位
• 拖拽
• 本地存储

新增标签

embed

embed可以用来插入多种多媒体，格式可以是Swf、Midi、Wav等等，Netscape已经新版本IE都支持。src为音频或视频文件及其路径

video标签如何控制播放

var myVideo = document.getElementById('myVideo'),tol=0;//获取video元素
myVideo.addEventListener("loadedmetadata", function(){
  tol = myVideo.duration;//获取总时长
 });
//播放
 function play(){
     myVideo.play();
 }
//暂停
 function pause(){
     myVideo.pause();
 }

2、canvas相关

待补充 1、项目做过海报，具体实现drawImage将图片绘制上去，setFontSize、fillText、setFillStyle绘制文字save、arc、restore、clip

2、和svg的区别

3、http和https的区别（Https加密方式）

• 端口，明文和加密，安全性
• 加密方式以及原理。
• https在内容传输的加密上使用的是对称加密，非对称加密只作用在证书验证阶段
  

4、http1.0、1.1、2.0、3.0特性，尤其Keep-alive和2.0长连接，QUIC(快速 UDP 互联网连接)

http1.0与http1.1的主要区别是什么

1、长连接。

http1.0需要使用keep-alive参数来告知服务器端要建立一个长连接，而http1.1默认支持长连接。

2、节约带宽

http1.1支持只发送header信息（不带任何body信息），如果服务器认为客户端有权限请求服务器，则返回100，否则返回401。客户端如果接收到100，才开始吧请求body发送到服务器

3、host域

在http1.0中认为每台服务器都绑定一个唯一的ip地址，因此，请求消息中的url并没有传递主机名（hostname），http1.0没有host域。随着虚拟主机技术的发展，一台物理服务器上可以存在多个虚拟主机，并且他们共享一个ip地址。http1.1的请求信息和响应信息都支持host域，且请求中如果没有host域名就会包一个400错误

4、缓存处理

在http1.0中主要使用header里的if-Modified-Since,Expires来作为缓存判断的标准，http1.1则引入了跟多的缓存控制策略列如Entity tag,if-unmodified-since,if-match,

http2.0和http1.1的区别

1、多路复用

• http2.0使用了多路复用的技术，做到同一个连接并发处理多个请求，而且并发请求的数量比http1.1大了好几个数量级。http1.1也可以多建立几个tcp连接，来支持出来更多并发的请求，但是创建tcp连接本身也是有开销的。

头部数据压缩

每次都要传输UserAgent、Cookie这类不会频繁变动的内容，完全是一种浪，http2.0使用hpack算法对header的数据进行压缩，就这样数据体积小了，在网络上传输就很快。

服务器推送

为了改善延迟，HTTP2.0引入了server push，它允许服务端推送资源给浏览器，在浏览器明确地请求之前，免得客户端再次创建连接发送请求到服务器端获取。这样客户端可以直接从本地加载这些资源，不用再通过网络。

http3.0(QUIC)

• 减少了TCP三次握手以及TLS握手时间
• 改进的拥塞控制
• 避免对头阻塞的多路复用
• 连接迁移

5、http状态码，尤其301和302区别

6、http请求几种方式以及区别，尤其get/post的幂等性

get、post、put、patch、delete、options

HEAD：类似GET请求，只不过返回的响应中没有具体内容，用于获取报头；

CONNECT：HTTP1.1协议中预留给能够将连接改为管道方式的代理服务器；

TRANCE：回显服务器收到的请求，主要用于测试或诊断；

Get请求和post请求的区别

• get方法的含义是从服务器获取资源，这个资源可以是静态的文本、页面、图片视频等。
  -而post方法则是相反的操作，它向url指定的资源提交数据，数据就放在报文的body里面。

Get和post的幂等性

• http方法的幂等性是指一次和多次请求某一个资源应该具有同样的副作用。
• http get方法用于获取资源，不应该有副作用，所以是幂等的
• HTTP DELETE方法用于删除资源，有副作用，但它应该满足幂等性。比如：DELETE http://www.forum.com/article/4231，调用一次和N次对系统产生的副作用是相同的，即删掉id为4231的帖子；因此，调用者可以多次调用或刷新页面而不必担心引起错误。
• post方法不具备幂等性
• put所对应的url是要创建或更新的资源本身

post请求之前为什么先发送Option条件

post请求之前为什么先发送Option条件
浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）
只要同时满足以下两大条件，就属于简单请求。

（1) 请求方法是以下三种方法之一：
HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同时满足上面两个条件，就属于非简单请求。
浏览器对这两种请求的处理，是不一样的。
非简单请求 会在正式通信之前，增加一次HTTP请求，称之为预检请求。浏览器会先发起OPTIONS方法到服务器，以获知服务器是否允许该实际请求。

7、cookie，sessionStorage，localStorage区别，cookie的长度限制

共同点

都是保存在浏览器端，并且是同源的

cookie

cookie数据始终在同源的http请求中携带（即使不需要)，即cookie在浏览器和服务器之间来回传。而sessionStorage和localStorage不会自动吧数据发送给服务器，仅在本地保存。cookie数据还有路径的概念，可以限制cookie只属于某个路径下，存储的大小只有4k左右。
cookie有跨域问题，其解决办法是通过nignx的反向代理
不给cookie设置过期时间会在浏览器会话结束时候过期

sessionStorage

仅在当前浏览器窗口关闭前有效，自然也就不可能持久保存。
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期之前一直有效，即使窗口或浏览器关闭。

localStorage

localStorage和cookie在所有同源窗口中都是共享的。在cookie的基础上，localStorage存储大小限制与5M左右

8、前端性能优化的方法

降低请求量：合并资源，减少http请求数量，minify/gzip压缩，webP,lazyload
加快请求速度：预解析DNS，减少域名数，并行加载，cdn分发
缓存：http协议缓存请求，离线缓存manifest，离线数据缓存localStorage
渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline

如何优化白屏时间

DNS解析优化

• dns缓存优化
• dns预加载策略
• 稳定可靠的dns服务器

服务端处理优化

服务端处理优化是一个非常庞大的话题，会涉及到如Redis缓存、数据库存储优化或是系统内的各种中间件以及Gzip压缩等

浏览器下载、解析、渲染页面优化

• 尽可能的精简html的代码和结构
• 尽可能的优化css文件和结构
• 一点要合理的放置js代码，尽量不要使用内联的js代码（当解析html时遇到内联JS代码，会阻塞dom树的构建）

长列表怎么优化？

1. 提升性能主要方向还是减少长列表页面的渲染节点数量，优化前是全量渲染，优化后最好只渲染用能看到的节点，或者说越少越好
2. 优化后页面有和普通长列表页面一样的滚动条反馈
3. 优化后的滚动体验要非常接近原生滚动体验
4. 上拉加载

9、浏览器输入url后发生了什么

DNS解析=》tcp三次握手=》发送http请求=》服务器处理请求并返回http报文=》浏览器解析渲染页面=》tcp四次挥手

10、websocket

概述

服务器可以主动向客户端推送消息，客户端也可以主动向服务端发送消息，是真正的双向平等对话，属于服务器推送技术的一种。

特点

（1）建立在tcp协议之上，服务端的实现比较容易
（2）与http有良好的兼容性，默认端口也是80和443，并且握手阶段采用http协议，因此握手时候不容易被屏蔽，能通过http各种代理服务器
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据
（5）没有同源限制，客户端可以与任意服务器通信
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是url

心态机制

心跳机制是每个一段时间会向服务器发送一个数据包，告诉服务器自己还活着，同时客户端也会确认服务端是否还活着，如果还活着的话，就会回传一个数据包给客户端来确定服务端也还活着，否者的话，有可能是网络断开连接了。

11、强缓存，协商缓存

概述

强缓存相关有expires，cache-control。如果两个同时存在的话，cache-control的优先级高于expires。

协商缓存相关字段有last-modified/if-modified-since,etag/if-none-match

理解

缓存这东西，第一次必须获取到资源后，然后根据返回的信息来告诉如何缓存资源，可能采用的是强缓存，也可能告诉客户端浏览器是协商缓存，这都需要根据响应的header内容来决定

浏览器第一次请求时


强缓存相关的header字段

expires

expires，这是http1.0时的规范；它的值为一个绝对时间的GMT格式的时间字符串，如Mon, 10 Jun 2015 21:31:12 GMT，如果发送请求的时间在expires之前，那么本地缓存始终有效，否则就会发送请求到服务器来获取资源。

cache-control

cache-control：max-age=number，这是http1.0出现的header信息，主要是利用该字段的max-age值来进行判断，他是一个相对值；资源第一次请求时间和cache-contro设定的有效时期，计算出一个资源过期时间，再拿这个过期时间跟当前的请求时间比较，如果请求时间在过期之前，就能命中缓存，否则就不行。

cache-control和expires有什么区别

expires有一个大的缺陷，它使用一个固定的时间，要求服务器与客户端的时钟保持严格的同步。
cache-control，他使用max-age指定组件被缓存多久

协商缓存相关的header字段

协商缓存都是由服务器来确定缓存资源是否可用的，所以客户端与服务器端要通过某种标识来进行通信，从而让服务器判断请求资源是否可以缓存访问，这主要涉及到下面两组header字段，这两组搭档都是成对出现的，即第一次请求的响应头带上某个字段（Last-Modified或者Etag），则后续请求则会带上对应的请求字段（If-Modified-Since或者If-None-Match），若响应头没有Last-Modified或者Etag字段，则请求头也不会有对应的字段。

Last-Modified/If-Modified-Since

浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Last-Modified的header，这个header表示这个资源在服务器上的最后修改时间

浏览器再次跟服务器请求这个资源时，在request的header上加上If-Modified-Since的header，这个header的值就是上一次请求时返回的Last-Modified的值

服务器再次收到资源请求时，根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化，如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。

浏览器收到304的响应后，就会从缓存中加载资源

如果协商缓存没有命中，浏览器直接从服务器加载资源时，Last-Modified的Header在重新加载的时候会被更新，下次请求时，If-Modified-Since会启用上次返回的Last-Modified值

Etag/If-None-Match

这两个值是由服务器生成的每个资源的唯一标识字符串，只要资源有变化就这个值就会改变；其判断过程与Last-Modified/If-Modified-Since类似，与Last-Modified不一样的是，当服务器返回304 Not Modified的响应时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag跟之前的没有变化。

13、懒加载和预加载

懒加载

懒加载与预加载的区别详细

概述

当访问一个页面的时候，先把img元素或者其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样只需要请求一次，俗称占位符），只有当图片出现在浏览器的可视区域时候，才设置图片真正的路径，让图片显示出来，这就是图片懒加载

实现步骤

1）首先，不要将图片地址放在src属性中，而是放在其他属性（dta-original）中。
2）页面加载完成后，根据scrollTop判断图片是否在用户的视野中，如果在，则将data-original属性中的值取出来放在src属性中。
3）在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性的值取出放在src属性中。

预加载

概述

提前加载图片，用户需要可以直接在本地缓存中渲染

实现

懒加载和预加载的对比

1）概念：
懒加载也叫延迟加载：js图片延迟加载，延迟加载图片或符合某些条件时候才加载某些图片。
预加载：提前加载图片，当用于需要查看时候可以直接在本地缓存中渲染。

2）区别：

• 行为相反，一个是提前加载，一个是迟缓甚至不加载。
• 懒加载对服务器有一定的缓解压力的作用，预加载会增加服务器前端压力

3）实现预加载主要有三个方法：

• html中img标签最初设置为display:none；
• js脚本中使用image对象动态创建好图片；
• 使用XMLHttpRequest对象可以更加精细的控制预加载过程，缺点是无法跨域：

14、xss攻击

xss,即为（cross site scripting），中文名为跨站脚本，是发生在目标用户的浏览器层面上的，当渲染dom树的过程发生了不在预期内执行的js代码时，就发生了xss攻击。大多数xss攻击的主要方式是嵌入一段远程或者第三方域上的js代码。实际上是在目标网站的作用域下执行了这段js代码

解决
对输入（和url参数）进行过滤，对输出进行编码。也就是对提交的所有内容进行过滤。对url中的参数进行过滤，过滤掉会导致脚本执行的相关内容；然后对动态输出到页面进行html编码，使脚本无法在浏览器中执行。虽然对输入过滤可以被绕过，但是也还是会拦截很大一部分的xss攻击

CSP
前端的CSP & CSP如何落地，了解一下
CSP(Content-Security-Policy)是一个HTTP response header, 它描述允许页面控制用户代理能够为指定的页面加载哪些资源, 可防止XSS攻击

15、csrf攻击

csrf（cross site request forgery，跨站请求伪造），字面理解意思就是在别的站点伪造了一个请求。专业术语来说就是在受害者访问一个网站时候，其cookie还没有过期的情况下，攻击者伪造一个连接地址发送给受害者并欺骗让其点击，从而形成csrd

解决

• 验证http referer字段，referer会告诉服务器我是从那个页面连接过来的，服务器基于此可以获得一些信息用于处理
• 在请求地址中添加token进行验证
• 在http头中自定义属性并验证

16、TLS中间人攻击

1）客户端发送请求到服务器，请求被中间人截获
2）服务器向客户端发送公钥，中间人截获公钥，保留到自己手上。然后自己生成一个伪造的公钥，发送给客户端
3）客户端收到伪造的公钥后，生成加密hash值发给服务器
4）中间人获得加密hash值，用自己的私钥解密获得真秘钥。同时生成假的加密hash值，发给服务器
5）服务器用私钥解密获得假密钥。然后加密数据传输给客户端

16、同源策略和跨域问题

同源策略

同源策略：同一协议，同一域名，同一端口号。当其中一个不满足的时候，我们的请求就会发生跨域问题。

jsonp

17、CDN原理

资源上传cdn之后，当用户访问cdn的资源地址之后会经历下面的步骤：

首先经过本地的dns解析，请求cname指向的那台cdn专用的dns服务器。

dns服务器返回全局负载均衡的服务器ip给用户

用户请求全局负载均衡服务器，服务器根据ip返回所在区域的负载均衡服务器ip给用户

用户请求区域负载均衡服务器，负载均衡服务器根据用户ip选择距离近的，并且存在用户所需内容的，负载比较合适的一台缓存服务器ip给用户。当没有对应内容的时候，会去上一级缓存服务器去找，直到找到资源所在的源站服务器，并且缓存在缓存服务器中。用户下一次在请求该资源，就可以就近拿缓存了。

CDN资源分发
将一些静态资源文件托管在第三方CDN服务中，一方面可以减少服务器的压力，另一方面，CDN的优势在于，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，保证资源的加载速度和稳定性

18、DNS原理

概述
将主机域名转换为ip地址，属于应用层协议，使用UDP传输。
过程：
总结： 浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。
一、主机向本地域名服务器的查询一般都是采用递归查询。
二、本地域名服务器向根域名服务器的查询的迭代查询。
1)当用户输入域名时，浏览器先检查自己的缓存中是否 这个域名映射的ip地址，有解析结束。
2）若没命中，则检查操作系统缓存（如Windows的hosts）中有没有解析过的结果，有解析结束。
3）若无命中，则请求本地域名服务器解析（ LDNS）。
4）若LDNS没有命中就直接跳到根域名服务器请求解析。根域名服务器返回给LDNS一个 主域名服务器地址。
5） 此时LDNS再发送请求给上一步返回的gTLD（ 通用顶级域）， 接受请求的gTLD查找并返回这个域名对应的Name Server的地址
6） Name Server根据映射关系表找到目标ip，返回给LDNS
7） LDNS缓存这个域名和对应的ip， 把解析的结果返回给用户，用户根据TTL值缓存到本地系统缓存中，域名解析过程至此结束

19、osi七层模型

21、常用端口

• 80：http
• 443：https
• 3306：mysql
• 21：ftp
• 22：ssh
• 6379：redis

22、TCP、UDP相关

三次握手、四次挥手

客户端与服务器的握手是一个往复确认的过程

客户端：发出确认请求，SYN=1，seq=x，你听得到么，我想建立连接（SYN=1），我的序号是x（seq=x）
服务器：对请求进行确认，也就是回应，我听到了（ACK=1，ack=x+1），你听得到么（SYN=1），我的序号是y（seq=y）
客户端：对服务器的回应进行确认，我听到了（ACK=1，ack=y+1），我的序号是x+1

握手的过程就是SYN seq ACK ack的来回确认
SYN ACK是头部的字段，可以理解为标志位，协议中有对他们的值有具体的规定
ack就是确认号，确认号是期望收到的对方的下一个报文段的第一个数据字节的序号，也就是收到的序号+1
否则随便一个，怎么对得上号

为什么要三次握手？
如果不是三次握手，只有两次
如果客户端发出请求连接时，报文延时了，但是如果只有两次握手，服务器收到请求就响应建立连接，但因为只有两次握手，客户端不会再次确认，服务器却会一直等待，浪费资源

四次挥手
客户端无数据发送时，请求关闭连接，我（FIN=1）我的序号是u（u就是之前传送过的所有数据的最后一个字节的序号+1）
此时客户端转变为FIN-WAIT-1状态
服务器收到客户端的消息后，告诉客户端“好的，我知道了”（ACK=1，ack=u+1），这条消息的序号是v（seq=v ，这是服务器发送消息的序号)
此时服务器的状态就转换为了CLOSE-WAIT状态
此时，客户端通往服务器的路就断开了，客户端不能向服务器发送数据
但是服务器仍旧可以向客户端发送数据，现在是“半关闭”的状态
当客户端收到来自服务器的确认之后，进入FIN-WAIT-2状态，等待服务器那边说断开连接，等待中。。。。。
当服务器所有的数据也都完全发送完成了之后，服务器才开始主动告知客户端断开连接（FIN=1，seq=w）

并且再次发送确认信息（ACK=1，ack=u+1，因为客户端已经不能发送数据了，服务器期望收到的序号永远都是最后一个序号+1，也就是u+1）
这时，服务器就进入了LAST-ACK状态，最后确认状态
客户端收到了服务器的断开连接请求后，也需要给出确认响应（ACK=1，ack=w+1，seq=u+1），然后进入TIME-WAIT状态
等待两个MSL后，进入关闭状态
服务器最终收到来自客户端的确认信息后，关闭，进入CLOSED状态
四次挥手也是一个互相确认的过程

为什么四次挥手
这个过程很好理解，客户端发出请求后，并不意味着服务器都已经完成响应。所以当客户端请求断开时，并不能立即断开，还需要等待服务器那边处理妥当，再来通知你的确是可以断开了，消息发出来谁知道别人收没收到，所以还需要一个确认

TCP特点

• 面向连接的
• 传输是可靠的，保证了数据的正确性和数据顺序
• 以字节流的形式进行传输，实践上是TCP把数据看成一串无结构的字节流

tcp为什么可靠

• ACK和超时重发机制
• 滑动窗口
• 拥塞控制

UDP和TCP的区别

• TCP面向连接（如打电话要先拨号建立连接）；UDP是无连接的，即发送数据之前不需要建立连接
• TCP要求的系统资源较多，UDP较少
• TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达；UDP尽最大努力交付，即不保证可靠交付
• TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流；UDP是面向报文的UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低（对实时应用很有用，如IP电话，实时视频会议等）
• 每一条TCP连接只能是点到点的；UDP支持一对一，一对多，多对一和多对多的交互通信

UDP是怎么保证数据包是到达了的（多次重传）

23、h5离线存储manifest

配置

1）在需要缓存的页面上加上manifest=“缓存配置文件名称”最好将文件放在目录下

<html lang="en" manifest="cache.manifest">

2)在当前文件夹名称根目录，新建cache.manifest
manifest文件，基本格式为三段：cache，network与fallback，其中network和fallback为可选项

而第一行cache manifest为固定格式，必须写在前面。

以#号开头的是注释，可以是版本号，时间戳等等。一般会在这写个版本号，用来在缓存的文件更新时，更改manifest，版本号作用：浏览器已经缓存下来的缓存，只有当manifest文件发生了改变才会更新本地缓存，即使你的代码发生了更新，本地浏览器也是不知道的，所以每次发布代码时你可以更改下#后面的信息比如版本号或者时间，告诉浏览器相应的更新本地缓存。

1、cache（必须） 标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径。这里列举出来的文件，当第一次加载下来时，会被浏览器缓存在本地。

2、network ：表示它下面列出来的资源只有在在线的情况下才能访问，这些资源不会被离线存储。离线情况下无法使用这些资源，network 联网的时候才能访问

3、fallback （可选） 当资源无法访问时，浏览器使用后备资源去替代。第二个表示后备页面。两个 url 都必须使用相对路径并且与清单文件同源。可以使用通配符。

CACHE MANIFEST
    #v0.1
    CACHE:
      js/index.js
      css/index.css
    NETWORK:
      images/logo.png
    FALLBACK:
      *.html /404.html

23、DOM

基本概念

文档

一个页面就是一个文档，DOM中使用document表示

元素

页面中的所有标签都是元素，DOM中使用element表示

节点

网页中的所有内容都是节点（标签、属性、文本、注释等），dom中使用node表示

24、content-type

参加的content-type类型有哪些?

text/plain 文本类型
text/css   css类型
text/html  html类型
application、x-javascript js类型
application/json json类型
image/png jpg gif image/*

25、线程和进程的区别

• 一个程序至少有一个进程，一个进程至少有一个线程
• 进程是操作系统中的应用程序、是资源分配的基本单位，线程是用来执行具体的任务和功能，是CPU调度和分派的最小单位

26、同步和异步

同步的概念
同步，我的理解是一种线性执行的方式，执行的流程不能跨越。一般用于流程性比较强的程序，我们做的用户登录功能也是同步处理的，必须用户通过用户名和密码验证后才能进入系统的操作。

异步的概念
异步，是一种并行处理的方式，不必等待一个程序执行完，可以执行其它的任务。在程序中异步处理的结果通常使用回调函数来处理结果。在JavaScript中实现异步的方式主要有Ajax和H5新增的Web Worker。

辅助理解（可以不在面试现场上使用）
比方说一个人边吃饭，边看手机，边说话，就是异步处理的方式。

同步处理就不一样了，说话后在吃饭，吃完饭后在看手机，必须等待上一件事完了，才执行后面的事情。

26、同源策略，怎么解决跨域原理，知道JSonp吗？

同源策略
端口、域名和协议 必须都要相同。这是NetScape提出的安全策略，Web构建在同源策略基础上的，浏览器为安全考虑只允许本域名下的接口交互，不同源的客户端脚本，在没有明确授权的情况下，是不能读写对方的资源。

同源策略限制：cookie，localStorage 和 indexDB无法获取，DOM 和 JS对象也无法获取，Ajax请求也不能发送。

如何解决跨域

简单的跨域请求jsonp即可，复杂的cors，窗口之间JS跨域postMessage，开发环境下接口跨域用nginx反向代理或node中间件比较方便。

JSONP

JSONP的原理：动态添加一个

JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义吧。

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

27、Ajax的原理以及步骤

原理

通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

Ajax的应用的五个步骤：

1、建立XMLHttpRequest对象；

2、设置回调函数；

3、使用open方法与服务器建立连接；

4、向服务器端发送数据；

5、在回调函数针对不同响应状态进行处理；

28、页面加载 多接口 共用loading

1、给这个loading公用的事件上一个计数的锁，每次请求开始执行loading的时候这个计数值就+1，请求结束的时候loading计数值就-1，那么当这个计数值为0的时候就可以取消loading的显示了
2、设置一个默认显示时间，当网络中断等导致请求无法继续时，等待一定时间后自动取消loading

29、DOM和CSSDOM树渲染过程

• 解析HTML结构。
• 加载外部脚本和样式表文件。
• 解析并执行脚本代码。//js之类的
• DOM树构建完成。//DOMContentLoaded
• 加载图片等外部文件。
• 页面加载完毕。//load

在第4步的时候DOMContentLoaded事件会被触发。
在第6步的时候load事件会被触发。

在这个过程中，脚本文件的下载和执行是与文档解析同步进行，也就是说，它会阻塞文档的解析，如果控制得不好，在用户体验上就会造成一定程度的影响。

window.onload 和 DOMContentLoaded 的区别

在js中DOMContentLoaded方法是在HTML文档被完全的加载和解析之后才会触发的事件，他并不需要等到（样式表/图像/子框架）加载完成之后再进行。在看load事件（onload事件），用于检测一个加载完全的页面。
为什么要区分？
开发中我们经常需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的。这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函数。
当然DOMContentLoaded机制更加合理，因为我们可以容忍图片，flash延迟加载，却不可以容忍看见内容后页面不可交互。

30、Script标签阻塞渲染问题，说说Defer与Async

<script src="script.js"></script>

没有 defer 或 async，浏览器会立即加载并执行指定的脚本
“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

<script async src="script.js"></script>

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

<script defer src="myscript.js"></script>

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

前端页面处理缓存的方法(手动删除，头文件禁止,jquery ajax清除浏览器缓存)
什么情况下能够使页面渲染加载变快（答js文件后移，css文件用链接的方式）

31、前端数据加密

前端一般使用md5、base64加密、sha1加密

//md5                document.getElementsByClassName("md5")[0].innerHTML =md5(content);
//sha1               document.getElementsByClassName("sha1")[0].innerHTML =hex_sha1(content);
//base64
var base = new Base64();                document.getElementsByClassName("base64")[0].innerHTML =base.encode(content);
var base_ = document.getElementsByClassName("base64")[0].innerHTML;
document.getElementsByClassName("base")[0].innerHTML =base.decode(base_);

32、HTTP协议由哪些部分组成？

（1）HTTP 请求的组成：状态行、请求头、消息主体三部分组成。

请求行
请求方法字段、URL字段和HTTP协议版本
例如：
GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT
请求头(key value形式)
User-Agent：产生请求的浏览器类型。
Accept：客户端可识别的内容类型列表。
Host：主机地址
（消息主体）请求数据
post方法中，会把数据以key value形式发送请求
空行，发送回车符和换行符，通知服务器以下不再有请求头

HTTP 响应的组成：状态行、响应头、响应正文

状态行是由：HTTP-Version+Status-Code+Reason-Phrase
比如：HTTP/1.1 200 ok
分别表示http版本 + 状态码 + 状态代码的文本描述
状态码：
1xx：
指示信息–表示请求已接收，继续处理
2xx：
成功–表示请求已被成功接收、理解、接受
3xx：
重定向–要完成请求必须进行更进一步的操作。
4xx：
客户端错误–请求有语法错误或请求无法实现。
5xx：
服务器端错误–服务器未能实现合法的请求。

响应头：包含服务器类型，日期，长度，内容类型等
Server:Apache Tomcat/5.0.12
Date:Mon,6Oct2003 13:13:33 GMT
Content-Type:text/html
Last-Moified:Mon,6 Oct 2003 13:23:42 GMT
Content-Length:112
响应正文响应正文就是服务器返回的HTML页面或者json数据**

33、怎么理解http无状态

无状态是指，当浏览器发送请求给服务器的时候，服务器响应，但是同一个浏览器再发送请求给服务器的时候，他会响应，但是他不知道你就是刚才那个浏览器，简单地说，就是服务器不会去记得你，所以是无状态协议。
而DNS是有状态协议 。

34、session,cookie和token的区别

session，cookie和token的区别
由于http的无状态性，为了使某个域名下的所有网页能够共享某些数据，session和cookie出现了。
token定义
token 也称作令牌，由uid+time+sign[+固定参数]
token 的认证方式类似于临时的证书签名, 并且是一种服务端无状态的认证方式, 非常适合于 REST API 的场景. 所谓无状态就是服务端并不会保存身份认证相关的数据。
token组成
uid: 用户唯一身份标识
time: 当前时间的时间戳
sign: 签名, 使用 hash/encrypt 压缩成定长的十六进制字符串，以防止第三方恶意拼接
固定参数(可选): 将一些常用的固定参数加入到 token 中是为了避免重复查库
存放
token在客户端一般存放于localStorage，cookie，或sessionStorage中。在服务器一般存于数据库中
token认证流程
token 的认证流程与cookie很相似

用户登录，成功后服务器返回Token给客户端。
客户端收到数据后保存在客户端
客户端再次访问服务器，将token放入headers中
服务器端采用filter过滤器校验。校验成功则返回请求数据，校验失败则返回错误码

区别：token可以抵抗csrf，cookie+session不行