前端口试总结 :http、html和欣赏器篇

梦雨倾寒

作者：forthealllight

http://github.com/forthealllight/blog/issues/19

1.http和https


https的SSL加密是在传输层实现的。


(1)http和https的根本概念


http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端哀求和应答的尺度（TCP），用于从WWW服务器传输超文本到当地欣赏器的传输协议，它可以使欣赏器更加高效，使网络传输淘汰。


https: 是以安全为目的的HTTP通道，简朴讲是HTTP的安全版，即HTTP下参加SSL层，HTTPS的安全底子是SSL，因此加密的具体内容就必要SSL。


https协议的重要作用是：创建一个信息安全通道，来确保数组的传输，确保网站的真实性。


(2)http和https的区别？


http传输的数据都是未加密的，也就是明文的，网景公司设置了SSL协议来对http协议传输的数据举行加密处置惩罚，简朴来说https协议是由http和ssl协议构建的可举行加密传输和身份认证的网络协议，比http协议的安全性更高。
重要的区别如下：

• Https协议必要ca证书，费用较高。
  
• http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
  
• 利用差别的链接方式，端口也差别，一样平常而言，http协议的端口为80，https的端口为443
  
• http的毗连很简朴，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可举行加密传输、身份认证的网络协议，比http协议安全。
  

(3)https协议的工作原理


客户端在利用HTTPS方式与Web服务器通讯时有以下几个步调，如图所示。

• 客户利用https url访问服务器，则要求web 服务器创建ssl链接。
  
• web服务器吸收到客户端的哀求之后，会将网站的证书（证书中包罗了公钥），返回大概说传输给客户端。
  
• 客户端和web服务器端开始协商SSL链接的安全品级，也就是加密品级。
  
• 客户端欣赏器通过两边协商同等的安全品级，创建会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。
  
• web服务器通过本身的私钥解密出会话密钥。
  
• web服务器通过会话密钥加密与客户端之间的通讯。
  

(4)https协议的长处

• 利用HTTPS协议可认证用户和服务器，确保数据发送到精确的客户机和服务器；
  
• HTTPS协议是由SSL+HTTP协议构建的可举行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被盗取、改变，确保数据的完备性。
  
• HTTPS是现行架构下最安全的办理方案，固然不是绝对安全，但它大幅增长了中心人攻击的本钱。
  
• 谷歌曾在2014年8月份调解搜刮引擎算法，并称“比起划一HTTP网站，接纳HTTPS加密的网站在搜刮效果中的排名将会更高”。
  

(5)https协议的缺点

• https握手阶段比力费时，会使页面加载时间延伸50%，增长10%~20%的耗电。
  
• https缓存不如http高效，会增长数据开销。
  
• SSL证书也必要钱，功能越强盛的证书费用越高。
  
• SSL证书必要绑定IP，不能再同一个ip上绑定多个域名，ipv4资源支持不了这种斲丧。
  

2.tcp三次握手，一句话概括


客户端和服务端都必要直到各自可收发，因此必要三次握手。


简化三次握手：





从图片可以得到三次握手可以简化为：C发起哀求毗连S确认，也发起毗连C确认我们再看看每次握手的作用：第一次握手：S只可以确认 本身可以担当C发送的报文段第二次握手：C可以确认 S收到了本身发送的报文段，而且可以确认 本身可以担当S发送的报文段第三次握手：S可以确认 C收到了本身发送的报文段


3.TCP和UDP的区别


（1）TCP是面向毗连的，udp是无毗连的即发送数据前不必要先创建链接。
（2）TCP提供可靠的服务。也就是说，通过TCP毗连传送的数据，无不对，不丢失，不重复，且按序到达;UDP尽最大积极交付，即不包管可靠交付。 而且由于tcp可靠，面向毗连，不会丢失数据因此得当大数据量的互换。
（3）TCP是面向字节省，UDP面向报文，而且网络出现拥塞不会使得发送速率低落（因此会出现丢包，对及时的应用好比IP电话和视频集会等）。
（4）TCP只能是1对1的，UDP支持1对1,1对多。
（5）TCP的首部较大为20字节，而UDP只有8字节。
（6）TCP是面向毗连的可靠性传输，而UDP是不可靠的。


4.WebSocket的实现和应用


(1)什么是WebSocket?


WebSocket是HTML5中的协议，支持长期一连，http协议不支持长期性毗连。Http1.0和HTTP1.1都不支持长期性的链接，HTTP1.1中的keep-alive，将多个http哀求归并为1个


(2)WebSocket是什么样的协议，详细有什么长处？

• HTTP的生命周期通过Request来界定，也就是Request一个Response，那么在Http1.0协议中，这次Http哀求就竣事了。在Http1.1中举行了改进，是的有一个connection：Keep-alive，也就是说，在一个Http毗连中，可以发送多个Request，吸收多个Response。但是必须记着，在Http中一个Request只能对应有一个Response，而且这个Response是被动的，不能自动发起。
  
• WebSocket是基于Http协议的，大概说借用了Http协议来完成一部门握手，在握手阶段与Http是雷同的。我们来看一个websocket握手协议的实现，根本是2个属性，upgrade，connection。
  

根本哀求如下：



GET /chat HTTP/https://www.hlshell.com/source/plugin/csdn123_news/display_picture.php?url=%3Cspan+class%3D"" style="max-width: 100%;box-sizing: border-box !important;word-wrap: inherit !important;word-break: inherit !important;">1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: https://www.hlshell.com/source/plugin/csdn123_news/display_picture.php?url=%3Cspan+class%3D"" style="max-width: 100%;box-sizing: border-box !important;word-wrap: inherit !important;word-break: inherit !important;">13
Origin: http:https://www.hlshell.com/source/plugin/csdn123_news/display_picture.php?url=%3Cspan+class%3D"" style="max-width: 100%;color: rgb(117, 113, 94);box-sizing: border-box !important;word-wrap: inherit !important;word-break: inherit !important;">//example.com




多了下面2个属性：



Upgrade:webSocket
Connection:Upgrade
告诉服务器发送的是websocket
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: https://www.hlshell.com/source/plugin/csdn123_news/display_picture.php?url=%3Cspan+class%3D"" style="max-width: 100%;box-sizing: border-box !important;word-wrap: inherit !important;word-break: inherit !important;">13


5.HTTP哀求的方式，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属性：


"person.jpg"  alt=https://www.hlshell.com/source/plugin/csdn123_news/display_picture.php?url=%3Cspan+class%3D"" style="max-width: 100%;color: rgb(166, 226, 46);box-sizing: border-box !important;word-wrap: inherit !important;word-break: inherit !important;">"this is a person"/>


有时间欣赏器会无法表现图像。详细的缘故原由有：

• 用户关闭了图像表现
  
• 欣赏器是不支持图形表现的迷你欣赏器
  
• 欣赏器是语音欣赏器（供瞽者和弱视人群利用）
  
• 假如您利用了 alt 属性，那么欣赏器至少可以表现或读出有关图像的形貌。
  

8.几个很实用的BOM属性对象方法?


什么是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.protocol -- 返回URL中的协议部门。比方 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
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


9.HTML5 drag api

• dragstart：变乱主体是被拖放元素，在开始拖放被拖放元素时触发，。
  
• darg：变乱主体是被拖放元素，在正在拖放被拖放元素时触发。
  
• dragenter：变乱主体是目的元素，在被拖放元素进入某元素时触发。
  
• dragover：变乱主体是目的元素，在被拖放在某元素内移动时触发。
  
• dragleave：变乱主体是目的元素，在被拖放元素移出目的元素是触发。
  
• drop：变乱主体是目的元素，在目的元素完全担当被拖放元素时触发。
  
• dragend：变乱主体是被拖放元素，在整个拖放操纵竣事时触发
  

10.http2.0


起首增补一下，http和https的区别，相比于http,https是基于ssl加密的http协议
扼要概括：http2.0是基于1999年发布的http1.0之后的初次更新。

• 提拔访问速率（可以对于，哀求资源所需时间更少，访问速率更快，相比http1.0）
  
• 允很多路复用：多路复用答应同时通过单一的HTTP/2毗连发送多重哀求-相应信息。改善了：在http1.1中，欣赏器客户端在同一时间，针对同一域名下的哀求有一定命量限定（毗连数目），凌驾限定会被壅闭。
  
• 二进制分帧：HTTP2.0会将全部的传输信息分割为更小的信息大概帧，并对他们举行二进制编码
  
• 首部压缩
  
• 服务器端推送
  

11.增补400和401、403状态码


(1)400状态码：哀求无效


产生缘故原由：

• 前端提交数据的字段名称和字段范例与背景的实体没有保持同等
  
• 前端提交到背景的数据应该是json字符串范例，但是前端没有将对象JSON.stringify转化成字符串。
  

办理方法：

• 对照字段的名称，保持同等性
  
• 将obj对象通过JSON.stringify实现序列化
  

(2)401状态码：当前哀求必要用户验证
(3)403状态码：服务器已经得到哀求，但是拒绝实行


12.fetch发送2次哀求的缘故原由


fetch发送post哀求的时间，总是发送2次，第一次状态码是204，第二次才乐成？


缘故原由很简朴，由于你用fetch的post哀求的时间，导致fetch 第一次发送了一个Options哀求，扣问服务器是否支持修改的哀求头，假如服务器支持，则在第二次中发送真正的哀求。


13.Cookie、sessionStorage、localStorage的区别


共同点：都是生存在欣赏器端，而且是同源的

• Cookie：cookie数据始终在同源的http哀求中携带（纵然不必要），即cookie在欣赏器和服务器间往返通报。而sessionStorage和localStorage不会主动把数据发给服务器，仅在当地生存。cookie数据另有路径（path）的概念，可以限定cookie只属于某个路径下,存储的巨细很小只有4K左右。 （key：可以在欣赏器和服务器端往返通报，存储容量小，只有约莫4K左右）
  
• sessionStorage：仅在当前欣赏器窗口关闭前有用，天然也就不大概长期保持，localStorage：始终有用，窗口或欣赏器关闭也不停生存，因此用作长期数据；cookie只在设置的cookie逾期时间之前不停有用，纵然窗口或欣赏器关闭。（key：自己就是一个回话过程，关闭欣赏器后消散，session为一个回话，当页面差别纵然是同一页面打开两次，也被视为同一次回话）
  
• localStorage：localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。（key：同源窗口都会共享，而且不会失效，不管窗口大概欣赏器关闭与否都会始终见效）
  

增补阐明一下cookie的作用：

• 生存用户登录状态。比方将用户id存储于一个cookie内，如许当用户下次访问该页面时就不必要重新登录了，如今许多论坛和社区都提供如许的功能。 cookie还可以设置逾期时间，当凌驾时间限期后，cookie就会主动消散。因此，体系每每可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。
  
• 跟踪用户举动。比方一个气候预告网站，可以或许根据用户选择的地域表现本地的气候环境。假如每次都必要选择地点地是烦琐的，当使用了 cookie后就会显得很人性化了，体系可以或许记着上一次访问的地域，当下次再打开该页面时，它就会主动表现前次用户地点地域的气候环境。由于统统都是在后 台完成，以是如许的页面就像为某个用户所定制的一样，利用起来非常方便
  
• 定制页面。假如网站提供了换肤或更换结构的功能，那么可以利用cookie来记载用户的选项，比方：配景色、分辨率等。当用户下次访问时，仍旧可以生存上一次访问的界面风格。
  

14.web worker


在HTML页面中，假如在实行脚本时，页面的状态是不可相应的，直到脚本实行完成后，页面才酿成可相应。web worker是运行在背景的js，独立于其他脚本，不会影响页面你的性能。而且通过postMessage将效果回传到主线程。如许在举行复杂操纵的时间，就不会壅闭主线程了。


怎样创建web worker：

• 检测欣赏器对于web worker的支持性
  
• 创建web worker文件（js，回传函数等）
  
• 创建web worker对象
  

15.对HTML语义化标签的明白


HTML5语义化标签是指精确的标签包罗了精确的内容，布局精良，便于阅读，好比nav表现导航条，雷同的另有article、header、footer等等标签。


16.iframe是什么？有什么缺点？


界说：iframe元素会创建包罗另一个文档的内联框架
提示：可以将提示笔墨放在之间，来提示某些不支持iframe的欣赏器


缺点：

• 会壅闭主页面的onload变乱
  
• 搜刮引擎无法解读这种页面，倒霉于SEO
  
• iframe和主页面共享毗连池，而欣赏器对雷同地区有限定以是会影响性能。
  

17.Doctype作用? 严酷模式与稠浊模式怎样区分？它们有何意义?


Doctype声明于文档最前面，告诉欣赏器以何种方式来渲染页面，这里有两种模式，严酷模式和稠浊模式。

• 严酷模式的排版和 JS 运作模式是 以该欣赏器支持的最高尺度运行。
  
• 稠浊模式，向后兼容，模仿老式欣赏器，防止欣赏器无法兼容页面。
  

18.Cookie怎样防范XSS攻击


XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本，为了减轻这些攻击，必要在HTTP头部配上，set-cookie：

• httponly-这个属性可以防止XSS,它会克制javascript脚原来访问cookie。
  
• secure - 这个属性告诉欣赏器仅在哀求为https的时间发送cookie。
  

效果应该是如许的：Set-Cookie=.....


19.Cookie和session的区别


HTTP是一个无状态协议，因此Cookie的最大的作用就是存储sessionId用来唯一标识用户


20. 一句话概括RESTFUL


就是用URL定位资源，用HTTP形貌操纵


21.讲讲viewport和移动端结构


可以参考我的这篇文章：


相应式结构的常用办理方案对比(媒体查询、百分比、rem和vw/vh）（http://github.com/forthealllight/blog/issues/13）


22. click在ios上有300ms耽误，缘故原由及怎样办理？


(1)粗暴型，禁用缩放
  
(2)使用FastClick，其原理是：
检测到touchend变乱后，立即出发模仿click变乱，而且把欣赏器300毫秒之后真正出发的变乱给阻断掉。


1.册本下载：学前端不看书怎么行？前端100本高清pdf电子书打包下载

2.前端学习神器：前端开辟学习神器，帮你办理全部的前端技能题目
以为本文对你有资助？请分享给更多人
关注==>>「前端教程」，一起提拔前端技能！