当前位置： 首页 > article >正文

大厂前端研发岗位PWA面试题及解析

article 2025/6/2 19:26:50

在这里插入图片描述

在这里插入图片描述

文章目录

      • 一、基础概念
      • 二、Service Worker 深度
      • 三、缓存策略实战
      • 四、高级能力
      • 五、性能与优化
      • 六、调试与部署
      • 七、安全与更新
      • 八、跨平台兼容
      • 九、架构设计
      • 十、综合场景
      • 十一、前沿扩展

一、基础概念

  1. 什么是PWA？列举3个核心特性
    解析：渐进式网页应用。核心特性：离线可用、类原生体验（安装图标/全屏）、后台同步。本质是网页+增强技术集合。

  2. Service Worker 是什么？它为什么是PWA的核心？
    解析：浏览器独立线程，可拦截网络请求。核心能力：实现离线缓存、消息推送（不依赖页面打开），是PWA的“后台服务”。

  3. Manifest.json 文件的作用是什么？至少写出5个关键字段
    解析：定义应用安装到桌面时的表现。关键字段：name, short_name, start_url, icons, display（standalone/fullscreen）, theme_color。

二、Service Worker 深度

  1. Service Worker 的生命周期包含哪些阶段？
    解析：注册(register) → 安装(install) → 等待(waiting) → 激活(activate) → 运行(fetch/sync)。更新时新旧SW并行需处理skipWaiting。

  2. 如何手动触发Service Worker更新？
    解析：1. 文件内容变更（哈希变化） 2. 修改注册路径（如?v=2）3. 调用registration.update()

  3. 解释install和activate事件的差异
    解析：

    • install：首次安装时触发，适合缓存静态资源
    • activate：旧SW被替换时触发，适合清理旧缓存

  4. 如何实现强制跳过Service Worker等待期？
    解析：在install事件中调用self.skipWaiting()，并在主线程用Clients.claim()接管页面。

三、缓存策略实战

  1. 列举3种常见的缓存策略并说明适用场景
    解析：

    • CacheFirst：静态资源（JS/CSS）
    • Netwo

相关文章：

大厂前端研发岗位PWA面试题及解析

文章目录 一、基础概念二、Service Worker 深度三、缓存策略实战四、高级能力五、性能与优化六、调试与部署七、安全与更新八、跨平台兼容九、架构设计十、综合场景十一、前沿扩展一、基础概念 什么是PWA？列举3个核心特性 解析：渐进式网页应用。核心特性：离线可用、类原生体…...

编程日记 2025/6/1 5:49:33

第十四章 MQTT订阅

系列文章目录 系列文章目录 第一章 总体概述 第二章 在实体机上安装ubuntu 第三章 Windows远程连接ubuntu 第四章 使用Docker安装和运行EMQX 第五章 Docker卸载EMQX 第六章 EMQX客户端MQTTX Desktop的安装与使用 第七章 EMQX客户端MQTTX CLI的安装与使用 第八章 Wireshark工具…...

编程日记 2025/6/1 5:48:32

element ui 表格 勾选复选框后点击分页不保存之前的数据问题

element ui 表格 勾选复选框后点击分页不保存之前的数据问题 给 el-table上加 :row-key"getRowKey"给type“selection” 上加 :reserve-selection"true"...

编程日记 2025/6/1 5:47:31

DataAgent产品经理（数据智能方向）

DataAgent产品经理（数据智能方向） 一、核心岗位职责 AI智能体解决方案设计 面向工业/政务场景构建「数据-模型-交互」闭环，需整合多源异构数据（如传感器数据、业务系统日志）与AI能力（如大模型微调、知识图…...

编程日记 2025/6/1 5:46:29

腾讯云推出云开发AI Toolkit，国内首个面向智能编程的后端服务

5月28日，腾讯云开发 CloudBase 宣布推出 AI Toolkit（CloudBase AI Toolkit），这是国内首个面向智能编程的后端服务，适配 Cursor 等主流 AI 编程工具。 云开发 AI Toolkit旨在解决 AI 辅助编程的“最后一公里”问题&…...

编程日记 2025/6/1 5:45:27

华为计试——刷题

判断两个IP是否属于同一子网 题目：给定一个子网掩码和两个 IP 地址，判断这两个 IP 地址是否在同一个子网中。 思路：首先，判断这个 IP 地址和子网掩码格式是否正确，不正确输出 ‘1’，进而结束；…...

编程日记 2025/6/1 5:44:26

【AI-安装指南】Redis Stack 的安装与使用

目录 一、Redis Stack 的介绍 二、安装方式 2.1 安装 2.2 添加依赖 2.3 设置配置信息 2.4 Redis 添加向量数据 2.5 查询向量数据 一、Redis Stack 的介绍 传统的 Redis 服务是不能存储向量的，因此我们需要首先安装 Redis Stack，而 Windows 电脑安 装 Redis Stack，官方…...

编程日记 2025/6/1 5:43:24

LeetCode Hot100(矩阵）

73. 矩阵置零 这边提供nm的做法以及更少的思路，对于nm的做法，我们只需要开辟标记当前行是否存在0以及当前列是否存在0即可，做法如下 class Solution {public void setZeroes(int[][] matrix) {int arr[]new int[matrix.length];int brr[]ne…...

编程日记 2025/6/1 5:42:18

spark在执行中如何选择shuffle策略

目录 1. SortShuffleManager与HashShuffleManager的选择2. Shuffle策略的自动选择机制3. 关键配置参数4. 版本差异（3.0+新特性）5. 异常处理与调优6. 高级Shuffle服务（CSS）1. SortShuffleManager与HashShuffleManager的选择 SortShuffleManager：默认使用，适用于大规模数据…...

编程日记 2025/6/1 5:41:11

前端-不对用户显示

这是steam的商店偏好设置界面，在没有被锁在国区的steam账号会有5个选项，而被锁在国区的账号只有3个选项，这里使用的技术手段仅仅在前端隐藏了这个其他两个按钮。 单击F12打开开发者模式 单击1处，找到这一行代码，可以看…...

编程日记 2025/6/1 5:40:09

WPF【10_2】数据库与WPF实战-示例

客户预约关联示例图 MainWindow.xaml 代码 <Window x:Class"WPF_CMS.MainWindow" xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d"ht…...

编程日记 2025/6/1 5:39:07

Hive的数据倾斜是什么？

一、Hive数据倾斜的定义 数据倾斜指在Hive分布式计算过程中&#xff0c;某一个或几个Task&#xff08;如Map/Reduce任务&#xff09;处理的数据量远大于其他Task&#xff0c;导致这些Task成为整个作业的性能瓶颈&#xff0c;甚至因内存不足而失败。数据倾斜通常发生在Shuffle阶…...

编程日记 2025/6/2 9:01:46

Cursor奇技淫巧篇（经常更新ing）

Dot files protection &#xff1a;Cursor当开启了Agent模式之后可以自动帮我们写文件&#xff0c;但是一般项目中的一些配置文件&#xff08;通常以.开头的&#xff09;都是非常重要性&#xff0c;为了防止Cursor在运行的过程中自己修改这些文件&#xff0c;导致风险&#xff…...

编程日记 2025/6/2 6:18:11

Unity3D仿星露谷物语开发58之保存时钟信息到文件

1、目标 保存当前的时钟信息到文件中。 2、修改TimeManager对象 TimeManager对象添加组件&#xff1a;Generate GUID 3、修改SceneSave.cs脚本 添加1行代码&#xff1a; 4、修改TimeManager.cs脚本 添加&#xff1a; using System; 修改TimeManager类&#xff1a; 添加属…...

编程日记 2025/6/2 10:21:19

lstm 长短期记忆 视频截图 kaggle示例

【官方双语】LSTM&#xff08;长短期记忆神经网络&#xff09;最简单清晰的解释来了&#xff01;_哔哩哔哩_bilibili . [short,input]*[2.7,1.63]b5.95 换参数和激活函数 tan激活函数输出带正负符号的百分比 tanx公式长这样&#xff1f; 潜在短期记忆 前几天都是乱预测&#xf…...

编程日记 2025/6/2 7:20:38

Spring Advisor增强规则实现原理介绍

Spring Advisor增强规则实现原理介绍 一、什么是 Advisor&#xff1f;1. Advisor 的定义与本质接口定义&#xff1a; 2. Advisor 的核心作用统一封装切点与通知构建拦截器链的基础实现增强逻辑的灵活组合 二. Sprin当中的实现逻辑1 Advisor 接口定义2 PointcutAdvisor 接口定义…...

编程日记 2025/6/2 8:02:19

【HarmonyOS 5】鸿蒙中的UIAbility详解（二）

【HarmonyOS 5】鸿蒙中的UIAbility详解&#xff08;二&#xff09; 一、前言 今天我们继续深入讲解UIAbility&#xff0c;根据下图可知&#xff0c;在鸿蒙中UIAbility继承于Ability&#xff0c;开发者无法直接继承Ability。只能使用其两个子类&#xff1a;UIAbility和Extensi…...

编程日记 2025/6/2 10:32:46

力扣HOT100之动态规划：152. 乘积最大子数组

这道题并不是代码随想录里的&#xff0c;我试着用动规五部曲来做&#xff0c;然后不能通过全部测试样例&#xff0c;在第109个测试样例卡住了&#xff0c;如下所示。 原因是可能负数乘以负数会得到最大的乘积&#xff0c;不能单纯地用上一个序列的最大值乘以当前值来判断是否能…...

编程日记 2025/6/2 9:03:55

Java后端技术栈问题排查实战：Spring Boot启动慢、Redis缓存击穿与Kafka消费堆积

Java后端技术栈问题排查实战&#xff1a;Spring Boot启动慢、Redis缓存击穿与Kafka消费堆积 引言 在现代互联网大厂中&#xff0c;Java后端系统因为其复杂性和多样性&#xff0c;常常面临各种问题和挑战。从核心语言到微服务架构&#xff0c;从数据库到缓存&#xff0c;不同层…...

编程日记 2025/6/2 8:10:30

定制开发开源AI智能名片S2B2C商城小程序：数字营销时代的话语权重构

摘要&#xff1a;在数据驱动的数字营销时代&#xff0c;企业营销话语权正从传统媒体向掌握用户数据与技术的平台转移。本文基于“数据即权力”的核心逻辑&#xff0c;分析定制开发开源AI智能名片S2B2C商城小程序如何通过技术赋能、场景重构与生态协同&#xff0c;帮助企业重构营…...

编程日记 2025/6/2 8:43:52

【面试 - 遇到的问题 - 优化 - 地图】腾讯地图轨迹回放 - 回放的轨迹时间要和现实时间对应（非匀速）

目录 背景轨迹回放 - 匀速效果图TrackPlaybackDialog.vue 代码TMapNew.vue 代码 轨迹回放 - 非匀速效果图TrackPlaybackDialog.vue 代码TMapNew.vue 代码 背景 腾讯地图轨迹回放是匀速回放的&#xff0c;但是客户要求根据现实时间&#xff0c;什么时间点在某个点位 【腾讯地图轨…...

编程日记 2025/6/2 17:56:55

ffmpeg baidu

ffmpeg -list_devices true -f dshow -i dummy 获取你的音频输入设备&#xff08;麦克风&#xff09;名称 输出中可以看到你有如下两个可用麦克风设备&#xff1a; “麦克风阵列 (适用于数字麦克风的英特尔 智音技术)” “外部麦克风 (Realtek Audio)” &#xff08;注意&…...

编程日记 2025/6/2 9:59:03

spring boot 拦截器HandlerInterceptor 不生效的原因排查

public class UserInterceptor implements HandlerInterceptor项目添加一个拦截器&#xff0c;发现未生效 1、排查拦截本身是否注入了springbean 容器 Slf4j Component public class LoginInterceptor implements HandlerInterceptor {2、排查springboot 项目扫描范围是否包含…...

编程日记 2025/6/2 6:36:47

公网ip怎么申请和使用？本地只有内网IP如何提供外网访问？

在当今的网络时代&#xff0c;许多程序和服务都依赖于公网地址——用于标识设备在互联网位置的全球唯一标识符。例如&#xff0c;办公网站、FTP服务器或游戏服务器等需要借助公网IP来确保用户可以访问。故此准确获取公网IP地址显得尤为重要。 在大多家庭和企业网络中&#xff…...

编程日记 2025/6/2 8:57:34

将git最后一次提交把涉及到的文件按原来目录结构提取出来

文章目录 前言一、将git最后一次提交把涉及到的文件按原来目录结构提取出来 前言 将git最后一次的提交提取出来&#xff0c;涉及到的目录结构以及文件等&#xff0c;按原本的目录结构复制输出。并输出相关的补丁。 一、将git最后一次提交把涉及到的文件按原来目录结构提取出来…...

编程日记 2025/6/1 5:24:35

利用计算机模拟和玉米壳废料开发新型抗病毒药物合成方法

参阅&#xff1a;Top 创新大奖 这个课题将农业废弃物资源化利用、计算机辅助药物设计和绿色化学完美结合&#xff0c;是一个极具创新性和应用前景的研究方向&#xff01; 以下是如何利用计算机模拟和玉米壳废料开发新型抗病毒药物合成方法的系统思路&#xff1a; 核心思路 玉…...

编程日记 2025/6/2 7:46:14

【Docker】存储卷

【简介】 宿主机的某一目录与容器中的某一目录建立的一种绑定关系&#xff0c;这就是“存储卷” 它有三个特性 1.它可以绕过联合文件系统&#xff0c; 直接作用于宿主机的目录 2.容器和宿主机的这一绑定关系指向了同一目录&#xff0c; 因此两个目录之间的数据是同步的&#xf…...

编程日记 2025/6/2 7:05:51

Python 爬虫工具 BeautifulSoup

文章目录 1. BeautifulSoup 概述1.1. 安装 2. 对象的种类2.1. BeautifulSoup2.2. NavigableString&#xff08;字符串&#xff09;2.3. Comment2.4. Tag2.4.1. 获取标签的名称2.4.2. 获取标签的属性2.4.3. 获取标签的内容2.4.3.1. tag.string2.4.3.2. tag.strings2.4.3.3. tag.…...

编程日记 2025/6/2 7:42:11

WPF的布局核心：网格布局（Grid）

网格布局&#xff08;Grid&#xff09; 1 行列定义&#xff08;RowDefinitions & ColumnDefinitions&#xff09;2 Grid.Row和Grid.Column3 跨行跨列&#xff08;Grid.RowSpan & Grid.ColumnSpan&#xff09;3.1垂直跨行3.2水平跨列3.3综合应用案例 4 高级布局技巧4.1共…...

编程日记 2025/6/1 5:20:27

OpenCV图像认知(二)

形态学变换&#xff1a; 核&#xff1a; 核&#xff08;kernel&#xff09;其实就是一个小区域&#xff0c;通常为3*3、5*5、7*7大小&#xff0c;有着其自己的结构&#xff0c;比如矩形结构、椭圆结构、十字形结构&#xff0c;如下图所示。通过不同的结构可以对不同特征的图像…...

编程日记 2025/6/1 5:19:26