挑战前端知识点 HTTP/ECMAScript
哪吒人生信条:如果你所学的东西 处于喜欢 才会有强大的动力支撑。
每天学习编程,让你离梦想更新一步,感谢不负每一份热爱编程的程序员,不论知识点多么奇葩,和我一起,让那一颗像四处流荡的心定下来,一直走下去,加油,2021
加油!欢迎关注,欢迎点赞、收藏和评论
不要害怕做梦,但是呢,也不要光做梦,要做一个实干家,而不是空谈家,求真力行。
前言
希望可以通过这篇文章,能够给你得到帮助。(感谢一键三连),接收好挑战了吗?
关于 HTTP 模块
1.说说你对 HTTP 和 HTTPS 的理解,并说一下它们的端口号是什么
好的,HTTP 是超文本传输协议,是一个基于请求与响应,无状态的,应用层的协议,常基于 TCP/IP 协议传输数据,互联网上应用最为广泛的一种网络协议,所有的www
文件都必须遵守这个标准,设计HTTP
的初衷是为了提供一种发布和接收HTML
页面的方法。
HTTP
是一种广泛使用的网络传输协议,是客户端浏览器或其他程序与 web 服务器之间的应用层通信协议或者标准 tcp,用于从 www 服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。
那么HTTPS
,它是一种通过计算机网络进行完全通信的传输协议,经过HTTP
进行通信,利用SSL/TLS
建立通信,加密数据包。HTTPS
使用的主要目的是提供对网站服务器的身份认证,同时保护交换数据的隐私与完整性。
https 是 http 的加密版,是以安全为目标的 http,在http中加入ssl,安全基础是ssl。
TLS
是传输层加密协议,前身是SSL
协议。
HTTP
通常承载于TCP
之上,在HTTTP
和TCP
之间添加一个安全协议层(SSL
或TSL
),就是我们常说的HTTPS
。
HTTP 特点:
支持客户端或服务器模式,C/S 模式;
简单快速,客户端向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET,HEAD,POST
,每种方法规定了客户与服务器联系的类型不同,由于 HTTP 协议简单,使得 HTTP 服务器的程序规模小,因而通信速度很快;
比较灵活,HTTP 允许传输任意类型的数据对象,正在传输的类型由Content-Type
加以标记;
无连接,表示限制每次连接只处理一个请求,服务器处理完客户端的请求,并收到客户端的应答后,就断开连接,采用这种方式可以节省传输时间;
无状态,HTTP
协议是无状态的协议,无状态表示协议对于事务处理是没有记忆能力的,缺少状态意味着如果后续处理需要前面的信息,则它就必须重传,这样可能导致每次连接传送的数据量不断增加,另一方面,在服务器不需要先前信息时它的应答就比较快。
HTTPS
特点
它是采用混合加密技术,中间者是无法看到明文内容,对内容加密过;
又对身份进行验证,通过证书认证客户端访问的是自己的服务器;
可以防止传输的内容被中间人冒充或者篡改,保户了数据的完整性。
HTTP
的URL
是以http://
开头,对于HTTPS
的URL
是以https://
开头;HTTP
是不安全的,而HTTPS
是安全的;HTTP
无法加密,而HTTPS
对传输的数据进行加密;HTTP
无需证书,而HTTPS
需要CA
机构的颁发的SSL
证书。
它们的端口号分别是:
HTTP
默认的端口号为80
,HTTPS
默认的端口号为443
那么HTTPS
更加安全的因为是:在网络请求中,需要很多服务器,路由器的转发。其中的节点都可能篡改信息,而如果使用 HTTPS,密钥在终点站才有。HTTPS 之所以比 HTTP 安全,是因为它利用ssl/tls
协议传输。它包含证书,卸载,流量转发,负载均衡,页面适配,浏览器适配,refer 传递等技术,保障了传输过程的安全性。
https
,全称Hyper Text Transfer Protocol Secure
,相比http
,多一个secure
,这一个secure
是由 TLS(ssl)提供的。https
和http
都属于application layer
,基于tcp
以及udp
协议,但是又完全不一样。
http 是客户端和服务器端之间数据传输的格式规范,表示“超文本传输协议”
小结
无状态协议对于事务没有记忆能力,缺少状态表示如果后续需要处理,需要前面提供的信息
克服无状态协议缺陷的办法是通过
cookie
和会话保存信息
2.http/2 你了解多少
HTTP/2
引入了“服务器端推送”的概念,它允许服务器端在客户端需要数据之前主动将数据发送到客户端缓存中,从而提高性能。
HTTP/2
提供更多的加密支持。使用多路技术,允许多个消息再一个连接上同时交差。增加了头压缩,因此请求非常小,请求和响应的header
都只会用很小的带宽比例。
http/2
协议是基于https
的,所以http/2
的安全性也是有保障的。
头部压缩:http/2
会压缩头,如果你同时发出多个请求,他们的头是一样的或是相似的,那么,协议会帮你消除重复的部分。
对于http/2
不再使用像http/1.1
里的纯文本形式的报文,而是采用了二进制格式。头信息和数据体都是二进制,统称为帧,头信息帧和数据帧。
数据流:http/2
的数据包不是按顺序发送的,同一个连接里面连续的数据包,可能属于不同的回应,必须要对数据包做标记,指出它属于哪个回应。每个请求或回应的所有数据包,称为一个数据流。
多路复用:http/2
是可以在一个连接中并发多个请求或回应,而不用按照顺序一一对应,解决了http/1.1
中的串行请求,不需要排队等待,也就不会出现队头阻塞问题,降低了延迟,大幅度提高了连接的利用率。
服务器推送,http/2
改善了传送的请求-应答工作模式,服务端不再是被动响应,也可以自动向客户端发送信息了。
http2
问题出现在,多个http
请求在复用一个tcp
连接,下层的tcp
协议是不知道有多少个http
请求的,一旦发生丢包现象,会触发tcp
的重传机制,这样一个tcp
连接中的所有的http
请求都必须等待这个丢了的包被重传回来。
第一,http/1.1
中的管道传输中如果有一个请求阻塞了,那么队列后请求也统统被阻塞了。第二,http/2
多请求复用一个tcp
连接,一旦发生丢包,就会阻塞所有的http
请求。
3.说说 http 常见的状态码
五大类的 http 状态码:
1xx
: 提示信息,表示目前是协议处理的中间状态,后续还有操作
2xx
: 成功,报文已经收到并被正确处理,200, 204, 206
3xx
: 重定向,资源位置发生变动,需要客户端重新发送请求
4xx
: 客户端错误,请求报文有误,服务器无法处理
5xx
:服务器错误,服务器在处理请求时内部发生了错误
100 Continue
表示继续,一般在发送 post 请求时,已经发送了 http header 之后,服务器端将返回此信息,表示确认,之后发送具体参数信息。
200 ok
表示正常返回信息。
201 Created
表示请求成功并且服务器创建了新的资源
202 Accepted
表示服务器已经接受请求,但尚未处理
301 Moved Permanently
表示请求的网页已永久移动到新位置
302 Found
表示临时性重定向
303 See Other
表示临时性重定向,且总是使用GET
请求新的URI
304 Not Modified
表示自从上次请求后,请求的网页伪修改过
400 Bad Request
表示服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发送请求。
401 Unauthorized
表示请求未授权
403 Forbidden
表示禁止访问
404 Not Found
表示找不到如何与 uri 相匹配的资源
500 Internal Server Error
表示最常见的服务器端错误
503 Service Unavailable
表示服务器端暂时无法处理请求
4.说说 http 事务流程
第一步,域名的解析;第二步,发起tcp
的三次握手;第三步,建立tcp
连接后发起HTTP
请求;第四步,服务器端响应HTTP
请求,浏览器得到HTML
代码;第五步,浏览器解析HTML
代码,并请求HTML
代码中的资源;第六步,浏览器对页面进行渲染并呈现给用户。
5.手写简单的 HTTP 服务器
6.说说 http 的请求报文和响应报文包含哪些部分
请求报文包含三部分:
1.请求行,包含请求方法,URI,HTTP
版本信息
2.请求首部字段
3.请求内容实体
请求报文包含三部分:
1.状态行,包含HTTP
版本,状态码,状态码的原因短语
响应首部字段
响应内容实体
7. 什么是反向代理
反向代理,Reverse Proxy
,是指通过代理服务器来接收互联网上的连接请求,然后将请求转发给内部网络上的服务器,并把从服务器上得到的结果返回给互联网上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。
8.HTTP 中有哪些请求方式
GET
,请求访问已经被 uri,统一资源标识符识别的资源,可以通过 url,给服务器传递参数数据
POST
,传输信息给服务器,主要功能与 GET 方法类似,但传递的数据量通常不受限制。
PUT
,传输文件,报文主体中包含文件内容,保存到对应的 URI 位置。
HEAD
,获得报文首部,与 GET 方法类似,只是不返回报文主体,一般用于验证 URI 是否有效。
DELETE
,删除文件,与 PUT 方法相反,产生对应 URI 位置的文件
OPTIONS
,查询相应 URI 支持的 HTTP 方法
9.HTTP 协议中 1.0 版本规范与 1.1 版本规范的区别
在http1.0
中,当建立连接后,客户端发送一个请求,服务器端返回一个信息后就关闭连接,当浏览器下次请求的时候又要建立连接,这种不断建立连接的方法会造成很多问题。
在http1.1
中,引入了连续连接的概念,通过这种连接,浏览器可以在建立一个连接之后,发送请求并得到返回信息,然后继续发送请求再次等到返回信息。客户端可以连续发送多个请求,而不用等待每一个响应的到来。
10.HTTP 的首部字段包括哪些类型
通用首部字段,请求报文和响应报文都会使用的首部字段
Date
,创建报文的时间Connection
,连接的管理Cache-Control
,缓存的控制Transfer-Encoding
,报文主体的传输编码方式
请求首部字段,请求报文会使用的首部字段
Host
,请求资源所在服务器Accept
,可处理的媒体类型Accept-Charset
,可接受的字符集Accept-Encoding
,可接受的内容编码Accept-Language
:可接受的自然语言
响应首部字段,响应报文会使用的首部字段
Accept-Ranges
,可接受的字节范围Location
,令客户端重新定向到 URIServer
,HTTP 服务器的安装信息
实体首部字段,请求报文与响应报文的实体部分使用的首部字段
Allow
,资源可支持的 http 方法Content-Type
,实体主体的类型Content-Encoding
,实体主体使用的编码方式Content-Language
,实体主体的自然语言Content-Length
,实体主体的字节数Content-Range
,实体主体的位置范围,一般用于发出部分请求时使用
11.与 https 相比,http 有什么缺点
http
的缺点是:通信使用明文,不加密,内容可能被窃听,也就是被抓包分析;不验证通信方身份,可能遭到伪装;无法验证报文完整性,可能性篡改。
https
就是http+加密处理+认证+完整性保护
12.如何优化 HTTP 请求
利用负载均衡优化和加速HTTP
应用请求,利用HTTP
缓存来优化网站请求
13.HTTP 协议有哪些特征
支持客户端或服务器模式,简单快捷,灵活,无连接,无状态。
14.HTTP1.1 版本的新特性
默认持久连接,节省通信量,只要客户端或服务端中任意一端没有明确指出断开TCP
连接,就一直保持连接,可以多次发送HTTP
请求。
管线化,客户端可以同时发出多个HTTP
请求,而不用一个个等待响应。
断点续传原理。
15.tcp 传输的三次握手,四次挥手
三次握手,用 tcp 把数据包发送出去后,tcp
不会对传送后的数据置之不理,它一定会向对方确认是否成功送达。握手过程中使用了 tcp 的标志,既是 SYN 和 ACK
发送端首先给接收端发送一个带SYN
标志的数据包。接收端收到后,回传一个带有SYN/ACK
标志的数据包以表示正确传达,并确认信息。最后,发送端再回传一个带ACK
标志的数据包,代表“握手”结束。若在握手过程中的某个阶段莫名中断,TCP
会再次以相同的顺序发送相同的数据包。
断开一个TCP
连接则需要“四次握手”
第一次握手:主动关闭方发送一个 FIN,用来关闭主动关闭方到被动关闭方的数据传送,也就是主动关闭方告诉被动关闭方,主动关闭方已经不会再给被动关闭方发送数据了,但是,此时主动关闭方还可以接收数据。
第二次握手:被动关闭方收到FIN包后
,给对方发送一个ACK
,确认序号为收到序号+1,与SYN相同
,一个FIN
占用一个序号。
第三次握手:被动关闭方收到FIN
包后,用来关闭被动关闭方到主动关闭方的数据传送,也就是告诉主动关闭方,被动关闭方的数据也发送完了,不会再给主动关闭方发送数据了。
第四次握手:主动关闭方收到 FIN 后,给被动关闭方发送一个ACK
,确认序号为收到序号+1
。
16.说说 tcp 和 udp 的区别
tcp
传输控制协议,是基于连接的协议,也就是说,在正式收发数据前,必须和对方建立可靠的连接。一个tcp
连接必须要经过三次对话才能建立起来。
udp
用户数据报协议,是与 tcp 相对应的协议。它是面向非连接的协议,它不与对方建立连接,而是直接就把数据包发送过去。udp
适用于一次只传送少量数据,对可靠性要求不高的应用环境。
17.一个页面从输入 url 到页面加载显示完成的过程发送什么
当发送一个url
请求时,这个url是web
页面的 url 还是 web 页面上每个资源的url
,浏览器都会开启一个线程来处理这个请求,同时在远程 dns 服务器上启动一个 dns 查询,这能使浏览器获得请求对应的 Ip 地址。
浏览器与远程web
服务器通过tcp
三次握手协商来建立一个tcp/ip
连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这个 3 个报文在浏览器和服务器之间传递,该握手首先由客户端尝试建立起通信,然后服务器应答并接受客户端的请求,最后由客户端发出已经接受该请求的报文。
一旦tcp/ip
连接建立,浏览器会通过该连接向远程服务器发送HTTP的GET请求
,远程服务器找到资源并使用 HTTP 响应返回该资源,值为 200 的 HTTP 响应状态码表示一个正确的响应。
web 服务器提供资源服务,客户端开始下载资源,请求返回后,便进入了浏览器模块,浏览器会解析HTML生成DOM Tree
,其次会根据CSS生成CSS规则树
,而javascript又可以根据DOM API操作DOM
。
18.网络分层模型有哪个七层
应用层:允许访问 OSI 环境的手段
表示层:对数据进行翻译,加密和压缩
会话层:建立,管理和终止会话
传输层:提供端到端的可靠报文传递和错误恢复
网络层:负责数据包从源到宿的传递和网际互联
数据链路层:将比特组装成帧并实现点到点的传递
物理层:通过媒介传输比特,确定机械以及电气规范
19.说说 304 缓存的原理
服务器首先为请求生成ETag
,服务器可在稍后的请求中,使用它来判断页面是否已经修改,本质上,客户端通过将该记号传回服务器要求服务器验证其客户端是否缓存。
304 是HTTP
状态码,服务器用它来标识这个文件没有修改,不返回内容,浏览器在接收到个状态码后,会使用浏览器已缓存的文件。
客户端请求页面 A,服务器返回页面 A,并给 A 加上一个 ETag,客户端展现该页面,并将页面连同 ETag 一起缓存,客户端再次请求页面 A,并将上次请求时服务器返回的 ETag 一起传递给服务器。服务器检查该 ETag,并判断出该页面自上次客户端请求之后还未被修改,直接返回响应 304 和一个空的响应体。
es 模块
20.总结严格模式的限制
变量必须声明后再使用
函数的参数不能有同名参数,否则报错
不能使用
with
语句不能对只读属性赋值,否则报错
不能使用八进制数,否则报错
不能使用特殊字符
不能使用
delete
删除变量,方法等,只能用delete
删除对象的属性eval
不会在它的外层作用域引入变量eval和arguments
不能被重新赋值arguments
不会自动反映函数参数的变化不能使用
arguments.callee
不能使用
arguments.caller
禁止
this
指向全局对象不能使用
fn.caller和fn.arguments
获取函数调用的栈增加了保留字
21.说说 es6
新增了模板字符串
${}
箭头函数
for-of
获取剩余参数语法代替
arguments
对象定义默认参数语法
es6
将Promise
对象纳入规范,提供了原生的Promise
对象增加了
let
关键字以定义块作用域的变量增加了
const
以定义常量增加了
Symbol
数据类型引入
module
模块的概念
22.Promise 有哪些特点
es6
原生提供了Promise
对象,它是用来处理异步操作的。
Promise
对象特点:
对象的状态不受外界影响,Promise对象有三个状态:Pending,进行中,Resolved,已完成,Rejected,已失败
,只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
一旦状态改变,就不会再改变,任何时候都可以得到这个结果。Promise对象的改变,只有两种可能,从Pending变为Resolved和从Pending变为Rejected
。只有这两种情况,状态就固定了,会一直保持这个结果,不会再变了。
即使对Promise
对象添加回调函数,也会立即得到这个结果,这与事件完全不同,事件的特点是,如果你错过了它,再去监听,也无法得到结果。
有了Promise
对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套到的回调函数,此外,Promise
对象提供统一的接口,使得控制异步操作更加容易。
缺点:无法取消Promise
,一旦新建,它就会立即执行,无法中途取消,如果不设置回调函数,Promise
内部抛出的错误不会反映到外部。
23.说说 Promise 的理解
三种状态:
Pending
指初始状态,非Fulfilled
或Rejected
状态
Resolved
指成功的操作
Rejected
是指失败的操作
24.es6 实现数组去重
25.es6 使用进行两个数的交换
26.为啥使用 es6
第一:符合未来趋势;第二:提高开发效率;第三:减少代码量,提高可读性等。
27.如何让开发环境下的浏览器支持 es6
使用babel
编译
28.es6 中 let 关键字支持块级作用域吗
let
为JavaScript
新增了块级作用域,用它声明的变量只在let
关键字所在的代码块内有效。
29.代码示例
30.super 是什么
它是一个关键字,用法为super(...)
或者super.xx(...)
super
的语法定义和this
不同,this
的定义是this
这个关键字会被替换成一个引用,而super
则是super(...)
会被替换成一个调用。除了可以在constructor
里被直接调用super
外,还可以使用super.xx(...)
来调用父类上的某个原型方法,这同样是一种限定语法。
31.代码示例
32.代码示例
33.代码示例
34.代码示例
35.代码示例
36.什么是 DOM 模板
dom
模板是原先就写在页面上的并且能被浏览器识别的html
结果,在加载的时候,就会被浏览器渲染。所以要遵循HTML
结构和标签命名,不然无法被浏览器解析,也就无法获取内容了,然后用JavaScript
获取DOM
节点的内容,就形成了DOM
模板。
37.什么是字符串模板
字符串模板可能原先放在服务器上的script
标签里,作为JavaScript
字符串,并且不参与页面渲染,所以它可能不在乎HTML
结构和标签命名,只要最后根据模板生成对应的结构并且命名符合HTML
规范。
38.请说出扩展运算符与剩余操作符之间的区别
在某种程度上,剩余操作符和扩展运算符相反。扩展运算符会使数组“展开”成多个元素,剩余操作符会收集多个元素并“压缩”成一个单一的元素。
39.var,let,const 声明变量的区别
var
声明的变量不支持块作用域,支持声明前置,可以重复定义,并且值可以改动。
let
声明的变量支持块作用域,不支持声明前置,不能重复定义,并且值可以修改。
const
定义常量,声明的常量支持作用域,不支持声明前置,不能重复定义,值无法修改,值通常是值类型的,不能用来定义循环变量。
40.解构分类
对象解构;数组解构;混合解构;参数解构。
41.es6 的 extends 支持多重继承吗
es6
不支持多重继承,但是可以通过混合等技术来模拟,一旦使用多重继承,则按声明先后顺序覆盖同名属性方法。
42.剩余参数和 arguments 对象的区别
剩余参数只包含那些没有对应形参的实参,而arguments
对象包含了传给函数的所有实参。
arguments
对象不是一个真实的数组,而剩余参数是真实的Array
实例,能够在它上面直接使用所有的数组方法。
arguments
对象还有一些附加的属性。
如果想在arguments
对象上使用数组方法,首先要将它转换为真实的数组。
43.for..of 有点是啥
有着同for...in
的简洁语法,但是没有for...in
的缺点
不同于forEach
方法,可以与break,continue,return
配合使用
提供了遍历所有数据结构的统一操作接口
44.为什么修饰器不能用于函数
修饰器只能用于类和类的方法,不能用于函数,因为存在函数提升
45.Iterator 接口的目的是啥
为所有数据结构提供了一种统一的访问机制,for..of
循环
当使用for...of
循环遍历某种数据结构时,该循环会自动寻找Iterator
接口.
46.使用外部的模块脚本需要注意哪几点
代码在模块作用域中进行,而不是在全局作用域中运行,模块内部的顶层变量,在外部不可见。
无论有没有声明use strict
,模块脚本都自动采用严格模式
在模块中,可以使用import
命令加载其他模块,也可以使用export
命令输出对外接口
在模块中,顶层的this
关键字返回undefined
,而不是指向window
,也就是说在模块顶层使用this
,是无意义的。
同一个模块如果加载多次,将只执行一次。
47.Iterator 的作用和遍历过程
第一,为各种数据结构提供一个统一的,简便的访问接口
第二,使得数据结构的成员能够按某种次序排序
第三,ES6
创造了一种新的遍历命令for...of
循环,Iterator 接口主要提供for...of
使用
过程:
创建一个指针对象,指向当前数据结构的起始位置,也就是说,遍历器对象本质上就是一个指针对象。
第一次调用指针对象的next
方法,可以将指针指向数据结构的第一个成员
第二次调用指针对象的next
方法,指针指向数据结构的第二个成员
不断调用指针对象的next
方法,直到它指向数组结构的结束位置。每一次调用next
方法,都会返回数据结构中当前成员的信息。
48.async 函数有几种声明形式
函数声明
表达式声明
通过对象声明
通过箭头函数声明
49.async 函数中,如何处理错误语句
try...catch
添加catch
回调函数
50.es6 中,generator 函数的 throw 方法如何使用
throw()
会恢复generator
的执行,且在执行点上抛出异常
throw()
跟next()
一样会返回{value,done}
,只会抛出的异常得到处理了,generator
函数体才会真正执行throw()
。
面向 JavaScript 爱好人员提供:Web 前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular 等一系列教程和经验分享。
点赞、收藏和评论
我是Jeskson
(达达前端),感谢各位人才的:点赞、收藏和评论,我们下期见!(如本文内容有地方讲解有误,欢迎指出☞谢谢,一起学习了)
我们下期见!
文章持续更新,可以微信搜一搜「 程序员哆啦 A 梦 」第一时间阅读,回复【资料】有我准备的一线大厂资料,本文 http://www.dadaqianduan.cn/#/ 已经收录
github
收录,欢迎Star
:https://github.com/webVueBlog/WebFamily
版权声明: 本文为 InfoQ 作者【魔王哪吒】的原创文章。
原文链接:【http://xie.infoq.cn/article/db23031bf59ea888375708ae4】。未经作者许可,禁止转载。
评论