HTTP常见问题列表

1. 说一下 http 和 https

1.基本概念

http:

• 应用层的面向对象的协议
• 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服 务器端请求和应答的标准(TCP)
• 用于：从 WWW 服务器传输超文本到本地浏览器的传 输协议
• 作用：使浏览器更加高效，使网络传输减少。

https：

• 以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版， http 和 ssl 协议构建的可进行加密传输和身份认证的网络协议
• 作用:建立一个信息安全通道，来确保数据的传输，确保网站的真实性

2.区别

• http 连接很简单，是无状态的，明文传输
• https加密传输和身份认证，安全性更高
• 使用不同的链接方式，端口也不同，一般而言，http 协议的端口为 80，https 的端口为 443
• Https协议需要ca证书，费用较高

3.原理

HTTPS是建立在SSL/TLS（SSL是TLS的前身，目前绝大部分浏览器都不支持SSL，而支持TLS）协议之上，而SSL/TLS是建立在TCP协议之上

HTTPS的建立过程可以分解为TCP + SSL/TLS + HTTP协议依次建立连接的过程

SSL加密原理在于：TCP三次握手后，双方协商一致的安全等级

建立会话密钥

• 在第三次TCP握手时传client hello报文（带SSL加密算法，TLS/SSL版本，所要访问的域名）
• 服务器收到client hello后送server hello报文（带服务端证书的相关信息和公钥信息）
• 客户端收到证书和公钥，用公钥来加密回话密钥发给服务器
• 服务器通过私钥来解密回话密钥
• SSL连接成功后通过加密的回话密钥进行通讯

为什么SSL连接在建立过程使用非对称加密，后面的数据传输使用对称加密？

• 因为非对称加密算法十分复杂，加密解密时间长，效率低
• 所以只在TSL连接建立时才使用非对称加密，后面的数据传输环节使用对称加密，这样既能保证效率，又能极大的增强安全性

4. 优缺点

1. 优点

• 可认证用户和服务器，确保数据发送到正确的客户机和服务器;
• SSL数据加密可以防止数据被拦截和串改，保证数据的完整性
• 虽然不是绝对安全，但大幅增加了中间人的攻击成本
• https协议比http协议的搜索结果排名将会更高

2. 缺点

• 握手阶段会比较费时
• 加密过的数据会比http没加密的数据开销增多，缓存效率低
• 证书要钱，功能越强大费用越高
• 需要绑定IP，一个IP只能绑定一个域名

2. tcp

TCP 是面向连接的通讯传输，指在传送数据之前必须先建立连接(三次握手)，数据传送完成后要释放连接(四次挥手)。

网络中传输的数据包由两部分组成：

1. 协议所要用到的首部（首部的结构由协议的具体规范详细定义）
2. 上一层传过来的数据
   外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
   三次握手过程图解
   

TCP连接重要字段：

• SYN：发起一个新连接。SYN = 1
• seq: 自己的数据标记
• ack：收到对方的数据标记，ack=seq+1， ACK=1是ack才有效
• ACK：确定收到请求，如果确认则ACK=1
• Flags：标志位

seq序号、ack序号：用于确认数据是否准确，是否正常通信

标志位：用于确认/更改连接状态。

三次握手，一句话概括:

1. 第一次握手：客户端向服务器发送hello报文(喂，你听到吗)
2. 第二次握手：服务器收到clien报文，返回确认收到报文（我听到了，你听到我吗）
3. 第三次握手：客户端向服务器返回收到server报文（我能听到）
4. established：【开始正文balabala。。。】

3.TCP 和 UDP 的区别

1. TCP 是面向连接的，udp 是无连接的即发送数据前不需要先建立链接。
2. TCP 提供可靠的服务。无差错，不丢失， 不重复，且按序到达; 不会丢失数据因此适合大数据量的交换。UDP 尽最大努力交付，即不保证可靠交付
3. TCP 是面向字节流，UDP 面向报文，并且网络出现拥塞不会使得发送速率降低(因此会出现丢包，对实时的应用比如 IP 电话和视频会议等)。
4. TCP 只能是 1 对 1 的，UDP 支持 1 对 1,1 对多。
5. TCP 的首部较大为 20 字节，而 UDP 只有 8 字节。
6. TCP 是面向连接的可靠性传输，而 UDP 是不可靠的。

4. WebSocket

什么是 WebSocket?

• WebSocket 是 HTML5 中的协议，支持持久连续
• WebSocket 是一种网络传输协议，可在单个 TCP 连接上进行全双工通信
• WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
• 在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。
• HTTP 请求与响应可能会包含较长的头部，其中真正有效的数据可能只是很小的一部分，所以这样会消耗很多带宽资源。
• HTML5 定义了 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
• http 协议不支持持久性连接。Http1.0 和 HTTP1.1 都不支持持久性的链接，HTTP1.1 中的 keep-alive，将多个 http 请求合并为 1个
• Websocket 使用 ws 或 wss 的统一资源标志符（URI），其中 wss 表示使用了 TLS 的 Websocket。
• WebSocket 协议使用 80 端口；
• 若运行在 TLS 之上时，默认使用 443 端口。

具体有什么优点

• 较少的控制开销：在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小；
• 更强的实时性：由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于 HTTP 请求需要等待客户端发起请求服务端才能响应，延迟明显更少；
• 保持连接状态：与 HTTP 不同的是，WebSocket 需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息；
• 更好的二进制支持：WebSocket 定义了二进制帧，相对 HTTP，可以更轻松地处理二进制内容；
• 可以支持扩展：WebSocket 定义了扩展，用户可以扩展协议、实现部分自定义的子协议。
• 被广泛地应用在即时通讯/IM、实时音视频、在线教育和游戏等领域

使用步骤

const myWebSocket = newWebSocket(url [, protocols]);
// url: WebSocket 服务器将响应的 URL；
// protocols（可选）：一个协议字符串或者一个包含协议字符串的数组,用于指定子协议，这样单个服务器可以实现多个 WebSocket 子协议。

对象包含属性：

1. binaryType：使用二进制的数据类型连接；
2. bufferedAmount（只读）：未发送至服务器的字节数；
3. extensions（只读）：服务器选择的扩展；
4. onclose：用于指定连接关闭后的回调函数；
5. onerror：用于指定连接失败后的回调函数；
6. onmessage：用于指定当从服务器接受到信息时的回调函数；
7. onopen：用于指定连接成功后的回调函数；
8. protocol（只读）：用于返回服务器端选中的子协议的名字；
9. readyState（只读）：返回当前 WebSocket 的连接状态，共有 4 种状态：
   • CONNECTING — 正在连接中，对应的值为 0；
   • OPEN — 已经连接并且可以通讯，对应的值为 1；
   • CLOSING — 连接正在关闭，对应的值为 2；
   • CLOSED — 连接已关闭或者没有连接成功，对应的值为 3
     10）url（只读）：返回值为当构造函数创建 WebSocket 实例对象时 URL 的绝对路径。

WebSocket 主要方法有两个：

1. close([code[, reason]])：该方法用于关闭 WebSocket 连接，如果连接已经关闭，则此方法不执行任何操作；
2. send(data)：该方法将需要通过 WebSocket 链接传输至服务器的数据排入队列，并根据所需要传输的数据的大小来增加 bufferedAmount 的值 。若数据无法传输（比如数据需要缓存而缓冲区已满）时，套接字会自行关闭。

事件监听：

使用 addEventListener(eventname, Func) 或 oneventname 属性：

1. close：当一个 WebSocket 连接被关闭时触发，也可以通过 onclose 属性来设置；
2. error：当一个 WebSocket 连接因错误而关闭时触发，也可以通过 onerror 属性来设置；
3. message：当通过 WebSocket 收到数据时触发，也可以通过 onmessage 属性来设置；
4. open：当一个 WebSocket 连接成功时触发，也可以通过 onopen 属性来设置1.

websocket 与 HTTP 区别

• HTTP通过 Request 来界定生命周期，一个Request一个 Response，这次 Http 请求就结束了。
• Http1.1 使用 connection: Keep-alive属性改进了，一个 Http 连接可发送多个 Request，接收多个 Response。
• 但Http 中一个 Request 只能对应有一个 Response，而且 Response 是被动的，不能主动发起。
• WebSocket 是基于 Http 协议的，借用了 Http 协议来完成一部分握手，握手阶段与 Http 是相同的。
• 一个 websocket 握手协议的实现，基本是 2 个属性，upgrade， connection。

5. HTTP 请求的方式

1. HEAD ：

• head:类似于 get 请求，只不过返回的响应中没有具体的内容，用户获取报头
• options:允许客户端查看服务器的性能，比如说服务器支持的请求方式等等。

6. 一个图片 url 访问后直接下载怎样实现

请求的返回头里面，用于浏览器解析的重要参数就是 OSS 的 API 文档里面的返回 http 头，决定用户下载行为的参数。
下载的情况下:

1. x-oss-object-type:Normal
2. x-oss-request-id:598D5ED34F29D01FE2925F41
3. x-oss-storage-class:Standard

7. web Quality（无障碍）

使用 alt 属性:<img src="person.jpg" alt="this is a person"/>

当浏览器无法显示图像或者浏览器是语音浏览器时，alt属性可以使浏览器显示或者读出图像描述

8. BOM 属性对象

1. location 对象

• location.href:当前文档的 URL
• location.search:查询字符串部分，？号后面内容
• location.hash:#后面的内容
• location.pathname:域名后路由
• location.host:域名部分
• location.hostname:主域名(一级域名)
• location.protocol:协议
• location.port:端口
• location.asign:设置当前文档的 URL

1. history对象

• history.back(): 后退一页
• history.forward():前进一页
• history.go(num):前进指定页数

1. navigator对象

• navigator.userAgent – 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字 符串)
• navigator.cookieEnabled – 返回浏览器是否支持(启用)cookie

9. HTML5 drag api

事件名	事件主体	作用
dragstart	被拖放元素	在开始拖放时触发
darg	被拖放元素	在正在拖放时触发
dragend	被拖放元素	拖放操作结束时触发
dragenter	目标元素	在被拖放元素进入目标元素时触发
dragover	目标元素	在被拖放在目标元素内移动时触发
dragleave	目标元素	在被拖放元素移出目标元素是触发
drop	目标元素	在目标元素完全接受被拖放元素时触发

10. 说说http2.0

http发展史：

• HTTP于1990年问世，那时候HTTP非常简单：只支持GET方法；没有首部；只能获取纯文本
• 1996年版本为HTTP/1.0, 增加了首部、状态码、权限、缓存、长连接（默认短连接）等规范，可以说搭建了协议的基本框架。
• 1997年，1.1版本重大改进在于默认长连接；强制客户端提供Host首部；管线化；Cache-Control、ETag等缓存的相关扩展。
  http1.1存在的问题：
• 线头阻塞：TCP连接上只能发送一个请求，前面的请求未完成前，后续的请求都在排队等待
• 1.1版本请求并发依赖于多个TCP连接，建立TCP连接成本很高，还会存在慢启动的问题
• HTTP/1.X版本是采用文本格式，首部未压缩，而且每一个请求都会带上cookie、user-agent等完全相同的首部。
• 客户端需要主动请求

http2.0的改进

• 内容安全， http2.0 是基于 https 的，天然具有安全特性，以避免单纯使用 https 的性能下降

• 二进制分帧（性能提升的核心）:HTTP2.0 会将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码，基于二进制可以让协议有更多的扩展性，比 如引入了帧来传输数据和指令

• 多路复用：HTTP2让所有的通信都在一个TCP连接上完成，真正实现了请求的并发

  • HTTP2建立一个TCP连接，一个连接上面可以有任意多个流（stream），消息分割成一个或多个帧在流里面传输。帧传输过去以后，再进行重组，形成一个完整的请求或响应。这使得所有的请求或响应都无法阻塞。
  • 每个 request 请求可以随机的混杂在一 起，接收方可以根据 request 的 id 将 request 再归属到各自不同的服务端请求里面，另外 多路复用中也支持了流的优先级，允许客户端告诉服务器那些内容是更优先级的资源， 可以优先传输。
  • stalled的意思是从TCP连接建立完成，到真正可以传输数据之间的时间差。这就是队头阻塞，前面的请求没有处理，后面的请求都在排队等待。
  • 不管是客户端或服务器端，能同时处理请求或响应都是有限的，流控制帮我们解决了这个问题，允许接收者停止或减少发送的数据量，请求太多时，还是会存在排队等待的问题，排队时间相对1.1会少很多。

• 头部压缩：在1.X版本中首部用文本格式传输，每个请求带的一些首部字段都是相同的。

  • 2.0处理方案：浏览器和服务器端之间维护一份相同的静态字典，可以动态的添加内容
  • 第一次传输值会采用静态Huffman编码来减小体积
  • 之后的传输浏览器和服务器端就会把它添加到自己的动态字典中。后续传输就可以传输索引了，一个字节搞定

• 服务器端推送：服务器端推送使得服务器可以预测客户端需要的资源，主动推送到客户端。例如：

  • 客户端请求index.html，服务器端能够额外推送script.js和style.css。
  • 实现原理就是客户端发出页面请求时，服务器端能够分析这个页面所依赖的其他资源，主动推送到客户端的缓存
  • 服务器会发送一个PUSH_PROMISE帧，客户端了解到服务器端打算推送哪些资源，就不会再为这些资源创建重复请求。
  • 当客户端收到原始网页的请求时，它需要的资源已经位于缓存。

11. http 状态码

• 100 Continue 继续。客户端应继续其请求
• 101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更 高级的协议，例如，切换到 HTTP 的新版本协议
• 200 OK 请求成功。一般用于 GET 与 POST 请求
• 201 Created 已创建。成功请求并创建了新的资源
• 202 Accepted 已接受。已经接受请求，但未处理完成
• 203 Non-Authoritative Information 非授权信息。请求成功。但返回的 meta 信息不在原始的服务器，而是一个副本
• 204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下， 可确保浏览器继续显示当前文档
• 205 Reset Content 重置内容。服务器处理成功，用户终端(例如:浏览器)应重置文 档视图。可通过此返回码清除浏览器的表单域
• 206 Partial Content 部分内容。服务器成功处理了部分 GET 请求
• 300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特 征与地址的列表用于用户终端(例如:浏览器)选择
• 301 Moved Permanently 永久移动。请求的资源已被永久的移动到新 URI，返回信息会 包括新的 URI，浏览器会自动定向到新 URI。今后任何新的请求都应使用新的 URI 代替
• 302 Found 临时移动。与 301 类似。但资源只是临时被移动。客户端应继续使用原有 URI
• 304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回 任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返 回在指定日期之后修改的资源
• 305 Use Proxy 使用代理。所请求的资源必须通过代理访问
• 306 Unused 已经被废弃的 HTTP 状态码
• 307 Temporary Redirect 临时重定向。与 302 类似。使用 GET 请求重定向
• 400 Bad Request 客户端请求的语法错误，服务器无法理解,请求无效，前端提交数据的字段名称和字段类型与后台不一致，对照字段的名称，保持一致性，将 obj 对象通过 JSON.stringify 实现序列化
• 401 Unauthorized 请求要求用户的身份认证
• 402 Payment Required 保留，将来使用
• 403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
• 404 Not Found 服务器无法根据客户端的请求找到资源(网页)。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
• 405 Method Not Allowed 客户端请求中的方法被禁止
• 406 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求
• 407 Proxy Authentication Required 请求要求代理的身份认证，与 401 类似，但请求者应当使用代理进行授权
• 408 Request Time-out 服务器等待客户端发送的请求时间过长，超时
• 409 Conflict 服务器完成客户端的 PUT 请求是可能返回此代码，服务器处理请求时发生了冲突
• 410 Gone 客户端请求的资源已经不存在。410 不同于 404，如果资源以前有现在被永 久删除了可使用 410 代码，网站设计人员可通过 301 代码指定资源的新位置
• 411 Length Required 服务器无法处理客户端发送的不带 Content-Length 的请求信息
• 412 Precondition Failed 客户端请求信息的先决条件错误
• 413 Request Entity Too Large 由于请求的实体过大，服务器无法处理，因此拒绝请求。
• 为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则 会包含一个 Retry-After 的响应信息
• 414 Request-URI Too Large 请求的 URI 过长(URI 通常为网址)，服务器无法处理
• 415 Unsupported Media Type 服务器无法处理请求附带的媒体格式
• 416 Requested range not satisfiable 客户端请求的范围无效
• 417 Expectation Failed 服务器无法满足 Expect 的请求头信息
• 500 Internal Server Error 服务器内部错误，无法完成请求
• 501 Not Implemented 服务器不支持请求的功能，无法完成请求
• 502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
• 503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。 延时的长度可包含在服务器的 Retry-After 头信息中
• 504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求
• 505 HTTP Version not supported 服务器不支持请求的 HTTP 协议的版本，无法完成处理

12. 浏览器缓存：Cookie、sessionStorage、localStorage

缓存方式	大小	用途	特点
Cookie	4 kb	需要带去服务器的信息	每次请求都会带给服务器，持久保存，可设置过期时间，同源窗口共享
localStorage	5M	记录用户上一次的操作信息	除非被手动清除，否则永久保存，同源窗口共享
sessionStorage	5M	当前回话需要请求的数据，缓存减少请求次数	窗口关闭清空缓存，窗口不共享

• 因为每次 http 请求都回携带 cookie 信息，这样子浪费了带宽，所以 cookie 应该尽可能的少用，一般用于保存用户识别用户登陆
• sessionstorage 可以用来保存一些临时的数据，防止用户刷新 页面后丢失了一些参数。

13. 说一下 web worker

web worker 是运行在后台的 js，独立于其他脚本，通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

创建 web worker步骤:

• 检测浏览器对于 web worker 的支持性
• 创建 web worker 文件(js，回传函数等)
• 创建 web worker 对象引用

14. iframe

• 定义:iframe 元素会创建包含另一个文档的内联框架
• 提示:可以将提示文字放在<iframe></iframe>之间，来提示某些不支持 iframe 的浏览器 缺点:
• 缺点
  • 会阻塞主页面的 onload 事件
  • 搜索引擎无法解读这种页面，不利于 SEO
  • iframe 和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

15. Doctype 作用

• Doctype是一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的。
• 告诉浏览器要通过哪一种规范（DTD）解析文档（比如HTML或XHTML规范）。
• doctype在html中的作用就是触发浏览器的严格模式，如果省略doctype，浏览器就会进入到混乱模式。
• 严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
• 混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码,而在不同的浏览器下，界面的显示也会不同

16. 如何防范 XSS 和 csrf 攻击

XSS 攻击是什么

XSS(跨站脚本攻击)是指攻击者在返回的 HTML 中嵌入 javascript 脚本

如何防范

在 HTTP 头部配上，set-cookie

• httponly-这个属性可以防止 XSS,它会禁止 javascript 脚本来访问 cookie。
• secure - 这个属性告诉浏览器仅在请求为 https 的时候发送 cookie。

CSRF:

跨站请求伪造，可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求，比如用户登录了一个网站后，立刻在另一个tab页面访问量攻击者用来制造攻击的网站，
比如这个制造攻击的网站使用一张图片，但是这种图片的链接却是可以修改数据库的，这时候攻击者就可以以用户的名义操作这个数据库，

CSRF攻击条件

1. 用户访问站点A并产生了cookie
2. 用户没有退出A同时访问了B

CSRF漏洞排查

• 抓取一个正常请求的数据包，如果没有Referer字段和token，极有可能存在CSRF漏洞
• 如果有Referer字段，但是去掉Referer字段后再重新提交，如果该提交还有效，那么基本上可以确定存在CSRF漏洞。
• 利用工具进行CSRF检测。如：CSRFTESTER，CSRF REQUEST BUILDER等

防御方式的话:使用验证码，检查 https 头部的 refer，使用 token

17. Cookie 和 session 的区别

1. cookie 数据存放在客户的浏览器上，session 数据放在服务器上。
2. cookie 不是很安全，别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺骗，一般用来存放不敏感的信息，考虑到安全应当使用 session。
3. session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能 考虑到减轻服务器性能方面，应当使用 COOKIE。
4. cookie存在客户端，session 可以 存放于文件，数据库，内存中都可以
5. 单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存 20 个 cookie。

18. viewport 和移动端布局

响应式布局的常用解决方案:媒体查询、百分比、em （父元素的倍数）、rem（根元素的倍数）和vw/vh、vmin/vmax, 使用viewport定义缩放比例
https://github.com/forthealllight/blog/issues/13

• 媒体查询:@media screen and (max-width: 960px){}

• 使用viewport定义缩放比例
  <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;"/>

  • initial-scale [0,10] 初始缩放比例，1表示不缩放
  • minimum-scale [0,10] 最小缩放比例
  • maximum-scale [0,10] 最大缩放比例
  • user-scalable yes／no 是否允许手动缩放页面，默认值为yes

19. 一句话概括 RESTFUL

RESTful是目前最流行的接口设计规范
https://zhuanlan.zhihu.com/p/334809573

20. click 在 ios 上有 300ms 延迟，原因及如何解决?

原因

为了能把PC端大屏幕的页面以较好的效果展示在小屏幕手机端上，采用了双击缩放（double tap to zoom）的方案

• 为了区分用户是只要单击操作还是要双击进行缩放操作，所以设置了300ms的延迟时间，加以判断用户是单击还是双击缩放。
• 浏览器会在捕获用户第一次单击时，保持300ms的时间：若在300ms内若捕获不到第二次单击，则用户就是单纯执行单击操作；
• 若在300ms内，用户有第二次单击操作，则对该区域进行缩放操作。
• 故点击操作会给用户有了“慢”的体验。

解决方案：

1. 粗暴型：禁用缩放

<meta name="viewport" content="width=device-width,user-scalable=no">

2. FastClick

原理：在检测到touched事件后，立即触发一个模拟click事件，并把浏览器300ms之后真正触发的click事件阻断掉。

// 1.安装fastclick： npm install fastclick -S
//2. 引入
import fastClick from 'fastclick'
//3. 初始化FastClick实例。在页面的DOM文档加载完成后
fastClick.attach(document.body)

FastClick在移动端，会使软键盘触点不是很灵敏

如何解决ios input框唤启软键盘不灵敏问题"

在引用fastclick的地方，重写focus方法。

/**
  * @param {EventTarget|Element} targetElement
  */
FastClick.prototype.focus = function(targetElement) {
  var length;
  // Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.
  if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
      length = targetElement.value.length;
      targetElement.focus();// 加入这一句话
      targetElement.setSelectionRange(length, length);
  } else {
      targetElement.focus();
  }
};

21. addEventListener 参数

addEventListener(event, function, useCapture)

22. http 常用请求头

1. Accept

• Accept: text/html 浏览器可以接受服务器回发的类型为 text/html。
  -Accept: */* 代表浏览器可以处理所有类型,(一般浏览器发给服务器都是发这个)。

2. Accept-Encoding

• Accept-Encoding: gzip, deflate 浏览器申明自己接收的编码方法，通常指定压缩方法，是否支持压缩，支持什么压缩方法（gzip，deflate），（注意：这不是只字符编码）。

3. Accept-Language

• Accept-Language:zh-CN,zh;q=0.9 浏览器申明自己接收的语言。

4. Connection

• Connection: keep-alive 当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。
• Connection: close 代表一个Request完成后，客户端和服务器之间用于传输HTTP数据的TCP连接会关闭， 当客户端再次发送Request，需要重新建立TCP连接。

5. Host（发送请求时，该报头域是必需的）

• Host:www.baidu.com 请求报头域主要用于指定被请求资源的Internet主机和端口号，它通常从HTTP URL中提取出来的。

6. Referer

• Referer:https://www.baidu.com/?tn=62095104_8_oem_dg 当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的，服务器籍此可以获得一些信息用于处理。

7. User-Agent

• User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36 告诉HTTP服务器， 客户端使用的操作系统和浏览器的名称和版本。

8. Cache-Control

• Cache-Control:private 默认为private 响应只能够作为私有的缓存，不能再用户间共享
• Cache-Control:public 响应会被缓存，并且在多用户间共享。正常情况, 如果要求HTTP认证,响应会自动设置为 private.
• Cache-Control:must-revalidate 响应在特定条件下会被重用，以满足接下来的请求，但是它必须到服务器端去验证它是不是仍然是最新的。
• Cache-Control:no-cache 响应不会被缓存,而是实时向服务器端请求资源。
• Cache-Control:max-age=10 设置缓存最大的有效时间，但是这个参数定义的是时间大小（比如：60）而不是确定的时间点。单位是[秒 seconds]。
• Cache-Control:no-store 在任何条件下，响应都不会被缓存，并且不会被写入到客户端的磁盘里，这也是基于安全考虑的某些敏感的响应才会使用这个。

9. Cookie

• Cookie是用来存储一些用户信息以便让服务器辨别用户身份的（大多数需要登录的网站上面会比较常见），
• 比如cookie会存储一些用户的用户名和密码，当用户登录后就会在客户端产生一个cookie来存储相关信息，这样浏览器通过读取cookie的信息去服务器上验证并通过后会判定你是合法用户，从而允许查看相应网页。
• 当然cookie里面的数据不仅仅是上述范围，还有很多信息可以存储是cookie里面，比如sessionid等。

10. Range（用于断点续传）

• Range:bytes=0-5 指定第一个字节的位置和最后一个字节的位置。用于告诉服务器自己想取对象的哪部分。

11. Date:[浏览器发送数据的请求时间]
12. Origin:发起一个针对跨域资源共享的请求(该请求要求服务器在响应中加 入一个 Access-Control-Allow-Origin 的消息头，表示访问控制所允许 的来源)

23. 常用的http响应头

1. Cache-Control（对应请求中的Cache-Control）
   • Cache-Control:private 默认为private 响应只能够作为私有的缓存，不能再用户间共享
   • Cache-Control:public 浏览器和缓存服务器都可以缓存页面信息。
   • Cache-Control:must-revalidate 对于客户机的每次请求，代理服务器必须想服务器验证缓存是否过时。
   • Cache-Control:no-cache 浏览器和缓存服务器都不应该缓存页面信息。
   • Cache-Control:max-age=10 是通知浏览器10秒之内不要烦我，自己从缓冲区中刷新。
   • Cache-Control:no-store 请求和响应的信息都不应该被存储在对方的磁盘系统中。
2. Content-Type：text/html;charset=UTF-8 告诉客户端，资源文件的类型，还有字符编码，客户端通过utf-8对资源进行解码，然后对资源进行html解析。通常我们会看到有些网站是乱码的，往往就是服务器端没有返回正确的编码。
3. Content-Encoding:gzip 告诉客户端，服务端发送的资源是采用gzip编码的，客户端看到这个信息后，应该采用gzip对资源进行解码。
4. Date: Tue, 03 Apr 2018 03:52:28 GMT 这个是服务端发送资源时的服务器时间，GMT是格林尼治所在地的标准时间。http协议中发送的时间都是GMT的，这主要是解决在互联网上，不同时区在相互请求资源的时候，时间混乱问题。
5. Server：Tengine/1.4.6 这个是服务器和相对应的版本，只是告诉客户端服务器信息。
6. Transfer-Encoding：chunked 这个响应头告诉客户端，服务器发送的资源的方式是分块发送的。一般分块发送的资源都是服务器动态生成的，在发送时还不知道发送资源的大小，所以采用分块发送，每一块都是独立的，独立的块都能标示自己的长度，最后一块是0长度的，当客户端读到这个0长度的块时，就可以确定资源已经传输完了。
7. Expires:Sun, 1 Jan 2000 01:00:00 GMT 这个响应头也是跟缓存有关的，告诉客户端在这个时间前，可以直接访问缓存副本，很显然这个值会存在问题，因为客户端和服务器的时间不一定会都是相同的，如果时间不同就会导致问题。所以这个响应头是没有Cache-Control：max-age=*这个响应头准确的，因为max-age=date中的date是个相对时间，不仅更好理解，也更准确。
8. Last-Modified: Dec, 26 Dec 2015 17:30:00 GMT 所请求的对象的最后修改日期(按照 RFC 7231 中定义的“超文本传输协议日期”格式来表示)
9. Connection：keep-alive 这个字段作为回应客户端的Connection：keep-alive，告诉客户端服务器的tcp连接也是一个长连接，客户端可以继续使用这个tcp连接发送http请求。
10. ETag: "737060cd8c284d8af7ad3082f209582d" 就是一个对象（比如URL）的标志值，就一个对象而言，比如一个html文件，如果被修改了，其Etag也会别修改，所以，ETag的作用跟Last-Modified的作用差不多，主要供WEB服务器判断一个对象是否改变了。比如前一次请求某个html文件时，获得了其 ETag，当这次又请求这个文件时，浏览器就会把先前获得ETag值发送给WEB服务器，然后WEB服务器会把这个ETag跟该文件的当前ETag进行对比，然后就知道这个文件有没有改变了。
11. Refresh: 5; url=http://baidu.com 用于重定向，或者当一个新的资源被创建时。默认会在5秒后刷新重定向。
12. Access-Control-Allow-Origin: * 号代表所有网站可以跨域资源共享，如果当前字段为那么Access-Control-Allow-Credentials就不能为true
    • Access-Control-Allow-Origin: www.baidu.com 指定哪些网站可以跨域资源共享
13. Access-Control-Allow-Methods：GET,POST,PUT,DELETE 允许哪些方法来访问
14. Access-Control-Allow-Credentials: true 是否允许发送cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。如果access-control-allow-origin为*，当前字段就不能为true
15. Content-Range: bytes 0-5/7877 指定整个实体中的一部分的插入位置，他也指示了整个实体的长度。在服务器向客户返回一个部分响应，它必须描述响应覆盖的范围和整个实体长度。

24. 强缓存和协商缓存

• 强缓存相关字段有 expires ，cache-control 用来表示资源的缓存时间。如果 cache-control 与 expires 同时存在的话， cache-control 的优先级高于 expires。
• 协商缓存相关字段有 Last-Modified/If-Modified-Since，Etag/If-None-Match

因为服务器上的资源不是一直固定不变的，大多数情况下它会更新，
这个时候如果我们 还访问本地缓存，那么对用户来说，那就相当于资源没有更新，用户看到的还是旧的资 源;
所以我们希望服务器上的资源更新了浏览器就请求新的资源，没有更新就使用本地 的缓存，以最大程度的减少因网络请求而产生的资源浪费。

浏览器缓存是Web性能优化的重要方,浏览器缓存有下面的优点：

• 减少冗余的数据传输
• 减少服务器负担
• 加快客户端加载网页的速度

【强缓存、协商缓存什么时候用哪个】

1.第一次请求数据缓存本地

在浏览器第一次发起请求时 --> 本地无缓存，向web服务器发送请求 --> 服务器起端响应请求 协商缓存

2.强缓存，不需要请求服务器

• 第二次发起请求前 --》先获取该资源缓存的header信息 --〉根据header中的Cache-Control和Expires来判断是否过期，没过期则不发送请求，直接取缓存

3.协商缓存，需要请求服务器

• 若过期，则带请求同请求服务器，服务会先对比这个客户端发过来的Etag是否与服务器的相同，若相同，就将If-None-Match的值设为false，返回状态304，客户端继续使用本地缓存
• 若不同，若不相同就将If-None-Match的值设为true，返回状态为200，客户端重新机械服务器端返回的数据；
• 如果没有Etag，服务器端通过这个时间戳判断客户端的页面是否是最新的， 如果不是最新的，则返回最新的内容，如果是最新的，则返回304，客户端继续使用本地缓存。

普通刷新会启用弱缓存，忽略强缓存。只有在地址栏或收藏夹输入网址、通过链接引用资源等情况下，浏览器才会启用强缓存

25. 前端优化

1. 降低请求量:合并资源，减少 HTTP 请求数
2. minify / gzip 压缩，webP，
3. lazyLoad。
4. 加快请求速度:预解析 DNS，减少域名数，并行加载，CDN 分发。
5. 缓存:HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage。
6. 渲染:JS/CSS 优化，加载顺序
7. 服务端渲染，pipeline

什么是WebP

• WebP是google推出一种图片格式，它的特点就是支持无损或有损压缩
• 在相同画质下,图像体积也更小
• 将 JPG 压缩到相当于原图 90% 质量 时，图片体积减少了 50% 左右。当 WebP 将 JPG 压缩到相当于原图 80% 质量时，图片体积则减少了 60%~80%。有损 WebP 压缩性能优于 JPG 的原因主要是其预测编码技术先进，

性能检测

• 被动去测: 就是在被检测的页面置入脚本或 探针，当用户访问网页时，探针自动采集数据并传回数据库进行分析，
• 主动监测：即主动的搭建分布式受控环境，模拟用户发起页面访问请求，主动采集性能数 据并分析，在检测的精准度上，专业的第三方工具效果更佳，比如说性能极客。

26. GET 和 POST 的区别

1. 传参方式：get 参数通过 url 传递，post 放在 request body 中。
2. 参数长度：get 请求在 url 中传递的参数是有长度限制的，而 post 没有。
3. 安全性：get 比 post 更不安全，因为参数直接暴露在 url 中，所以不能用来传递敏感信息。
4. 编码方式：get 请求只能进行 url 编码，而 post 支持多种编码方式
5. get 请求会浏览器主动 cache，而 post 支持多种编码方式。
6. 参数保留：get 请求参数会被完整保留在浏览历史记录里，而 post 中的参数不会被保留。
7. TCP包数：GET 和 POST 本质上就是 TCP 链接，并无差别。但是由于 HTTP 的规定和浏览器/服务器 的限制，导致他们在应用过程中体现出一些不同。
   GET 产生一个 TCP 数据包;POST 产生两个 TCP 数据包
8. 对于 GET 方式的请求，浏览器会把 http header 和 data 一并发送出去，服务器响应 200 (返回数据);
   而对于 POST，浏览器先发送 header，服务器响应 100 continue，浏览器再发送 data，服 务器响应 200 ok(返回数据)

27. HTML5 新增的元素

1. 语义化标签： header，footer，nav,aside,section，article，方便阅读，利于SEO
2. 增强表单，为 input 增加了 color，emial,data ,range，calendar，time,search 等类型，
3. 表单form新增，autocomplete【规定form域自动完成功能】，novalidate【规定提交表单时是否验证域】
4. 在存储方面，提供了 sessionStorage，localStorage,和离线存储，通过这些存储方式方便数 据在客户端的存储和获取，
5. 在多媒体：新增音频和视频元素 audio 和 vedio
6. 有地理定位，canvas 画布，拖放
7. 多线程编程的 web worker 和 websocket 协议。

28. 在地址栏里输入一个 URL,中间会发生什么?

1. DNS 解析
   • 先从缓存取：浏览器缓存》系统缓存》路由缓存》系统的 hosts
   • 缓存没有，则查询DNS服务器，收到IP按顺序缓存起来
   • 根据IP及端口发送请求
2. TCP 连接：三次握手
3. http 请求封装在一个 tcp 包中，依次经过传输层，网络层， 数据链路层，物理层到达服务器
4. 服务器处理请求并返回相应的 html
5. 浏览器解析渲染页面：
   • 浏览器拿到html，会遍历文档节点，生成 DOM 树
   • 如果遇到 JS 脚本和外部 JS 连接，则会停止构建 DOM 树来执行和下载 相应的代码，这会造成阻塞，这就是为什么推荐 JS 代码应该放在 html 代码的后面
   • html 文件中会含有图片，视频，音频等资源，在解析 DOM 的过程中，遇到这些都会先从缓存取，缓存没有则进行并行下载
   • 根据内部、外部、内联样式构建CSSOM树
   • 构建完后DOM树和 CSSOM树合并为渲染树（排除非视觉节点后进行布局，确定元素位置尺寸，再进行渲染）
6. 连接结束

29. cookie 有哪些字段可以设置

• name 字段为一个 cookie 的名称。
• value 字段为一个 cookie 的值。
• domain 字段为可以访问此 cookie 的域名。
• path 字段为可以访问此 cookie 的页面路径。 比如 domain 是 abc.com,path 是/test，那么只 有/test 路径下的页面可以读取此 cookie。
• expires/Max-Age 字段为此 cookie 超时时间。若设置其值为一个时间，那么当到达此时间 后，此 cookie 失效。不设置的话默认值是 Session，意思是 cookie 会和 session 一起失效。 当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此 cookie 失效。
• Size 字段 此 cookie 大小。
• http 字段 cookie 的 httponly 属性。若此属性为 true，则只有在 http 请求头中会带有此 cookie 的信息，而不能通过 document.cookie 来访问此 cookie。、
• secure 字段 设置是否只能通过 https 来传递此条 cookie