No120.精选前端面试题,享受每天的挑战和学习

简介: No120.精选前端面试题,享受每天的挑战和学习

浏览器强制缓存和协商缓存

浏览器缓存是浏览器用于提高网页加载速度的一种机制。浏览器缓存分为强制缓存和协商缓存。

  1. 强制缓存浏览器在第一次请求资源时,会将该资源的缓存相关信息(如过期时间)保存起来。在下次请求该资源时,浏览器会先检查缓存相关信息,如果未过期,浏览器就直接从缓存中加载该资源,不需要再向服务器发送请求。常见的强制缓存策略有:Expires 和 Cache-Control。
  • Expires:是 HTTP/1.0 的标准,用于指定资源的过期时间,即到期后就需要重新请求服务器,这个时间是服务器的绝对时间,如:Expires: Wed, 21 Oct 2022 07:28:00 GMT。
  • Cache-Control:是 HTTP/1.1 的标准,用于对缓存进行更精细化的控制。常见的取值有:
  • public:表示响应可以被任何缓存(包括公共缓存和私有缓存)缓存。
  • private:表示响应只能被客户端(浏览器)缓存,中间的代理服务器不能缓存该响应。
  • no-cache:表示浏览器在使用缓存副本之前必须先确认其有效性。
  • max-age:表示资源的有效期,单位为秒。
  1. 协商缓存:当强制缓存失效时,浏览器会发送一个请求到服务器,服务器通过比较请求头中的一些字段来判断资源是否发生了变化。若资源未发生变化,则服务器返回 304 Not Modified 响应,浏览器继续使用缓存。若资源已经发生变化,服务器返回最新的资源,并携带新的缓存相关信息,存入缓存中。常见的协商缓存策略有:Last-Modified 和 ETag。
  • Last-Modified是服务器响应的一个字段,表示资源的最后修改时间。当浏览器请求该资源时,会携带 If-Modified-Since 请求头,该头字段的值即是上次请求服务器返回的 Last-Modified 值。服务器接收到请求后,根据 If-Modified-Since 的值与资源的最后修改时间进行对比,如果时间一致,说明资源未发生变化,返回 304 Not Modified 响应。如果时间不一致,说明资源已经修改,返回最新的资源并更新 Last-Modified 值。
  • ETag是服务器响应的一个字段,表示资源的唯一标识。当浏览器请求该资源时,会携带 If-None-Match 请求头,该头字段的值即是上次请求服务器返回的 ETag 值。服务器接收到请求后,根据 If-None-Match 的值与资源的 ETag 进行对比,如果一致,说明资源未发生变化,返回 304 Not Modified 响应。如果不一致,说明资源已经修改,返回最新的资源并更新 ETag 值。

通过强制缓存和协商缓存两种机制的配合使用,可以在一定程度上减少对服务器的请求,提高网页加载速度。

cookie,localStorage、sessionStorage

下面是对cookie、localStorage和sessionStorage使用的表格总结:

Cookie localStorage sessionStorage
存储容量 4KB 5MB 5MB
生命周期 可设置过期时间 永久存储 页面关闭时清除
存储位置 浏览器和服务器都能读取 仅浏览器能读取 仅浏览器能读取
是否跨域访问 取决于Cookie的设置 不允许跨域访问 不允许跨域访问
存储数据格式 仅能存储字符串 可以存储各种数据类型 可以存储各种数据类型
与服务器通信 每次请求都会带上cookie 不会自动带上,需要手动设置 不会自动带上,需要手动设置

js闭包,原型,原型链

闭包、原型和原型链是 JavaScript 中重要的概念。

  1. 闭包(Closure):闭包是指有权访问另一个函数作用域中的变量的函数。简单来说,闭包就是函数和声明该函数的词法环境的组合。闭包能够记住并访问其声明时的作用域,即使在函数外部被调用也可以访问到。闭包的一个常见用途是创建私有变量,它可以通过闭包隐藏内部状态,只暴露一些公共接口。
  2. 原型(Prototype):在 JavaScript 中,每个对象都有一个原型原型是一个对象,其他对象可以通过它来继承属性和方法。当你访问一个对象的属性或方法时,如果这个对象本身没有这个属性或方法,JavaScript 引擎会去它的原型上查找,如果原型上也没有,就会继续查找原型的原型,直到找到或者到达原型链的末尾。
  3. 原型链(Prototype Chain):原型链是由对象的原型组成的链式结构当一个对象在查找属性或方法时,如果自身没有,它会通过原型链向上查找,直到找到或者到达原型链的末尾(Object.prototype)。原型链是 JavaScript 实现继承的机制之一,可以让对象共享原型的属性和方法

这些概念相互关联并且在 JavaScript 中非常重要。深入了解它们将有助于更好地理解和使用 JavaScript。

箭头函数和普通函数的区别

箭头函数和普通函数在语法和功能方面有一些区别:

  1. 语法:箭头函数使用箭头(=>)来定义函数,而普通函数使用 function 关键字来定义函数。
  2. this 绑定:箭头函数没有自己的 this 绑定,它会捕获所在上下文的 this 值,可以理解为箭头函数的 this 值是词法上下文的绑定。而普通函数的 this 值是在运行时动态绑定的。
  3. arguments 对象:箭头函数没有自己的 arguments 对象,但它可以访问外部作用域中的 arguments 对象。普通函数可以直接访问自己的 arguments 对象。
  4. 构造函数:箭头函数不能用作构造函数,因为箭头函数没有自己的 this 值,无法使用 new 关键字来创建对象。而普通函数可以用作构造函数来创建对象。
  5. 返回值:箭头函数的返回值会直接作为函数的返回值,不需要使用 return 关键字。普通函数需要使用 return 关键字来指定返回值。

综上所述,箭头函数适用于一些简单的函数,尤其是需要更简洁的语法和避免 this 绑定问题的场景。而普通函数则更灵活,可以适应更多的场景,并支持更多的语法特性。

promise的状态扭转

Promise 的状态扭转包括三种状态:Pending(进行中)、Fulfilled(已成功)和Rejected(已失败)。

初始状态为 Pending(进行中),表示 Promise 的操作还未完成。

当 Promise 的操作成功完成时,状态会从 Pending(进行中)转变为 Fulfilled(已成功),并且会调用 Promise 的 resolve 函数。

当 Promise 的操作失败时,状态会从 Pending(进行中)转变为 Rejected(已失败),并且会调用 Promise 的 reject 函数。

一旦状态从 Pending(进行中)转变为 Fulfilled(已成功)或 Rejected(已失败),就不会再次发生状态转换。

在状态转换后,可以通过 then 方法来处理 Promise 的结果。如果状态为 Fulfilled(已成功),则会执行第一个参数传入的回调函数;如果状态为 Rejected(已失败),则会执行第二个参数传入的回调函数。

需要注意的是,Promise 的状态是不可逆的,一旦状态发生了改变,就无法再次改变。所以,Promise 的状态转换只会发生一次。

目录
打赏
0
0
0
0
51
分享
相关文章
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
258 26
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
102 4
数据结构与算法学习四:单链表面试题,新浪、腾讯【有难度】、百度面试题
这篇文章总结了单链表的常见面试题,并提供了详细的问题分析、思路分析以及Java代码实现,包括求单链表中有效节点的个数、查找单链表中的倒数第k个节点、单链表的反转以及从尾到头打印单链表等题目。
68 1
数据结构与算法学习四:单链表面试题,新浪、腾讯【有难度】、百度面试题
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
119 1
JVM知识体系学习八:OOM的案例(承接上篇博文,可以作为面试中的案例)
这篇文章通过多个案例深入探讨了Java虚拟机(JVM)中的内存溢出问题,涵盖了堆内存、方法区、直接内存和栈内存溢出的原因、诊断方法和解决方案,并讨论了不同JDK版本垃圾回收器的变化。
72 4
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
219 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
前端新机遇!为什么我建议学习鸿蒙?
【10月更文挑战第4天】前端新机遇!为什么我建议学习鸿蒙?
235 0
前端新机遇!为什么我建议学习鸿蒙?
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
本文阐述了Spring、Spring Boot和Spring MVC的关系与区别,指出Spring是一个轻量级、一站式、模块化的应用程序开发框架,Spring MVC是Spring的一个子框架,专注于Web应用和网络接口开发,而Spring Boot则是对Spring的封装,用于简化Spring应用的开发。
426 0
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等