一天面五场,感觉身体被掏空。(中)书接上文,我们直入主题,开启愉快的拷打面试官环节。 HTTP 缓存 HTTP缓存可以用
书接上文,我们直入主题,开启愉快的拷打面试官环节。
HTTP 缓存
HTTP缓存可以用来缓存各种类型的Web资源像HTML、CSS、JS还有视频和音频和图片这些,并且这些缓存的Web资源是有缓存时效的,然后检查这些资源有没有被缓存可以来到浏览器的开发者工具Network查看。
当浏览器去访问一个网站的时候,就要去加载这个网站的资源像html,css,js,img第一次访问的时候肯定是要去加载资源,但在下一次请求的时候我们就希望它不再去向网站请求资源,我们就可以利用缓存来减少网络请求的体积和数量来提高网页的加载速度。
那么在下一次访问的时候,浏览器会根据HTTP响应头中的缓存控制指令来判断页面中的资源是否已经被缓存。这个过程就分成两个部分:强缓存和协商缓存。
- 访问页面时通过max-age来判断缓存是否过期,强缓存会在响应头上加一个Cache-Control来规定该缓存的过期时间,下次请求时如果资源没有过期则浏览器会直接从缓存中加载资源如果没有过期不会加载资源,如果是向服务端获取资源设置强缓存的会则会返回200状态码,如果是请求缓存过的数据话则不会有状态码。强缓存这就有一个缺点了,就是拿不到最新的数据,因为已经缓存过了所以不会再向服务端请求。
- 协商缓存会先发送一个请求到服务端来根据Last-Modifide(最后一次修改的时间)和ETag(缓存文件的hash)来判断缓存是否过期(也就是该文件有没有更新)如果没有过期(也就是没有更新)就会返回304状态码继续使用缓存,如果过期了(也就是更新了)那么会先设置一个最新的Last-Modifide和Etag属性给响应头,然后把最新的资源返回给前端,并且返回状态码200同时设置缓存。
图片来源-----哔哩哔哩
在前端中使用JSONP解决跨域的原理
JSONP是一个古老的解决方案,在同源策略里面对标签的跨域请求限制比较小,JSONP就是利用了这一点。
< script src = '跨域地址'> 请求的是js不是ajax
函数柯里化
函数柯里化就是一种将使用多个参数的一个函数转化成一系列的使用一个参数的函数的技术。
原理:闭包
手写柯里化的两个核心:
- 如果参数达到length,直接计算结果
- 如果参数没有达到length,就返回一个新函数
function curry(fn) {
const arity = fn.length; // 获取函数需要的参数数量
return function curried(...args) {
// 当提供的参数数量小于函数需要的参数数量时
if (args.length < arity) {
// 返回一个新的函数,该函数将剩余的参数与已有的参数合并
return function (...moreArgs) {
return curried(...args, ...moreArgs);
};
}
// 当提供的参数数量等于或大于函数需要的参数数量时
return fn(...args);
};
}
// 使用示例
const add = (a, b, c) => a + b + c;
const curriedAdd = curry(add);
// 使用柯里化后的函数
const result1 = curriedAdd(1)(2)(3); // 结果为 6
const result2 = curriedAdd(1, 2)(3); // 结果也为 6
const result3 = curriedAdd(1)(2, 3); // 结果也为 6
const result4 = curriedAdd(1, 2, 3); // 结果也为 6
console.log(result1, result2, result3, result4); // 输出: 6 6 6 6
在Vue中什么情况你会考虑封装成组件
- 可重用性,比如某个UI在多个地方重复出现
- 状态隔离,这个组件的状态和其他的部分是没有关系的
- 职责单一,这个组件只单独完成这一项具体的功能
async/await语法糖
比如:
const n = await 1; console.log(n) => return Promise.resolve(1).then(n) => {console.log(n)}
输入一个URL后发生了什么
先解析URL确定协议(像HTTP、HTTPS)端口、域名这些,然后就会进行DNS解析返回该域名的IP地址,有了IP地址后就会根据TCP协议建立连接,连接建立完成后浏览器就可以向服务器发送HTTP请求,请求头里面就包含了一些请求类型(GET,POST)还有用户代理等信息。服务器收到请求后,会根据请求的资源来处理,然后服务器处理完成之后,会构建一个HTTP响应包(包括状态码、HTML文档这些)发送回浏览器,浏览器在接收到响应后就会开始解析HTML文档构建DOM树接着请求CSS和JavaScript文件来构建CSSOM树,最后根据CSSOM树和DOM树组成的render树来渲染页面。
弹性容器
在默认情况下flex项目都排在一条线上,如果想要实现换行可以使用flex-wrap:wrap来允许换行。
flex:a b c 其实flex-grow
, flex-shrink
和flex-basis
的简写,默认值为0 1 auto。后两个是可选属性。
可以在子容器中通过改变flex-grow的不同来控制子容器所在比例
flex-wrap这个CSS属性用于控制Flex容器内的子元素(即Flex项目)是否应该被允许换行以及如何换行。
flex-wrap
属性有以下几种值:
nowrap
(默认值): 子元素都会尝试在一行内显示,即使容器宽度不足以容纳所有子元素,也不会发生换行。wrap
: 当子元素总宽度超过容器宽度时,子元素会换到下一行继续排列。wrap-reverse
: 类似于wrap
,但在多行的情况下,第一行会出现在最下面,而最后一行出现在最上面。
最后
还有一部分内容暂时没有总结出来,兄弟们骚等............
转载自:https://juejin.cn/post/7402076305082630159