2024 前端面试题 附录3
这里记录的是昨天和今天原篇的知识点补充
原篇地址:
2024 前端面试题(GPT回答 + 示例代码 + 解释)No.41 - No.60
2024 前端面试题(GPT回答 + 示例代码 + 解释)No.61 - No.100
2024 前端面试题(GPT回答 + 示例代码 + 解释)No.101 - No.113
目录
- 这里记录的是昨天和今天原篇的知识点补充
- 原篇地址:
- 附1:对 WEB 标准以及 W3C 的理解与认识
- 附2:Web Worker
- 附3:登录拦截怎么实现的?
附1:对 WEB 标准以及 W3C 的理解与认识
WEB标准是指制定Web技术规范的一系列标准,包括HTML、CSS、JavaScript等。WEB标准可以保证不同浏览器在渲染网页时的表现一致性,从而提高网站的兼容性和可维护性。
W3C(World Wide Web Consortium)是负责制定和推广Web标准的国际标准化组织,由互联网先驱Tim Berners-Lee创立。W3C通过制定和推广Web标准,推动Web技术的发展,并促进Web应用的交互、互通和普及。W3C旨在确保Web技术的互操作性和可访问性,以便Web上的所有用户都能够获得最佳的体验。W3C还提供了一些工具和资源,帮助Web开发者更好地理解和使用Web标准,如校验工具、指南和教程等。
随着Web技术的快速发展,各种新的标准和技术层出不穷。但是,Web标准的重要性仍然不可忽视,因为它们是确保Web应用程序的稳定性、安全性和可靠性的基础。遵循Web标准可以使网站更易于维护,提高搜索引擎排名,以及为用户提供更好的使用体验。
附2:Web Worker
Web Worker 是一种 JavaScript API,它可以在后台线程中运行脚本,以便在主线程中不被阻塞的情况下处理较大的计算任务。Web Worker 可以让 JavaScript 在独立于主执行线程的上下文中运行,从而改善网页的响应性能,提高用户体验。与主线程相比,Web Worker 具有以下几个特点:
-
独立的执行环境: Web Worker 在一个独立的执行环境中运行,在多核 CPU 的设备上可以充分利用硬件资源。
-
无法访问 DOM: 由于 Web Worker 运行在独立的执行环境中,因此无法直接访问 DOM 和其他浏览器 API,这意味着我们不能使用 Web Worker 来修改 HTML、CSS 或者访问浏览器 API,如 localStorage。
-
通过消息传递通信: Web Worker 与主线程之间采用消息传递的方式来进行通信,这使得它们可以在后台线程中运行而不会影响主线程的性能。同时,基于消息传递的通信模型也使得 Web Worker 的设计更加安全,可以防止代码注入和 XSS 攻击等问题。
为什么我们需要 Web Worker 呢?主要原因如下:
-
提高页面响应速度: 一些计算密集型的操作,如大数据处理、图像处理、加密解密等,可能会占用主线程,导致页面出现卡顿和响应迟滞。使用 Web Worker 可以将这些操作移动到后台线程中处理,从而提高网页的响应速度和用户体验。
-
充分利用硬件资源: Web Worker 可以在多核 CPU 的设备上充分利用硬件资源,提高处理速度。
-
增强应用逻辑复杂性: 在较大型的 Web 应用中,应用逻辑往往非常复杂,可能涉及到数据处理、网络请求、事件处理等多个方面。使用 Web Worker 可以将这些逻辑分离到不同的线程中去处理,从而更好地管理代码复杂性,并且减少代码的耦合性。
总的来说,Web Worker 是一项有价值的技术,可以帮助我们提高网页的响应速度和用户体验,从而更好地满足用户需求。
当涉及到需要处理大量数据、复杂计算或长时间运行的任务时,使用 Web Worker 可以提供更好的用户体验。以下是一些例子:
-
图像处理: 在网页中对图像进行处理(如滤镜、裁剪、缩放等)可能会消耗较多的计算资源和时间。通过将图像处理操作放在 Web Worker 中进行,可以避免阻塞主线程,保持页面的响应性。
-
数据分析和计算: 当需要对大量数据进行分析、计算或排序时,这些操作可能会占用大量的 CPU 时间。使用 Web Worker 可以将这些计算操作移至后台线程,使得网页仍然能够流畅地响应用户的交互。
-
密码学加密解密: 加密和解密操作通常是计算密集型的任务,涉及大量的数据运算。通过将这些操作放在 Web Worker 中,可以提高性能,同时确保用户输入的敏感信息在进行加密解密时不会被主线程访问到。
-
复杂算法计算: 一些复杂的算法计算,如数值模拟、机器学习等,可能需要较长时间才能完成。使用 Web Worker 可以在后台线程中运行这些计算任务,而不会阻塞主线程,从而保持页面的流畅性。
-
后台数据处理: 在网页应用中,后台数据的处理和转换可能是一个耗时的操作。通过使用 Web Worker 可以将这些数据处理任务放在后台线程中完成,不会阻塞用户界面的交互。
需要注意的是,Web Worker 并不适合所有场景。对于一些简单的任务或者涉及到 DOM 操作的任务,仍然适合在主线程中执行。合理地使用 Web Worker 可以提高网页的性能和用户体验,但也需要根据具体情况进行权衡和选择。
当然!以下是一个使用 Web Worker 的简单示例代码:
首先,我们创建一个名为 worker.js 的 JavaScript 文件,用于定义 Web Worker 的逻辑。在该文件中,我们可以编写我们想要在后台线程中执行的代码。例如,下面的示例将计算斐波那契数列的函数放在了 worker.js 中:
// worker.js// 定义计算斐波那契数列的函数
function calculateFibonacci(n) {if (n <= 1) {return n;} else {return calculateFibonacci(n - 1) + calculateFibonacci(n - 2);}
}// 监听主线程发来的消息
self.onmessage = function(event) {// 获取传递过来的数据var num = event.data;// 在后台线程中计算斐波那契数列var result = calculateFibonacci(num);// 将结果发送回主线程self.postMessage(result);
};
接下来,在主线程的 JavaScript 文件中,我们可以创建一个 Worker 对象,并通过 postMessage 方法向 Web Worker 发送消息,然后通过监听 message 事件来获取 Web Worker 返回的结果。例如,下面的示例演示了如何使用 Web Worker 来计算斐波那契数列:
// 主线程的 JavaScript 文件// 创建一个新的 Web Worker
var myWorker = new Worker('worker.js');// 向 Web Worker 发送消息
myWorker.postMessage(10);// 监听 Web Worker 返回的消息
myWorker.onmessage = function(event) {// 获取返回的结果var result = event.data;// 在页面上显示结果console.log('计算结果:', result);
};// 当不再需要 Web Worker 时,可以调用 `terminate` 方法终止它
// myWorker.terminate();
在这个示例中,我们将需要计算的斐波那契数列的项数作为消息发送给 Web Worker,Web Worker 在后台线程中进行计算,并将结果通过 postMessage 方法发送回主线程,在主线程中打印结果。
请注意,由于涉及到创建和加载额外的 JavaScript 文件,此示例需要在服务器环境下运行,或者使用支持本地文件访问的浏览器。
附3:登录拦截怎么实现的?
登录拦截通常是通过 Vue Router 的导航守卫来实现的,可以在路由跳转之前检查用户的登录状态,并根据需要进行相应的操作,比如重定向到登录页面或允许继续访问路由。
以下是一个简单的实现登录拦截的示例:
- 首先,在路由配置中定义需要登录才能访问的路由,并设置相应的 meta 信息标记:
const routes = [{path: '/dashboard',component: Dashboard,meta: { requiresAuth: true }},{path: '/login',component: Login},// 其他路由配置...
];
- 然后,在 Vue Router 中使用全局前置守卫 (
beforeEach) 进行登录拦截的逻辑处理:
router.beforeEach((to, from, next) => {if (to.matched.some(record => record.meta.requiresAuth)) {// 需要登录权限的路由if (!isAuthenticated()) {// 未登录,重定向到登录页面next({path: '/login',query: { redirect: to.fullPath }});} else {// 已登录,继续导航next();}} else {// 不需要登录权限的路由,直接导航next();}
});function isAuthenticated() {// 判断用户是否已登录,可以根据具体业务逻辑来实现return localStorage.getItem('token') !== null;
}
在上述代码中,beforeEach 导航守卫会在每次路由切换之前被调用,如果目标路由需要登录权限 (requiresAuth: true),则会检查用户是否已登录,未登录则重定向到登录页面;已登录则允许继续访问路由。对于不需要登录权限的路由,直接允许导航。
通过以上逻辑,可以实现基本的登录拦截功能,确保用户在没有登录的情况下无法访问需要登录权限的页面。
相关文章:
2024 前端面试题 附录3
这里记录的是昨天和今天原篇的知识点补充 原篇地址: 2024 前端面试题(GPT回答 示例代码 解释)No.41 - No.60 2024 前端面试题(GPT回答 示例代码 解释)No.61 - No.100 2024 前端面试题(GPT回答 示例代…...
[Vue warn]: Duplicate keys detected: ‘1‘. This may cause an update error.
[Vue warn]: Duplicate keys detected: ‘1‘. This may cause an update error.——> Vue报错,key关键字不唯一: 解决办法:修改一下重复的id值!!!...
Docker-Learn(二)保存、导入、使用Docker镜像
1.保存镜像 根据上一节内容,将创建好镜像进行保存,需要退出当前的已经在运行的docer命令行中断里面,可以通过在终端里面输入指令exit或者按下键盘上的 ctrlD建退出: 回到自己的终端里面,输入指令: docker…...
第三百一十五回
文章目录 1. 概念介绍2. 基本用法3. 补充用法4. 内容总结 我们在上一章回中介绍了"再谈ListView中的分隔线",本章回中将介绍showMenu的用法.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在第一百六十三回中介绍了showMenu相关的内容…...
区块链(一): 以太坊基础知识
目录 什么是区块链?什么是以太坊?什么是加密货币?以太坊与比特币有什么不同?以太坊能做什么?什么是智能合约?以太坊社区以太坊白皮书 什么是区块链? 区块链是一个交易数据库,在网络…...
高级FPGA开发之基础协议PCIe
基础协议之PCIe部分 一、TLP包的包头 在PCIe的系统中,tlp包的包头的结构有许多部分是相似的,通过掌握这些常规的包头,能帮助理解在PCIe总线上各个设备之间如何进行数据的收发。 通用的字段 通用字段作用Fmt决定了包头是3DW还是3DWÿ…...
Vue核心基础1:数据代理
1 回顾Object.defineProperty方法 let str hello const person {name: 张三,age: 18 } Object.defineProperty(person, sex, {// value: 男,// enumerable: true, // 控制属性是否可以枚举,默认值是false// writable: true, // 控制属性是否可以被修改࿰…...
12 ABC串口接收原理与思路
1. 串口接收原理 基本原理:通过数据起始位判断要是否要开始接收的数据,通过采样的方式确定每一位数据是0还是1。 如何判断数据起始位到来:通过边沿检测电路检测起始信号的下降沿 如何采样:一位数据采多次,统计得到高…...
leetcode(二分查找)34.在排序数组中查找元素的第一个和最后一个位置(C++详细解释)DAY11
文章目录 1.题目示例提示 2.解答思路3.实现代码结果 4.总结 1.题目 给你一个按照非递减顺序排列的整数数组 nums,和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target,返回 [-1, -1]。 你必须设计…...
算法刷题框架
前言:最近积累了一些算法题量,正在刷东神的算法笔记,监督自己记录下读后启发,顺便帮助道友们阅读 数据结构 这一部分老生常谈,数据的存储方式只有顺序存储和链式存储。 最基本的数组和链表对应这两者,栈…...
跟着cherno手搓游戏引擎【24】开启2D引擎前的项目总结(包括前置知识汇总)
前置技术: c动态链接和静态链接: 隐藏的细节:编译与链接_哔哩哔哩_bilibili 【底层】动态链接库(dll)是如何工作的?_哔哩哔哩_bilibili 预编译,编译,汇编,链接 预编译头文件: 为…...
石子合并+环形石子合并+能量项链+凸多边形的划分——区间DP
一、石子合并 (经典例题) 设有 N 堆石子排成一排,其编号为 1,2,3,…,N。 每堆石子有一定的质量,可以用一个整数来描述,现在要将这 N 堆石子合并成为一堆。 每次只能合并相邻的两堆,合并的代价为这两堆石子的质量之和,…...
IMX6ULL移植U-Boot 2022.04
目录 目录 1.编译环境以及uboot版本 2.默认编译测试 3.uboot中新增自己的开发板 3.编译测试 4.烧录测试 5.patch文件 1.编译环境以及uboot版本 宿主机Debian12u-boot版本lf_v2022.04 ; git 连接GitHub - nxp-imx/uboot-imx: i.MX U-Boot交叉编译工具gcc-arm-10.3-2021.0…...
ES实战-高级聚合
多桶型聚合 1.词条聚合–terms 2.范围聚合–range 3,直方图聚合–histogram/日期直方图 4.嵌套聚合 5.地理距离聚合 include(包含)exclude(不包含) GET /get-together/_search?pretty {"size": 0,"aggs": {"tags": {"terms": {"…...
网络安全产品之认识蜜罐
文章目录 一、什么是蜜罐二、蜜罐的主要类型三、蜜罐的主要功能四、蜜罐的主要组成及核心技术五、蜜罐的优缺点六、蜜罐如何与其他安全工具协同工作?七、什么是“蜜网”?与蜜罐的联系和区别是什么? 蜜罐的概念首次由Clifford Stoll在其1988年…...
推荐《架构探险:从零开始写Java Web框架》
版权声明 本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 春节读了《架构探险:从零开始写Java Web框架》,一本大概10年前的好书。 本书的作者是阿里巴巴架构师黄勇。黄勇对分布式服务架构与大数据技术有深入…...
Go教程-Go语言简介
这篇文章我们来聊聊Go语言。 Go语言发展历史 以下是Go语言发展的几个里程碑节点: Go一开始是Google内部的一个项目,由三位大佬Rob Pike、Robert Griesemer、Ken Thompson早2007年发起。在2009年11月,Go语言正式对外开源。在2010年…...
React + SpringBoot + Minio实现文件的预览
思路:后端提供接口,从minio获取文件的预览链接,返回给前端,前端使用组件进行渲染展示 这里我从minio获取文件预览地址用到了一个最近刚开源的项目,挺好用的,大伙可以试试,用法也很简单 官网&am…...
心法利器[107] onnx和tensorRT的bert加速方案记录
心法利器 本栏目主要和大家一起讨论近期自己学习的心得和体会,与大家一起成长。具体介绍:仓颉专项:飞机大炮我都会,利器心法我还有。 2023年新一版的文章合集已经发布,获取方式看这里:又添十万字-CS的陋室2…...
AcWing 122 糖果传递(贪心)
[题目概述] 有 n 个小朋友坐成一圈,每人有 a[i] 个糖果。 每人只能给左右两人传递糖果。 每人每次传递一个糖果代价为 1。 求使所有人获得均等糖果的最小代价。 输入格式 第一行输入一个正整数 n,表示小朋友的个数。 接下来 n 行,每行一个…...
Python|GIF 解析与构建(5):手搓截屏和帧率控制
目录 Python|GIF 解析与构建(5):手搓截屏和帧率控制 一、引言 二、技术实现:手搓截屏模块 2.1 核心原理 2.2 代码解析:ScreenshotData类 2.2.1 截图函数:capture_screen 三、技术实现&…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中,我们会遇到使用 java 调用 dll文件 的情况,此时大概率出现UnsatisfiedLinkError链接错误,原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用,结果 dll 未实现 JNI 协…...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域,无损检测(NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统,以非接触式光学麦克风技术为核心,打破传统检测瓶颈,为半导体、航空航天、汽车制造等行业提供了高灵敏…...
Qt 事件处理中 return 的深入解析
Qt 事件处理中 return 的深入解析 在 Qt 事件处理中,return 语句的使用是另一个关键概念,它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别:不同层级的事件处理 方…...
