前端零碎整理一浏览器HTTP

一、http和https
1)概念：http：超文本传输协议，是互联网应用最为广泛的一种协议，是一种客户端和服务器端请求和应答的标准（TCP）
https:是由HTTP协和ssl协议构成的可进行加密传输的和身份认证的网络协议。
2）https工作原理：

客户端使用https url访问服务器，则要求web服务器建立ssl链接。
web服务器端接收到请求后，会将网站证书（包含公钥）返回传输给客户端。
客户端和web服务器端开始协商ssl的链接也就是加密等级。
建立会话密钥，然后通过网站的公钥来加密会话密钥，并传输给网站。
web服务器通过自己的私钥解密出会话密钥。并通过会话密钥来加密与客服端的通信。

1. 客户端发起HTTPS请求
这个没什么好说的，就是用户在浏览器里输入一个https网址，然后连接到server的443端口。
2. 服务端的配置
采用HTTPS协议的服务器必须要有一套数字证书，可以自己制作，也可以向组织申请。区别就是自己颁发的证书需要客户端验证通过，才可以继续访问，而使用受信任的公司申请的证书则不会弹出提示页面(startssl就是个不错的选择，有1年的免费服务)。这套证书其实就是一对公钥和私钥。如果对公钥和私钥不太理解，可以想象成一把钥匙和一个锁头，只是全世界只有你一个人有这把钥匙，你可以把锁头给别人，别人可以用这个锁把重要的东西锁起来，然后发给你，因为只有你一个人有这把钥匙，所以只有你才能看到被这把锁锁起来的东西。
3. 传送证书
这个证书其实就是公钥，只是包含了很多信息，如证书的颁发机构，过期时间等等。
4. 客户端解析证书
这部分工作是有客户端的TLS来完成的，首先会验证公钥是否有效，比如颁发机构，过期时间等等，如果发现异常，则会弹出一个警告框，提示证书存在问题。如果证书没有问题，那么就生成一个随即值。然后用证书对该随机值进行加密。就好像上面说的，把随机值用锁头锁起来，这样除非有钥匙，不然看不到被锁住的内容。
5. 传送加密信息
这部分传送的是用证书加密后的随机值，目的就是让服务端得到这个随机值，以后客户端和服务端的通信就可以通过这个随机值来进行加密解密了。
6. 服务段解密信息
服务端用私钥解密后，得到了客户端传过来的随机值(私钥)，然后把内容通过该值进行对称加密。所谓对称加密就是，将信息和私钥通过某种算法混合在一起，这样除非知道私钥，不然无法获取内容，而正好客户端和服务端都知道这个私钥，所以只要加密算法够彪悍，私钥够复杂，数据就够安全。
7. 传输加密后的信息
这部分信息是服务段用私钥加密后的信息，可以在客户端被还原
8. 客户端解密信息
客户端用之前生成的私钥解密服务段传过来的信息，于是获取了解密后的内容。整个过程第三方即使监听到了数据，也束手无策。

3）https的优缺点：
优点：

使用https可认证用户和服务器，确保数据发送到正确的客户端和服务器。
https可防止数据在传输过程中不被窃取、改变、可以确保苏剧的完整性。
不是绝对安全，但更难攻击
缺点：
https握手阶段比较费时，页面加载延长50%，增加10%~20%的耗电。
https缓存不如http高，会增加数据开销。
ssl证书，功能也强大费用越高。
ssl证书需要绑定ip,不能在同一个ip上绑定多个域名，ipv4不支持这种消耗。

二、TCP和UDP：（计算机与网络设备相互通信的协议）
TCP：传输控制协议，面向链接（是指发送数据之前必须在两端建立连接）；提供可靠服务即通过TCP传输的数据无差错、不丢失、不重复、按顺序到达；面向字节流；只能一对一传输；TCP的首部较大为20字节。
UDP：用户数据报协议，无连接；尽最大努力交付，不保证可靠交付；面向报文，网络拥塞会出现丢包但发送率不会降低；支持一对多；首部只有8字节。
TCP三次握手：
C发起请求链接—>S确认、并发起请求连接—>C确认。

三、输入URL到浏览器显现给用户全过程（DNS解析-TCP连接-发送HTTP请求-处理请求并返回HTTP报文-浏览器渲染页面-链接结束）
1)用户输入URL，浏览器（应用层）获取URL。
2)浏览器进DNS解析（直接输入IP地址则跳过该步骤）。
3)浏览器根据解析出的IP地址和端口号，发起http请求，请求中携带请求头和请求体。
4)请求达到传输层，TCP协议为传输报文提供可靠的字节流传输服务。（它通过三次握手等手段来保证传输过程的安全可靠；通过对大块数据分割成一个个报文段的方式提供给大量数据的便携传输）
5)到网络层，网络通过ARP寻址得到接收方的Mac地址，IP协议把在传输层被分割的一个个数据包传送给接收方。
6)数据到达数据链路层，请求阶段完成
7)接收方在数据链路层接受到数据包之后，层层传递到应用层，接收方应用程序就得到请求报文。
8)接收方在收到发送方的http请求之后，进行请求文件资源（如HTML页面）的寻找并响应报文。
9)发送方收到响应报文后，如果报文中的状态码表示请求成功，则接受返回的资源（如HTML文件），进行页面渲染。

四、websocket
websocket是html5开始提供的一个在单个TCP链接上进行全双工通信的协议，指出持久连续，它使得客户端和服务器端的通信更加的简单，允许推送数据给C，在它的API中S和C只需要完成一次握手，便可创建永久性的链接，并可双向传输信息。

五、HTTP的请求方式option：返回服务器针对特定资源所支持的HTTP请求方法，也可以利用向web服务器发送‘*’的请求来测试服务器的功能性

六、几个很实用的BOM属性对象方法?
Bom是浏览器对象。有哪些常用的Bom属性呢？
(1)location对象
location.href-- 返回或设置当前文档的URL
location.search – 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu
location.hash – 返回URL#后面的内容，如果没有#，返回空
location.host – 返回URL中的域名部分，例如www.dreamdu.com
location.hostname – 返回URL中的主域名部分，例如dreamdu.com
location.pathname – 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port – 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
location.assign – 设置当前文档的URL
location.replace() – 设置当前文档的URL，并且在history对象的地址列表中移除这个URL location.replace(url);
location.reload() – 重载当前页面
(2)history对象
history.go() – 前进或后退指定的页面数 history.go(num);
history.back() – 后退一页
history.forward() – 前进一页
(3)Navigator对象
navigator.userAgent – 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled – 返回浏览器是否支持(启用)cookie

七、说一下HTML5 drag api
参考回答：
dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

八、说一下http2.0
提升访问速度（请求资源所需时间更少，访问速度更快，相比http1.0）
允许多路复用：允许同时通过单一的HTTP/2连接发送多重请求-响应信息，改善了在http1.1中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞。

二进制分帧：HTTP2.0会将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码
首部压缩：HTTP1.x的header带有大量信息，而且每次都要重复发送，HTTP2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，既避免了重复header的传输，又减小了需要传输的大小。
服务器端推送：同SPDY一样，HTTP2.0也具有server push功能。

九、cookie、sessionStorage、localStorage的区别
共同点：都是保存在浏览器端并且是同源的。
cookie：始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递；只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭；在所有同源窗口都是共享的；作用：保存用户登陆状态、设置cookie自己的过期时间、跟踪用户行为；存储容量小，4K。
sessionStorage:只在当前浏览器窗口中有效，窗口或浏览器关闭就会被清除，不会自动把数据发送给服务器，仅在本地保存；不在不同的浏览器窗口中共享；不参与和服务器的通信。
localStorage:始终有效，窗口或浏览器关闭也一直保存；在所有同源窗口都是共享的；不参与和服务器的通信。

十、Cookie和session的区别

都用来存储用户信息 cookie数据存放在客户端的浏览器上，session数据放在服务器上。
cookie不安全，别人可以分析存放在本地的cookie并进行cookie欺骗，一般用来存放不敏感的信息，考虑到安全应当使用session。
session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用cookie。
单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie
HTTP是一个无状态协议，因此Cookie的最大的作用就是存储sessionId用来唯一标识用户

十一、doctype
Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。
严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

十二、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 MultipleChoices 多种选择。请求的资源可包括多个位置相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择
301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303 See Other 查看其它地址。与301类似。使用GET和POST请求查看
304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源不需要全量数据***协商缓存（通过服务器里告知缓存是否可用）***
305 Use Proxy 使用代理。所请求的资源必须通过代理访问
306 Unused 已经被废弃的HTTP状态码
307 Temporary Redirect 临时重定向。与302类似。使用GET请求重定向
400 Bad Request 客户端请求的语法错误，服务器无法理解
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协议的版本，无法完成处理

十三、http常用请求头
协议头说明
Accept 可接受的响应内容类型（Content-Types）。
Accept-Charset 可接受的字符集
Accept-Encoding 可接受的响应内容的编码方式。
Accept-Language 可接受的响应内容语言列表。
Accept-Datetime 可接受的按照时间来表示的响应内容版本
Authorization 用于表示HTTP协议中需要认证资源的认证信息
Cache-Control 用来指定当前的请求/回复中的，是否使用缓存机制。
Connection 客户端（浏览器）想要优先使用的连接类型
Cookie 由之前服务器通过Set-Cookie（见下文）设置的一个HTTP协议Cookie
Content-Length 以8进制表示的请求体的长度
Content-MD5 请求体的内容的二进制 MD5 散列值（数字签名），以 Base64 编码的结果
Content-Type 请求体的MIME类型（用于POST和PUT请求中）
Date 发送该消息的日期和时间（以RFC 7231中定义的"HTTP日期"格式来发送）
Expect 表示客户端要求服务器做出特定的行为
From 发起此请求的用户的邮件地址
Host 表示服务器的域名以及服务器所监听的端口号。如果所请求的端口是对应的服务的标准端口（80），则端口号可以省略。
If-Match 仅当客户端提供的实体与服务器上对应的实体相匹配时，才进行对应的操作。主要用于像 PUT 这样的方法中，仅当从用户上次更新某个资源后，该资源未被修改的情况下，才更新该资源。
If-Modified-Since 允许在对应的资源未被修改的情况下返回304未修改
If-None-Match 允许在对应的内容未被修改的情况下返回304未修改（ 304 Not Modified ），参考超文本传输协议的实体标记
If-Range 如果该实体未被修改过，则向返回所缺少的那一个或多个部分。否则，返回整个新的实体
If-Unmodified-Since 仅当该实体自某个特定时间以来未被修改的情况下，才发送回应。
Max-Forwards 限制该消息可被代理及网关转发的次数。
Origin 发起一个针对跨域资源共享的请求（该请求要求服务器在响应中加入一个Access-Control-Allow-Origin的消息头，表示访问控制所允许的来源）。
Pragma 与具体的实现相关，这些字段可能在请求/回应链中的任何时候产生。
Proxy-Authorization 用于向代理进行认证的认证信息。
Range 表示请求某个实体的一部分，字节偏移以0开始。
Referer 表示浏览器所访问的前一个页面，可以认为是之前访问页面的链接将浏览器带到了当前页面。Referer其实是Referrer这个单词，但RFC制作标准时给拼错了，后来也就将错就错使用Referer了。
TE 浏览器预期接受的传输时的编码方式：可使用回应协议头Transfer-Encoding中的值（还可以使用"trailers"表示数据传输时的分块方式）用来表示浏览器希望在最后一个大小为0的块之后还接收到一些额外的字段。
User-Agent 浏览器的身份标识字符串
Upgrade 要求服务器升级到一个高版本协议。
Via 告诉服务器，这个请求是由哪些代理发出的。
Warning 一个一般性的警告，表示在实体内容体中可能存在错误。

十四、强缓存，协商缓存
参考回答：
缓存分为两种：强缓存和协商缓存，根据响应的header内容来决定。
强缓存，从缓存取， 200（from cache），不发送请求到服务器，直接从缓存取。
协商缓存，从缓存取， 304（not modified），发送请求到服务器，通过服务器来告知缓存是否可用。
强缓存相关字段有expires，cache-control。如果cache-control与expires同时存在的话，cache-control的优先级高于expires。
cache-control:常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。
协商缓存相关字段有Last-Modified/If-Modified-Since，Etag/If-None-Match
服务器上的资源更新了就是用更新的资源，没有更新就使用本地缓存。

十五、GET和POST的区别
get参数通过url传递，post放在request body中。
get请求在url中传递的参数是有长度限制的，而post没有。
get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。
get请求只能进行url编码，而post支持多种编码方式
get请求会浏览器主动cache，而post支持多种编码方式。
get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。
get和post本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
get产生一个TCP数据包；post产生两个TCP数据包。

十六、HTML5新增的元素和CSS3
首先html5为了更好的实践web语义化，增加了header，footer，nav,aside,section等语义化标签，在表单方面，为了增强表单，为input增加了color，emial,data ,range等类型，在存储方面，提供了sessionStorage，localStorage,和离线存储，通过这些存储方式方便数据在客户端的存储和获取，在多媒体方面规定了音频和视频元素audio和vedio，另外还有地理定位，canvas画布，拖放，多线程编程的web worker和websocket协议
CSS3边框如border-radius，box-shadow等；CSS3背景如background-size，background-origin等；CSS3 2D，3D转换如transform等；CSS3动画如animation等

十七、常见的HTTP的头部
可以将http首部分为通用首部，请求首部，响应首部，实体首部。通用首部表示一些通用信息，比如date表示报文创建时间；
请求首部：请求报文中独有的如cookie，缓存相关的if-Modified-Since。
响应首部：响应报文中独有的如set-cookie、重定向相关的location。
实体首部用来描述实体部分，如allow用来描述可执行的请求方法，content-type描述主题类型，content-Encoding描述主体的编码方式

iframe
cookie如何防范XSS攻击
restful
viewport 和移动端布局
一个图片url后直接下载
webQuality（无障碍)
webworker

前端零碎整理一浏览器HTTP相关推荐

2018前端常见问题整理
$HTML, HTTP,web综合问题 1.前端需要注意哪些SEO 合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要 ...
2022前端知识整理：十、vue基础
十.vue基础 2022前端知识整理:第十部分.vue基础,仅包含vue2.0相关知识,建议先完成html5.css3和JavaScript ES6之后再学习.部分图片未上传成功,稍后完善,请见谅. ...
Vue初级前端面试整理
Vue初级前端面试整理目录: v-show与v-if的区别 v-model是什么,原理对Vue虚拟DOM的理解方法调用,computed(计算),watch(监听)的区别什么是生命周期钩子函数 ...
html5中检测网络状态的方法,前端js监听浏览器网络变化
首先,为什么要让前端判断用户的网络状态呢--为了更好的用户体验. 其次,前端能否判断网络状态?有哪些方法? 1,可以做到渐进式判断,不能做到绝对准确. 2,使用的是navigator.onLine或n ...
（附源码）springboot电商系统前端界面设计与浏览器兼容性研究毕业设计 231058
基于springboot电商系统前端界面设计摘要随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势:对于电商系统前端界面设计与浏览器兼容性研究当然也不能排除 ...
spring boot电商系统前端界面设计与浏览器兼容性研究毕业设计-附源码231058
摘要随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势:对于电商系统前端界面设计与浏览器兼容性研究当然也不能排除在外,随着网络技术的不断成熟,带动了电商系统前 ...
html前端小教程—各浏览器兼容视频插入方法
今天分享下"html前端小教程-各浏览器兼容视频插入方法"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark ...
2020最全前端面试系列（浏览器原理）（最容易忽视的面试隐藏大杀器）
2020前端面试系列(浏览器原理) 浏览器输入URL到返回页面的全过程浏览器渲染步骤重排和重绘触发reflow情形减少reflow方法浏览器本地存储方案的比较 cookie localSto ...
写了这么久前端，你知道浏览器原理吗？
最近发现了一篇不错的文章,分享给大家,对于写了很久前端代码但不了解浏览器原理的朋友应该有很大帮助. 这是一篇全面介绍 Webkit 和 Gecko 内部操作的入门文章,是以色列开发人员塔利·加希尔大量 ...

前端零碎整理一浏览器HTTP

前端零碎整理一浏览器HTTP相关推荐

最新文章

热门文章

前端零碎整理一 浏览器HTTP

前端零碎整理一 浏览器HTTP相关推荐

最新文章

热门文章

前端零碎整理一浏览器HTTP

前端零碎整理一浏览器HTTP相关推荐