当前位置: 首页 > news >正文

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

在这里插入图片描述

文章目录

    • 浏览器强制缓存和协商缓存
    • cookie,localStorage、sessionStorage
    • js闭包,原型,原型链
    • 箭头函数和普通函数的区别
    • promise的状态扭转

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

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

  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使用的表格总结:

CookielocalStoragesessionStorage
存储容量4KB5MB5MB
生命周期可设置过期时间永久存储页面关闭时清除
存储位置浏览器和服务器都能读取仅浏览器能读取仅浏览器能读取
是否跨域访问取决于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 的状态转换只会发生一次。

相关文章:

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

文章目录 浏览器强制缓存和协商缓存cookie,localStorage、sessionStoragejs闭包,原型,原型链箭头函数和普通函数的区别promise的状态扭转 浏览器强制缓存和协商缓存 浏览器缓存是浏览器用于提高网页加载速度的一种机制。浏览器缓存分为强制缓…...

c# 访问sqlServer数据库时的连接字符串

//sql server 身份验证的场合, 连接字符串 private string ConnstrSqlServer "server服务器名称;uid登录名称;pwd登录密码;database数据库名称"; //windows 身份验证连接字符串 private string ConnstrWindows "server服务器名称;database数据库…...

排序算法概述

1.排序算法分类 **比较类算法排序:**通过比较来决定元素的时间复杂度的相对次序,由于其时间复杂度不能突破 O ( n l o g n ) O(nlogn) O(nlogn),因此也称为非线性时间比较类算法 **非比较类算法排序:**不通过比较来决定元素间的…...

ChatGPT在高等教育中的应用利弊探讨

​人工智能在教育领域的应用日益广泛。2022年11月OpenAI开发的聊天机器人ChatGPT在全球范围内流传开来,其中用户数量最多的国家是美国(15.22%)。由于ChatGPT应用广泛,具有类似人类回答问题的能力,它正在成为许多学生和教育工作者的可信赖伙伴…...

Java之API详解之Runtime的详细解析

3.1 概述 Runtime表示Java中运行时对象,可以获取到程序运行时设计到的一些信息 3.2 常见方法 常见方法介绍 我们要学习的Object类中的常见方法如下所示: public static Runtime getRuntime() //当前系统的运行环境对象 public void exit(int statu…...

机器学习之softmax

Softmax是一个常用于多类别分类问题的激活函数和归一化方法。它将一个向量的原始分数(也称为 logits)转换为概率分布,使得每个类别的概率值在0到1之间,同时确保所有类别的概率之和等于1。Softmax函数的定义如下: 对于…...

npm script命令

1 串行/并行执行命令 //串行 npm-run-all text test npm run text && npm run test //并行改成& npm-run-all --parallel text test npm run text & npm run test2 传递参数 {"lint": "eslint js/*.js","lint:fix"&#xff1a…...

【力扣周赛】第360场周赛

【力扣周赛】第360场周赛 8015.距离原点最远的点题目描述解题思路 8022. 找出美丽数组的最小和题目描述解题思路 8015.距离原点最远的点 题目描述 描述:给你一个长度为 n 的字符串 moves ,该字符串仅由字符 ‘L’、‘R’ 和 ‘_’ 组成。字符串表示你在…...

php环境变量的配置步骤

要配置PHP的环境变量,以便在命令行中直接使用php命令,以下是一般的步骤: Windows 操作系统 下载和安装PHP:首先,你需要从PHP官方网站(https://www.php.net/downloads.php)下载适用于你的操作系…...

Kdtree

Kdtree kdtree 就是在 n 维空间对数据点进行二分;具体先确定一个根,然后小于在这个维度上的根的节点在左边,大于的在右边,再进行下一个维度的划分。直到维度结束,再重复,或者直到达到了结束条件&#xff1…...

算法leetcode|74. 搜索二维矩阵(rust重拳出击)

文章目录 74. 搜索二维矩阵:样例 1:样例 2:提示: 分析:题解:rust:go:c:python:java: 74. 搜索二维矩阵: 给你一个满足下述两条属性的…...

element浅尝辄止7:InfiniteScroll 无限滚动

滚动加载&#xff1a;滚动至底部时&#xff0c;加载更多数据。 1.如何使用&#xff1f; //在要实现滚动加载的列表上上添加v-infinite-scroll&#xff0c;并赋值相应的加载方法&#xff0c; //可实现滚动到底部时自动执行加载方法。<template><ul class"infinit…...

Day05-Vue基础

Day05-Vue基础 一、单向数据流 父子组件通信。会在父组件中定义好数据,将数据传递给子组件,可以使用这个数据 Vue中针对props这个属性提出了一个单向数据流的概念。 Vue针对props做了一些限制,可以接受值,使用这个值,规范中不要去直接修改这个值 目的是为了对数据流进…...

《机器学习在车险定价中的应用》实验报告

目录 一、实验题目 机器学习在车险定价中的应用 二、实验设置 1. 操作系统&#xff1a; 2. IDE&#xff1a; 3. python&#xff1a; 4. 库&#xff1a; 三、实验内容 实验前的猜想&#xff1a; 四、实验结果 1. 数据预处理及数据划分 独热编码处理结果&#xff08;以…...

14. Docker中实现CI和CD

目录 1、前言 2、什么是CI/CD 3、部署Jenkins 3.1、下载Jenkins 3.2、启动Jenkins 3.3、访问Jenkins页面 4、Jenkins部署一个应用 5、Jenkins实现Docker应用的持续集成和部署 5.1、创建Dockerfile 5.2、集成Jenkins和Docker 6、小结 1、前言 持续集成(CI/CD)是一种…...

【多思路解决喝汽水问题】1瓶汽水1元,2个空瓶可以换一瓶汽水,给20元,可以喝多少汽水

题目内容 喝汽水问题 喝汽水&#xff0c;1瓶汽水1元&#xff0c;2个空瓶可以换一瓶汽水&#xff0c;给20元&#xff0c;可以喝多少汽水&#xff08;编程实现&#xff09;。 题目分析 数学思路分析 根据给出的问题和引用内容&#xff0c;我们可以得出答案。 首先&#xff…...

P1591 阶乘数码(Java高精度)

题目描述 求 n ! n! n! 中某个数码出现的次数。 输入格式 第一行为 t ( t ≤ 10 ) t(t \leq 10) t(t≤10)&#xff0c;表示数据组数。接下来 t t t 行&#xff0c;每行一个正整数 n ( n ≤ 1000 ) n(n \leq 1000) n(n≤1000) 和数码 a a a。 输出格式 对于每组数据&a…...

Mybatis的动态SQL及关键属性和标识的区别(对SQL更灵活的使用)

&#xff08; 虽然文章中有大多文本内容&#xff0c;想了解更深需要耐心看完&#xff0c;必定大有受益 &#xff09; 目录 一、动态SQL ( 1 ) 是什么 ( 2 ) 作用 ( 3 ) 优点 ( 4 ) 特殊标签 ( 5 ) 演示 二、#和$的区别 2.1 #使用 ( 1 ) #占位符语法 ( 2 ) #优点 2.…...

mysql下载

网址 MySQL :: Download MySQL Community Serverhttps://dev.mysql.com/downloads/mysql/ 2、选择MSI进行安装 3、这里我选择离线安装 4、这里我选择直接下载 5、等待下载安装即可...

聚合函数与窗口函数

聚合函数 回答一 聚合函数&#xff08;Aggregate Functions&#xff09;是SQL中的函数&#xff0c;用于对一组数据进行计算&#xff0c;并返回单个结果。聚合函数通常用于统计和汇总数据&#xff0c;包括计算总和、平均值、计数、最大值和最小值等。 以下是一些常见的聚合函…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...