广州网站推广￥做下拉去118cr,做商城网站需要什么资质,爱站工具包,wordpress伪静态301这里记录的是昨天和今天原篇的知识点补充
原篇地址#xff1a;
2024 前端面试题#xff08;GPT回答 示例代码 解释#xff09;No.41 - No.60 2024 前端面试题#xff08;GPT回答 示例代码 解释#xff09;No.61 - No.100 2024 前端面试题#xff08;GPT回答 示例代…这里记录的是昨天和今天原篇的知识点补充
原篇地址
2024 前端面试题GPT回答 示例代码 解释No.41 - No.60 2024 前端面试题GPT回答 示例代码 解释No.61 - No.100 2024 前端面试题GPT回答 示例代码 解释No.101 - No.113 目录 这里记录的是昨天和今天原篇的知识点补充原篇地址附1对 WEB 标准以及 W3C 的理解与认识附2Web Worker附3登录拦截怎么实现的 附1对 WEB 标准以及 W3C 的理解与认识
WEB标准是指制定Web技术规范的一系列标准包括HTML、CSS、JavaScript等。WEB标准可以保证不同浏览器在渲染网页时的表现一致性从而提高网站的兼容性和可维护性。
W3CWorld Wide Web Consortium是负责制定和推广Web标准的国际标准化组织由互联网先驱Tim Berners-Lee创立。W3C通过制定和推广Web标准推动Web技术的发展并促进Web应用的交互、互通和普及。W3C旨在确保Web技术的互操作性和可访问性以便Web上的所有用户都能够获得最佳的体验。W3C还提供了一些工具和资源帮助Web开发者更好地理解和使用Web标准如校验工具、指南和教程等。
随着Web技术的快速发展各种新的标准和技术层出不穷。但是Web标准的重要性仍然不可忽视因为它们是确保Web应用程序的稳定性、安全性和可靠性的基础。遵循Web标准可以使网站更易于维护提高搜索引擎排名以及为用户提供更好的使用体验。 附2Web 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 WorkerWeb 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)则会检查用户是否已登录未登录则重定向到登录页面已登录则允许继续访问路由。对于不需要登录权限的路由直接允许导航。
通过以上逻辑可以实现基本的登录拦截功能确保用户在没有登录的情况下无法访问需要登录权限的页面。
