最后
全网独播-价值千万金融项目前端架构实战
从两道网易面试题-分析JavaScript底层机制
RESTful架构在Nodejs下的最佳实践
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
一线互联网企业如何初始化项目-做一个自己的vue-cli
思维无价,看我用Nodejs实现MVC
代码优雅的秘诀-用观察者模式深度解耦模块
前端高级实战,如何封装属于自己的JS库
VUE组件库级组件封装-高复用弹窗组件
(5)如果根域名服务器中也不存在该域名,但判定这个域名属于“com”域,则本地域名服务器会向com顶级域名服务器发送一个请求
(6)如果com顶级域名服务器没有找到该域名,但判定这个域名属于“google.com”域,则本地域名服务器会向google.com域名服务器发送一个请求,以此类推
(7)直到本地域名服务器得到域名对应的IP地址,并将其缓存到本地,供下次查询使用
9、什么是HTTP持久化和管线化?
-
HTTP持久化是针对HTTP无连接的特点进行改进的,使用的是keep-live首部字段保持长连接
-
HTTP管线化是针对HTTP每次只能是请求一次回答一次的模式进行改进,使得可以连续发送多次请求。
10、SSL有几次握手?具体过程是怎样的?
这个问题和HTTPS的实现原理可以看做是一样的,但是比较有针对性,以下是回答:
SSL有4次握手,握手过程为:
-
客户端请求SSL连接
-
服务端发送包含公钥的证书
-
客户端使用公钥加密对称秘钥并发送给服务端
-
服务端使用私钥解密对称秘钥
11.断点续传的原理
Range:用于客户端到服务端的请求,可以通过改字段指定下载文件的某一段大小及其单位,字节偏移从0开始。典型格式:
Ranges: (unit=first byte pos)-[last byte pos]
Ranges: bytes=4000- 下载从第4000字节开始到文件结束部分
Ranges: bytes=0~N 下载第0-N字节范围的内容
Ranges: bytes=M-N 下载第M-N字节范围的内容
Ranges: bytes=-N 下载最后N字节内容
If-Range:用于客户端到服务端的请求,用于判断实体是否发生改变,必须与Range配合使用。若实体未被修改,则响应所缺少的那部分;否则,响应整个新的实体。
Accept-Ranges:用于server到client的应答,client通过该自段判断server是否支持断点续传。
Accept-Ranges:bytes 表示支持以bytes为单位进行传输。
Accept-Ranges:none 表示不支持断点续传
Content-Ranges:用于sever到client的应答,与Accept-Ranges在同一个报文内,通过该字段指定了返回的文件资源的字节范围。格式如下:
Content-Ranges:bytes M-N/size 大小为size的文件的第M-N字节范围的内容
12、强缓存和协商缓存的命中和管理
-
1)浏览器在加载资源时,先根据这个资源的一些http header判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务器。比如某个css文件,如果浏览器在加载它所在的网页时,这个css文件的缓存配置命中了强缓存,浏览器就直接从缓存中加载这个css,连请求都不会发送到网页所在服务器;
-
2)当强缓存没有命中的时候,浏览器一定会发送一个请求到服务器,通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存,如果协商缓存命中,服务器会将这个请求返回,但是不会返回这个资源的数据,而是告诉客户端可以直接从缓存中加载这个资源,于是浏览器就又会从自己的缓存中去加载这个资源;
-
3)强缓存与协商缓存的共同点是:如果命中,都是从客户端缓存中加载资源,而不是从服务器加载资源数据;区别是:强缓存不发请求到服务器,协商缓存会发请求到服务器。
-
4)当协商缓存也没有命中的时候,浏览器直接从服务器加载资源数据。
-
关于强缓存:
-
- 浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上Cache-Control的header
-
浏览器在接收到这个资源后,会把这个资源连同所有response header一起缓存下来;
-
浏览器再请求这个资源时,先从缓存中寻找,找到这个资源后,根据它第一次的请求时间和Cache-Control设定的有效期,计算出一个资源过期时间,再拿这个过期时间跟当前的请求时间比较,如果请求时间在过期时间之前,就能命中缓存,否则就不行。
-
如果缓存没有命中,浏览器直接从服务器加载资源时,Cache-Control Header在重新加载的时候会被更新。
-
浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上Expires的header
-
浏览器在接收到这个资源后,会把这个资源连同所有response header一起缓存下来(所以缓存命中的请求返回的header并不是来自服务器,而是来自之前缓存的header);
-
浏览器再请求这个资源时,先从缓存中寻找,找到这个资源后,拿出它的Expires跟当前的请求时间比较,如果请求时间在Expires指定的时间之前,就能命中缓存,否则就不行。
-
如果缓存没有命中,浏览器直接从服务器加载资源时,Expires Header在重新加载的时候会被更新。
-
当浏览器对某个资源的请求命中了强缓存时,返回的http状态为200,在chrome的开发者工具的network里面size会显示为from cache
-
强缓存是利用Expires或者Cache-Control这两个http response header实现的,它们都用来表示资源在客户端缓存的有效期。
-
Expires: 是http1.0提出的一个表示资源过期时间的header,它描述的是一个绝对时间,由服务器返回,用GMT格式的字符串表示,如:Expires:Thu, 31 Dec 2037 23:55:55 GMT,它的缓存原理是:
-
Cache-Control: Expires是较老的强缓存管理header,由于它是服务器返回的一个绝对时间,在服务器时间与客户端时间相差较大时,缓存管理容易出现问题,比如随意修改下客户端时间,就能影响缓存命中的结果。所以在http1.1的时候,提出了一个新的header,就是Cache-Control,这是一个相对时间,在配置缓存的时候,以秒为单位,用数值表示,如:Cache-Control:max-age=315360000,它的缓存原理是:
-
Cache-Control描述的是一个相对时间,在进行缓存命中的时候,都是利用客户端时间进行判断,所以相比较Expires,Cache-Control的缓存管理更有效,安全一些。
-
这两个header可以只启用一个,也可以同时启用,当response header中,Expires和Cache-Control同时存在时,Cache-Control优先级高于Expires
-
关于协商缓存
-
- 浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上ETag的header,这个header是服务器根据当前请求的资源生成的一个唯一标识,这个唯一标识是一个字符串,只要资源有变化这个串就不同,跟最后修改时间没有关系,所以能很好的补充Last-Modified的问题:
-
浏览器再次跟服务器请求这个资源时,在request的header上加上If-None-Match的header,这个header的值就是上一次请求时返回的ETag的值:
-
服务器再次收到资源请求时,根据浏览器传过来If-None-Match和然后再根据资源生成一个新的ETag,如果这两个值相同就说明资源没有变化,否则就是有变化;如果没有变化则返回304 Not Modified,但是不会返回资源内容;如果有变化,就正常返回资源内容。与Last-Modified不一样的是,当服务器返回304 Not Modified的响应时,由于ETag重新生成过,response header中还会把这个ETag返回,即使这个ETag跟之前的没有变化
-
浏览器收到304的响应后,就会从缓存中加载资源。
-
浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上Last-Modified的header,这个header表示这个资源在服务器上的最后修改时间
-
浏览器再次跟服务器请求这个资源时,在request的header上加上If-Modified-Since的header,这个header的值就是上一次请求时返回的Last-Modified的值:
-
服务器再次收到资源请求时,根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化,如果没有变化则返回304 Not Modified,但是不会返回资源内容;如果有变化,就正常返回资源内容。当服务器返回304 Not Modified的响应时,response header中不会再添加Last-Modified的header,因为既然资源没有变化,那么Last-Modified也就不会改变,这是服务器返回304时的response header:
-
浏览器收到304的响应后,就会从缓存中加载资源。
-
如果协商缓存没有命中,浏览器直接从服务器加载资源时,Last-Modified Header在重新加载的时候会被更新,下次请求时,If-Modified-Since会启用上次返回的Last-Modified值。
-
当浏览器对某个资源的请求没有命中强缓存,就会发一个请求到服务器,验证协商缓存是否命中,如果协商缓存命中,请求响应返回的http状态为304并且会显示一个Not Modified的字符串
-
协商缓存是利用的是**【Last-Modified,If-Modified-Since】和【ETag、If-None-Match】**这两对Header来管理的。
-
**【Last-Modified,If-Modified-Since】**的控制缓存的原理是:
-
【ETag、If-None-Match】: 【Last-Modified,If-Modified-Since】都是根据服务器时间返回的header,一般来说,在没有调整服务器时间和篡改客户端缓存的情况下,这两个header配合起来管理协商缓存是非常可靠的,但是有时候也会服务器上资源其实有变化,但是最后修改时间却没有变化的情况,而这种问题又很不容易被定位出来,而当这种情况出现的时候,就会影响协商缓存的可靠性。所以就有了另外一对header来管理协商缓存,这对header就是【ETag、If-None-Match】。它们的缓存管理的方式是:
-
浏览器行为对缓存的影响
-
- 当ctrl+f5强制刷新网页时,直接从服务器加载,跳过强缓存和协商缓存;
-
当f5刷新网页时,跳过强缓存,但是会检查协商缓存;
-
如果资源已经被浏览器缓存下来,在缓存失效之前,再次请求时,默认会先检查是否命中强缓存,如果强缓存命中则直接读取缓存,如果强缓存没有命中则发请求到服务器检查是否命中协商缓存,如果协商缓存命中,则告诉浏览器还是可以从缓存读取,否则才从服务器返回最新的资源。这是默认的处理方式
-
以下行为可能改变缓存的默认处理方式
13. 请列举三种禁止浏览器缓存的头字段, 并写出相应的设置值
对于一些动态数据,很多时候我们希望每当用户在浏览器地址栏敲了回车之后,就可以看到最新的数据,但是很多时候,浏览器会自动的帮你去缓存该数据。
所以在此种情况下我们就看到最新的数据了,那么怎么办呢?
这个时候就要告诉浏览器不要缓存这些数据。
这个时候就要用到这三个http响应头来实现禁用浏览器缓存。
Cache-Control : no-cache
Pragma : no-cache
Expires: Thu, 01 Dec 1994 16:00:00 GMT (非常特殊,转换特定日期格式才可以)
有些动态页面,每次访问内容都不同 ----- 如果浏览器缓存页面,无法查看最近内容
存放缓存文件夹: 工具—internet选项 — 设置 — 查看文件
response.setHeader(“Cache-Control”, “no-cache”);
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
onse.setHeader(“Cache-Control”, “no-cache”);
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
[外链图片转存中…(img-QSSsas6c-1715855079952)]
[外链图片转存中…(img-Vw5dj6ev-1715855079954)]