阅读 90

TCP,UDP的东西,随意写写

1. TCP三次握手

为什么需要三次握手?

客户端和服务端都需要直到各自可收发,因此需要三次握手;
三次握手总结如下:C发起请求连接S确认,S发起连接C确认;
1.第一次握手:S只可以确认 自己可以接受C发送的报文段;
2.第二次握手:C可以确认 S收到了自己发送的报文段,并且可以确认 自己可以接受S发送的报文段;
3.第三次握手:S可以确认 C收到了自己发送的报文段
复制代码

2.TCP和UDP的区别

1. UDP是无连接的,发送数据前不需要先建立连接,TCP是面向连接的;
2.UDP传输不一定可靠,尽最大努力交付,不保证可靠交付。TCP提供可靠服务,传输无差错,不丢失数据,适合大数据量交换;
3.UDP面向报文,在网络堵塞时候发送速率不发生改变(因此会出现丢包,对实时的应用比如ip电话,视频会议)等,TCP是面向字节流;
4.UDP支持1v1,1v多,TCP只能1v1;
5.UDP只有8字节,TCP首部为20字节;
6.UDP是不可靠性传输,TCP是面向连接的可靠性传输;
复制代码

3. WebSocket的实现和应用

4. fetch发送两次请求的原因?

fetch发送请求的时候,总是发送两次,第一次状态码是204,第二次才成功?
原因:因为用fetch发送post请求的时候,导致fetch请求第一次发送了一个options请求,用于询问服务器是否支持修改的请求,若服务器支持,则在第二次才发送真正的请求。
复制代码

5. cookie,sessionStorage,localStorage的区别

共同点:都是保存在浏览器端,且是同源的;
不同点:
1. cookie:数据始终在同源的http请求中携带,即cookie在浏览器和服务器间来回传递;
cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下;
存放数据:
2.cookie存储的大小只有4k左右,因为每次http请求都会携带cookie,适合保存很小的数据。(key:可以在浏览器和服务器端来回传递,存储容量小,只有约4K左右);
webstorage也有存储大小的限制,但是比cookie大的多,可以达到5M或者更大;
sessionStorage,localStorage不会自动把数据发给服务器,仅在本地保存。
3. 数据有效期不同(生命周期)
sessionStorage:仅在当前浏览器窗口关闭前有效,自然不可能保持持久。  
localStorage:始终有效,窗口或浏览器关闭也就一直保存,用作持久数据;
cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。(key:本身就是一个回话过程,关闭浏览器后消失,session为一个回话,当页面不同即使是同一页面打开两次,也被视为同一次回话);
4. 作用域不同,localStorage:localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。(key:同源窗口都会共享,并且不会失效,不管窗口或者浏览器关闭与否都会始终生效)
复制代码

下面从几个方向区分一下cookie,localstorage,sessionstorage的区别

1、生命周期:

Cookie:可设置失效时间,否则默认为关闭浏览器后失效

Localstorage:除非被手动清除,否则永久保存

Sessionstorage:仅在当前网页会话下有效,关闭页面或浏览器后就会被清除

2、存放数据:

Cookie:4k左右

Localstorage和sessionstorage:可以保存5M的信息

3、http请求:

Cookie:每次都会携带在http头中,如果使用cookie保存过多数据会带来性能问题

其他两个:仅在客户端即浏览器中保存,不参与和服务器的通信

4、易用性:

Cookie:需要程序员自己封装,原生的cookie接口不友好

其他两个:即可采用原生接口,亦可再次封装

5、应用场景:

从安全性来说,因为每次http请求都回携带cookie信息,这样子浪费了带宽,所以cookie应该尽可能的少用,此外cookie还需要指定作用域,不可以跨域调用,限制很多,但是用户识别用户登陆来说,cookie还是比storage好用,其他情况下可以用storage,localstorage可以用来在页面传递参数,sessionstorage可以用来保存一些临时的数据,防止用户刷新页面后丢失了一些参数,

5. cookie作用
保存用户登录状态。例如将用户id存在一个cookie内,这样当用户下次访问时就不需要重新登录了。
设置过期时间。当使用超过期限后,cookie会自动消失。(系统可以提示用户保持登录状态的时间:一般为一个月、三个月、一年等);
跟踪用户行为。例如天气预报网站,根据选择的地区显示当地天气的情况,多次使用后,cookie可以让系统记住上一次访问的地区,再次访问时,会自动显示上次的地址。再者网站若提供了换肤或者更换布局的功能,可以使用cookie来记录用户的选项,如背景色,分辨率等,当用户下次访问时,可以保持上一次访问的风格。这些都是在后台完成的,像是为用户定制一样,使用起来非常方便。
复制代码

cookie session 区别

 1.cookie数据存放在客户的浏览器上,session数据放在服务器上;
 2.cookie不安全,别人可以分析存放在本地的cookie并进行cookie欺骗,使用session更安全;
 3.session会在一定时间内保存在服务器上,当访问增多,会比较占用服务器的性能,若考虑减轻服务器的性能,应使用cookie;session可以存放于文件、数据库、内存中。
 4.
 5.cookie可以服务器端响应的时候设置,也可以客户端通过js设置;
 6.cookie会在请求时在http首部发送客户端,cookie一般在客户端有大小限制,单个cookie保存的数据不能超过4k,很多浏览器都限制一个站点最多保存20个cookie;
复制代码

6. web worker是什么?

首先,在HTML页面中,如果在执行脚本时,页面的状态是不可响应的,直到脚本执行完成后,页面才变成可响应。

 web worker是运行在后台的js,独立于其他脚本,不会影响页面的性能,通过postMessage将结果回传到主线程,这样在进行复杂的操作时,不会阻塞到主线程。
 如何创建web worker: 检测浏览器对web worker的支持性;创建web worker文件(js,回传函数等);蠢创建web worker对象;
复制代码

7. 对HTML语义化标签的理解

 它是指正确的标签包含了正确的内容,结构良好,便于阅读,比如nav表示导航条,article,header,footer等标签;
 
复制代码

8. Doctype作用,严格模式和混杂模式如何区分,有什么意义?

 Doctype声明放在浏览器最前面,告诉浏览器以何种方式来渲染页面,这里有两种模式,严格模式和混杂模式。
 严格模式的排版和JS运作模式是按照该浏览器支持的最高标准执行;
 混杂模式,向后兼容,模拟老式浏览器,防止浏览器无法兼容页面。
 
复制代码

9. cookie如何防范XSS攻击

 XSS(跨站脚本攻击)是指攻击者在返回的HTML中嵌入javascript脚本,为了减轻这些攻击,需要在HTTP头部配上set-cookie;
 httponly-可以防止XSS,它会禁止js脚本来访问cookie;
 secure-告诉浏览器仅在请求为https的时候发送cookie;
 结果:set-cookie=<cookie-value>
复制代码

10. cookie和session的区别

 HTTP是一个无状态协议,所以cookie的最大作用就是存储一个sessionid用来唯一表示用户;
 
复制代码

11. 一句话概括restful

 用url定位资源,用http描述操作;
复制代码

12. 讲一下viewport和移动端布局

rem单位只相对于浏览器的根元素的font-size,同时默认情况下font-size为16px;
rem单位是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准,当页面size发生变化时,只需要改变font-size的值,则以rem为固定单位的元素的大小也会发生响应式的变化。---所以通过rem来实现响应式的布局,只需要根据视图容器的大小,动态的改变font-size即可。
复制代码

13. click在ios上有300ms延迟,原因及如何解决;

 (1)粗暴型,禁用缩放
 <meta name="viewport" content="width=device-width, user-scalable=no">
 (2)利用Fastclick
检测到touched事件后,立刻出发模拟click事件,并且把浏览器300ms后真正触发的事件给阻断掉
复制代码

14. addEventListener参数

 addEventListener(event, function, useCapture)
其中,event指定事件名;function指定要事件触发时执行的函数;useCapture指定事件是否在捕获或冒泡阶段执行
复制代码

15. HTTP状态码

 OK:请求成功,一般用于GRT和POST请求
 
复制代码

16.讲讲状态码304, 301,302,200

 304:如果客户端发送了一个带条件的get请求,且请求已被允许,而文档的内容(从上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个304状态码。即客户端和服务器只需要传输很少的数据量来做文件的校验,若文件没有修改过,则不需要返回全量的数据。
 301:move permanently,被请求的资源已永久移动到新位置,且将来任何对此资源的引用都应该使用本响应返回的若干个url之一。若可能,拥有链接编辑功能的客户端应该自动把请求的地址修改为从服务器哦反馈回来的地址,除非额外指定,否则这个响应也是可以缓存的。
 302:found,请求的资源现在临时从不同的url响应请求。这种重定向是临时的,客户端应该继续向原有地址发送以后的请求,只有在cache-control或expires中进行了指定的情况下,这个响应才是可缓存的。
 简单理解:301是永久重定向,而302是临时重定向,301常用的场景是使用域名跳转,302用来做临时跳转,比如未登录的用户访问用户中心,重定向到登录页面。
 200:请求已成功,请求所希望的响应头或数据体将随此响应返回,即返回的数据为全量的数据,若文件不通过gzip压缩,文件多大,就要多大传输量。
 
复制代码

17. 前端优化

 降低请求量:合并资源,减少http请求数,利用压缩,懒加载,webP等;
 加快请求速度:预解析DNS,减少域名数,并行加载,CDN分发;
 缓存:HTTP协议缓存请求,离线缓存manifest,离线数据缓存localStorage;
 渲染:JS/CSS优化,加载顺序,服务端渲染,pipeline;
 
 
复制代码

18. Get和Post区别

 get参数通过url传递,post放在request body中;
 get请求在url中传递的参数是有长度限制的,post没有;
 get比post更不安全,因为参数直接暴露在url中,所以不建议用来传递敏感信息;
 get只能支持url编码,而post支持多种编码方式;
 get请求参数会被完整保留在浏览历史记录里,post里面的参数不会被保留;
 ** get和post本质为tcp连接,无差别。但由于http的规定和浏览器/服务器的限制,导致在应用过程中体现出一些不同。get产生一个tcp数据包,post产生两个tcp数据包。
 
复制代码

19. http支持的方法

 get,post,head,options,put,delete,trace,connect
复制代码

20. 说说浏览器缓存

 缓存有两种:强缓存、协商缓存,根据响应的header内容来决定;
 强缓存相关字段:expires,cache-control,如果cache-control与expires同时存在,cache-control的优先级高于expires。
 协商缓存相关字段:last-modified/if-modified-since,etag/if-none-match;
 
复制代码

21. html5新增的元素

 1.增加的语义化标签:header、nav、aside、section、footer;
 2.表单新元素:给input增加了color、email、data、range等类型;
 3.存储方面:提供了sessionStorage、localStorage、离线存储,通过这些存储方式方便数据在客户端的存储和获取;
 4.在多媒体方面:规定了音频和视频元素audio和video,还有地理定位、canvas画布、拖放、多线程编程的web worker和websocket协议。
复制代码

22. 在地址栏里输入一个URL,到这个页面呈现出来,中间会发生什么?(必考题)

  输入url后,首先需要找到这个url域名的服务器ip,为了寻找这个ip,浏览器首先会寻找缓存,查看缓存中是否有记录,缓存的查找记录为:浏览器缓存-》系统缓存-》路由器缓存,缓存中没有则查找系统的hosts文件中是否有记录,如果没有则查询DNS服务器,得到服务器的ip地址后,浏览器根据这个ip以及相应的端口号,构造一个http请求,这个请求报文会包括这次请求的信息,主要是请求方法,请求说明和请求附带的数据,并将这个http请求封装在一个tcp包中,这个tcp包会依次经过传输层,网络层,数据链路层,物理层到达服务器,服务器解析这个请求来作出响应,返回相应的html给浏览器,因为html是一个树形结构,浏览器根据这个html来构建DOM树,在dom树的构建过程中如果遇到JS脚本和外部JS连接,则会停止构建DOM树来执行和下载相应的代码,这会造成阻塞,这就是为什么推荐JS代码应该放在html代码的后面,之后根据外部央视,内部央视,内联样式构建一个CSS对象模型树CSSOM树,构建完成后和DOM树合并为渲染树,这里主要做的是排除非视觉节点,比如script,meta标签和排除display为none的节点,之后进行布局,布局主要是确定各个元素的位置和尺寸,之后是渲染页面,因为html文件中会含有图片,视频,音频等资源,在解析DOM的过程中,遇到这些都会进行并行下载,浏览器对每个域的并行下载数量有一定的限制,一般是4-6个,当然在这些所有的请求中我们还需要关注的就是缓存,缓存一般通过Cache-Control、Last-Modify、Expires等首部字段控制。 Cache-Control和Expires的区别在于Cache-Control使用相对时间,Expires使用的是基于服务器 端的绝对时间,因为存在时差问题,一般采用Cache-Control,在请求这些有设置了缓存的数据时,会先 查看是否过期,如果没有过期则直接使用本地缓存,过期则请求并在服务器校验文件是否修改,如果上一次 响应设置了ETag值会在这次请求的时候作为If-None-Match的值交给服务器校验,如果一致,继续校验 Last-Modified,没有设置ETag则直接验证Last-Modified,再决定是否返回304
  
  
  浏览器的输入URL到页面呈现的大体过程:
复制代码

1.输入地址,发送至DNS服务器,获取相应的域名和web服务器的IP地址; 2.与web服务器建立TCP链接; 3.浏览器向web服务器发送HTTP请求; 4.服务器响应请求,并发送对应的数据; 5.浏览器下载数据,并解析源文件,渲染页面,呈现页面 6.关闭TCP连接

常见的HTTP的头部
复制代码

参考回答: 可以将http首部分为通用首部,请求首部,响应首部,实体首部 通用首部表示一些通用信息,比如date表示报文创建时间,

请求首部就是请求报文中独有的,如cookie,和缓存相关的如if-Modified-Since

响应首部就是响应报文中独有的,如set-cookie,和重定向相关的location,

实体首部用来描述实体部分,如allow用来描述可执行的请求方法,content-type描述主题类型,content-Encoding描述主体的编码方式

● HTTP2.0 的特性 参考回答: http2.0的特性如下: 1、内容安全,应为http2.0是基于https的,天然具有安全特性,通过http2.0的特性可以避免单纯使用https的性能下降

2、二进制格式,http1.X的解析是基于文本的,http2.0将所有的传输信息分割为更小的消息和帧,并对他们采用二进制格式编码,基于二进制可以让协议有更多的扩展性,比如引入了帧来传输数据和指令

3、多路复用,这个功能相当于是长连接的增强,每个request请求可以随机的混杂在一起,接收方可以根据request的id将request再归属到各自不同的服务端请求里面,另外多路复用中也支持了流的优先级,允许客户端告诉服务器那些内容是更优先级的资源,可以优先传输,

● cache-control的值有哪些 参考回答: cache-control是一个通用消息头字段被用于HTTP请求和响应中,通过指定指令来实现缓存机制,这个缓存指令是单向的,常见的取值有private、no-cache、max-age、must-revalidate等,默认为private。 ● 浏览器在生成页面的时候,会生成那两颗树? 参考回答: 构造两棵树,DOM树和CSSOM规则树 当浏览器接收到服务器相应来的HTML文档后,会遍历文档节点,生成DOM树,

CSSOM规则树由浏览器解析CSS文件生成.

try

在try里面的发生错误,不会执行错误后的try里面的代码,有错误会跳到catch里面执行,没有错误则不执行catch
error.name的六种值对应的信息:
    1.evalError:eval()的使用与定义不一致;
    2.RangeError:数值越界
    3.Ref erenceError:非法或不能识别的引用数值;
    4.SyntaxError:发生语法解析错误;
    5.TypeError:操作数类型错误;
    6.URIerror:URI处理函数使用不当
复制代码

严格模式 use strict

  两种用法:全局严格模式,局部函数内严格模式(推荐)
  一行字符串,不会对不兼容严格模式的浏览器产生影响;
  严格模式变量赋值前,必须声明;
  局部this必须被赋值(person.call(null/undefined)),赋值什么就是什么,拒绝重复属性和参数。
  
  
复制代码

DOM操作

document代表整个文档

文章分类
前端
文章标签