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 具有以下几个特点:

  1. 独立的执行环境: Web Worker 在一个独立的执行环境中运行,在多核 CPU 的设备上可以充分利用硬件资源。

  2. 无法访问 DOM: 由于 Web Worker 运行在独立的执行环境中,因此无法直接访问 DOM 和其他浏览器 API,这意味着我们不能使用 Web Worker 来修改 HTML、CSS 或者访问浏览器 API,如 localStorage。

  3. 通过消息传递通信: Web Worker 与主线程之间采用消息传递的方式来进行通信,这使得它们可以在后台线程中运行而不会影响主线程的性能。同时,基于消息传递的通信模型也使得 Web Worker 的设计更加安全,可以防止代码注入和 XSS 攻击等问题。

为什么我们需要 Web Worker 呢?主要原因如下:

  1. 提高页面响应速度: 一些计算密集型的操作,如大数据处理、图像处理、加密解密等,可能会占用主线程,导致页面出现卡顿和响应迟滞。使用 Web Worker 可以将这些操作移动到后台线程中处理,从而提高网页的响应速度和用户体验。

  2. 充分利用硬件资源: Web Worker 可以在多核 CPU 的设备上充分利用硬件资源,提高处理速度。

  3. 增强应用逻辑复杂性: 在较大型的 Web 应用中,应用逻辑往往非常复杂,可能涉及到数据处理、网络请求、事件处理等多个方面。使用 Web Worker 可以将这些逻辑分离到不同的线程中去处理,从而更好地管理代码复杂性,并且减少代码的耦合性。

总的来说,Web Worker 是一项有价值的技术,可以帮助我们提高网页的响应速度和用户体验,从而更好地满足用户需求。

当涉及到需要处理大量数据、复杂计算或长时间运行的任务时,使用 Web Worker 可以提供更好的用户体验。以下是一些例子:

  1. 图像处理: 在网页中对图像进行处理(如滤镜、裁剪、缩放等)可能会消耗较多的计算资源和时间。通过将图像处理操作放在 Web Worker 中进行,可以避免阻塞主线程,保持页面的响应性。

  2. 数据分析和计算: 当需要对大量数据进行分析、计算或排序时,这些操作可能会占用大量的 CPU 时间。使用 Web Worker 可以将这些计算操作移至后台线程,使得网页仍然能够流畅地响应用户的交互。

  3. 密码学加密解密: 加密和解密操作通常是计算密集型的任务,涉及大量的数据运算。通过将这些操作放在 Web Worker 中,可以提高性能,同时确保用户输入的敏感信息在进行加密解密时不会被主线程访问到。

  4. 复杂算法计算: 一些复杂的算法计算,如数值模拟、机器学习等,可能需要较长时间才能完成。使用 Web Worker 可以在后台线程中运行这些计算任务,而不会阻塞主线程,从而保持页面的流畅性。

  5. 后台数据处理: 在网页应用中,后台数据的处理和转换可能是一个耗时的操作。通过使用 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 的导航守卫来实现的,可以在路由跳转之前检查用户的登录状态,并根据需要进行相应的操作,比如重定向到登录页面或允许继续访问路由。

以下是一个简单的实现登录拦截的示例:

  1. 首先,在路由配置中定义需要登录才能访问的路由,并设置相应的 meta 信息标记:
const routes = [{path: '/dashboard',component: Dashboard,meta: { requiresAuth: true }},{path: '/login',component: Login},// 其他路由配置...
];
  1. 然后,在 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),则会检查用户是否已登录,未登录则重定向到登录页面;已登录则允许继续访问路由。对于不需要登录权限的路由,直接允许导航。

通过以上逻辑,可以实现基本的登录拦截功能,确保用户在没有登录的情况下无法访问需要登录权限的页面。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/684121.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python】通过conda安装Python的IDE

背景 系统&#xff1a;win11 软件&#xff1a;anaconda Navigator 问题现象&#xff1a;①使用Navigator安装jupyter notebook以及Spyder IDE 一直转圈。②然后进入anaconda prompt执行conda install jupyter notebook一直卡在Solving environment/-\。 类似问题&#xff1a; …

【Java基础题型】逢7过

朋友聚会的时候可能会玩一个游戏&#xff1a;缝7过 游戏规则&#xff1a;从任意一个数字开始报数&#xff0c;当你要报的数字是包含7或者 是7的倍数时&#xff0c;都要说&#xff1a;"过" 需求&#xff1a;使用程序在控制台打印出1-100之间的满足逢七必过规则的数…

计算机网络——12DNS

DNS DNS的必要性 IP地址标识主机、路由器但IP地址不好记忆&#xff0c;不便于人类用使用&#xff08;没有意义&#xff09;人类一般倾向于使用一些有意义的字符串来标识Internet上的设备存在着“字符串”——IP地址的转换的必要性人类用户提供要访问机器的“字符串”名称由DN…

FreeRTOS知识点

1>任务调度算法 1.抢占式调度&#xff1a;高优先级的任务优先执行&#xff0c;并且可以打断低优先级的任务执行。 在FreeRTOSConfig.h中开启configUSE_PREEMPTION宏&#xff0c;将宏设置为1&#xff0c;关闭&#xff08;将宏设置为0&#xff09; 2.时间片轮转&#xff1a…

Python-1

1. 解释Python中的GIL&#xff08;Global Interpreter Lock&#xff09;及其对多线程编程的影响。 Python中的GIL&#xff08;Global Interpreter Lock&#xff09;是一种互斥锁&#xff0c;它确保在CPython解释器中同一时刻只有一个线程执行Python字节码。 GIL的存在对多线程…

【动态规划】【C++算法】1563 石子游戏 V

作者推荐 【数位dp】【动态规划】【状态压缩】【推荐】1012. 至少有 1 位重复的数字 本文涉及知识点 动态规划汇总 LeetCoce:1563 石子游戏 V 几块石子 排成一行 &#xff0c;每块石子都有一个关联值&#xff0c;关联值为整数&#xff0c;由数组 stoneValue 给出。 游戏中…

【JAVA-Day82】线程中断

线程中断 线程中断&#xff1a;探索 Java 中发送中断信号的方法 &#x1f6a8;&#x1f6d1;摘要 &#x1f4dd;引言 &#x1f680;正文 &#x1f4da;一、什么是线程中断 ❓二、线程什么情况下需要中断 ❓三、模拟线程中断 &#x1f6a8;四、线程中断的应用场景 &#x1f3de;…

云原生容器化-5 Docker常见操作命令

1.登录和退出docker仓库 使用docker login和docker logout分别用于登录和退出docker仓库。 #登录时携带用户名、密码、仓库地址信息 docker login --username test --password test123 192.168.0.22:8000 docker login --username seong --password 3er4#ER$ 192.168.0.22:8…

export和import

export和import是JavaScript中ES6&#xff08;ECMAScript 2015&#xff09;的模块系统的语法&#xff0c;用于实现模块的导出和导入&#xff0c;ES6 的模块系统是 JavaScript 官方标准中定义的模块化规范&#xff0c;现在的前端应用模块化已经很普及了。   export和import的技…

<网络安全>《32 网络信息安全基础(3)网络攻防知识体系》

1 信息安全网络攻防知识 1.网络安全 包括防火墙、入侵检测/防御系统&#xff08;IDS/IPS&#xff09;、安全扫描工具、安全隔离系统等。 2.操作系统安全 包括安全操作系统设计、安全编程、安全测试等。 3.应用安全 包括Web应用安全、数据库应用安全、中间件安全等。 4.数据库安…

Python内置函数03——pow

文章目录 概要基本用法注意事项 概要 Python的内置函数pow(x, y, z)返回x的y次方&#xff0c;如果有第三个参数&#xff0c;则求完幂次后对第三个数取余。 基本用法 1.计算10的2次方 a pow(10, 2) # 10的2次幂 print(a) # 1002.计算5的三次方并取模3 b pow(5, 3, 3) p…

SpringBoot3 + Vue3 由浅入深的交互 基础交互教学

说明&#xff1a;这篇文章是适用于已经学过SpringBoot3和Vue3理论知识&#xff0c;但不会具体如何实操的过程的朋友&#xff0c;那么我将手把手从教大家从后端与前端交互的过程教学。 目录 一、创建一个SpringBoot3项目的和Vue3项目并进行配置 1.1后端配置: 1.1.1applicatio…

【FFmpeg学习】视频变慢处理

视频慢动作处理是个比较常用的操作&#xff0c;可以在播放的时候处理&#xff0c;这里我们考虑把视频修改为慢动作&#xff0c;使用ffmpeg命令&#xff0c;可以这样 ffmpeg -i test.mp4 -vf "setpts5*PTS" -an test_slow3.mp4 这里把视频放慢了5倍&#xff0c;生成…

解锁未来:探秘Zxing二维码技术的神奇世界

解锁未来&#xff1a;探秘Zxing二维码技术的神奇世界 1. 引言 在当今数字化和智能化的社会中&#xff0c;二维码技术已经成为人们生活中不可或缺的一部分。从商品购物、支付结算到健康码、门票核销&#xff0c;二维码无处不在&#xff0c;极大地方便了人们的生活和工作。而Zx…

Python-2

21. 请解释Python中的深拷贝&#xff08;Deep Copy&#xff09;和浅拷贝&#xff08;Shallow Copy&#xff09;以及它们的应用场景。 在Python中&#xff0c;拷贝对象时会涉及到深拷贝&#xff08;Deep Copy&#xff09;和浅拷贝&#xff08;Shallow Copy&#xff09;两个概念…

单源最短路总结+练习题

单源最短路总结 文章目录 单源最短路总结建图方式普通无向图邻接表建图新建源点建图正反建图spfa 单源最短路综合运用dijkstradfsdijkstra二分答案 未完待续....... 建图方式 普通无向图邻接表建图 板子题 1129. 热浪 - AcWing题库 找最短路里的最长路 1128. 信使 - AcWin…

每日五道java面试题之java基础篇(九)

目录&#xff1a; 第一题 你们项⽬如何排查JVM问题第二题 ⼀个对象从加载到JVM&#xff0c;再到被GC清除&#xff0c;都经历了什么过程&#xff1f;第三题 怎么确定⼀个对象到底是不是垃圾&#xff1f;第四题 JVM有哪些垃圾回收算法&#xff1f;第五题 什么是STW&#xff1f; 第…

MySQL 基础知识(六)之数据查询(二)

目录 6 数值型函数 7 字符串函数 8 流程控制函数 9 聚合函数 10 分组查询 (group by) 11 分组过滤 (having) 12 限定查询 (limit) 13 多表查询 13.1 连接条件关键词 (on、using) 13.2 连接算法 13.3 交叉连接 (cross join) 13.4 内连接 (inner join) 13.5 外连接 …

力扣hot3--并查集+哈希

第一想法是排个序然后遍历一遍&#xff0c;but时间复杂度就超啦 并查集居然与哈希结合了&#xff08;&#xff09; 已经好久没用过并查集了&#xff0c;&#xff0c;&#xff0c;我们用哈希表f_node中来记录原结点的父节点&#xff0c;其中key是原结点&#xff0c;value是父节点…

Cannot resolve symbol ‘@+id/modifyAvatar‘

问题 Cannot resolve symbol id/modifyAvatar详细问题 笔者进行Android开发&#xff0c;创建组件id&#xff0c;报红。 鼠标放置报红处&#xff0c;提示 Cannot resolve symbol id/modifyAvatar解决方案 顶部菜单栏 → \rightarrow →Build → \rightarrow →Rebuild proje…