![](https://img-blog.csdnimg.cn/2019092715111047.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
web前端/面试
文章平均质量分 79
web前端/面试
油墨香^_^
想要敲出漂亮的代码, 就要暴露在全世界的眼睛下!
展开
-
两种方法解决 this 在validator中不能使用
【代码】两种方法解决 this 在validator中不能使用。转载 2024-06-05 09:21:43 · 18 阅读 · 0 评论 -
世界500强面试题 | 这个你一定要看!(二)
这不是强制性的,但我认为这样的着装体现了对打算雇用我的公司及面试过程的尊重。面试官所问的问题是不一样的,不过许多问题都与我过去的经验有关,有些还带有玩笑的性质,比如“你如何让Google从Linux操作系统转换为Windows操作系统?他们问了我一些问题,以确信我的经历与简历上描述的内容相符,同时也为了避免在之后时间较长的面试中出现令他们尴尬的事情。这时,你在判断问题出在哪里时,会依次采取怎样的做法?如果你应聘的是程序设计员的工作,那么他们会提一些逻辑性问题,并要求你能够在白色书写板上用编码的方式思考。原创 2024-06-05 09:13:29 · 257 阅读 · 0 评论 -
世界500强面试题 | 这个你一定要看!(一)
想方设法让你的回答能够拉近你与面试官之间的关系,并表明你作为这个职位的应聘者,有着自己的优势。★你有一袋糖,有红色的,蓝色的,绿色的。★如果你有两个桶,一个装的是红色的颜料,另一个装的是蓝色的颜料。通过算术的方式来证明这一点。它们可能非常有诱惑力,让你戒备心全无,从而中了面试官的圈套,展现出自己的方方面面,包括你原本不打算暴露出来的某些个性。假如这项工作要求你具有创新精神,那么你可以说:“是的,我会上去,去见见曾经在这个星球上走过的那些最具有创新精神的人,问问他们最喜欢用什么方式来让自己尽可能保持创造力。原创 2024-06-05 09:12:02 · 286 阅读 · 0 评论 -
Vite为什么比Webpack快
Vite在本地能更快的根本原因,是借用了浏览器原生ESM能力,从而跳过了生成bundle的时间,再加上能够不依赖第三方插件将编译结果缓存,而且esbuild自身的也有着更快的运行速度,从而实现了Vite快速的冷启动。转载 2024-06-03 08:57:04 · 19 阅读 · 0 评论 -
深入JS执行原理:一文搞定 EventLoop、宏任务、微任务
在事件循环中,当主线程执行完当前的同步任务后,会检查事件队列中是否有待处理的事件。如果有,主线程会取出事件并执行对应的回调函数。这个循环的过程被称为事件循环(Event Loop),它由主线程和任务队列两部分组成。主线程负责执行同步任务,而异步任务则通过任务队列进行处理。这种机制保证了异步任务在适当的时机能够插入执行,从而实现了JavaScript的非阻塞异步执行。事件循环流程事件循环流程如下:主线程读取JavaScript代码,形成相应的堆和执行栈。转载 2024-05-31 08:42:00 · 14 阅读 · 0 评论 -
前端实现电子签名(web、移动端)通用组件
在现在的时代发展中,从以前的手写签名,逐渐衍生出了电子签名。电子签名和纸质手写签名一样具有法律效应。电子签名目前主要还是在需要个人确认的产品环节和司法类相关的产品上较多。举个常用的例子,大家都用过钉钉,钉钉上面就有电子签名,相信大家这肯定是知道的。那作为前端的我们如何实现电子签名呢?其实在html5中已经出现了一个重要级别的辅助标签,是啥呢?那就是canvas[1]。canvasCanvas(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用。转载 2024-05-30 08:49:28 · 105 阅读 · 0 评论 -
前端面试必考题:介绍项目和项目难点
【面试官提问】介绍一下你近期(半年之内)做过的一个项目【面试官提问】介绍一下项目中的一个难点或者成就。转载 2024-05-29 09:15:22 · 36 阅读 · 1 评论 -
如何设计一个支持并发的前端缓存接口?
promise封装并发缓存到这里就结束啦,不过看到这里你可能会觉着没啥用处,但是其实这也是我碰到的一个需求才延申出来的,当时的场景是一个页面里有好几个下拉选择框,选项都是接口提供的常量。但是只接口提供了一个接口返回这些常量,前端拿到以后自己再根据类型挑出来,所以这种情况我们肯定不能每个下拉框都去调一次接口,只能是寄托缓存机制了。这种写法,在另一种场景下也很好用,比如将需要用户操作的流程封装成promise。例如,A页面点击A按钮,出现一个B弹窗,弹窗里有B按钮,用户点击B按钮之后关闭弹窗,再弹出C弹窗C。转载 2024-05-29 09:10:19 · 5 阅读 · 0 评论 -
前端调取摄像头并实现拍照功能
知道了这个前提,那么举一反三,我们就可以明白,虽然我们现在已经打开了摄像头,看到的视频好像是在连贯展示,但其实它也是一帧一帧拼到一起的。我们先看一下这个对象有哪些方法,你也许会看到下面的场景,会发现这个属性身上只有一个值为 null 的 ondevicechange 属性,不要怕,真正要用的方法其实在它的原型身上。,从这个名字你就能才出来,肯定和我们将要在画笔里画画的元素的宽度和高度有关,是的,你猜的没错,它就好像你设置一个 div 元素的高度和宽度一样,代表着你将在画布上画的截图的宽高属性。转载 2024-05-29 08:53:39 · 6 阅读 · 0 评论 -
跨页面通信的方式有哪些?
面试官:跨页面通信的方式有哪些?我:1. Web Worker;2.本地存储;3.postMessage等面试官:本地存储都有哪些?我:localStorage,sessionStorage,cookie。面试官:sessionStorage可以吗?我:不可用吧?面试官:localStorage新开页面和当前页面open新页面都可以吗?我:都可以吧?....有没有经历过面试用跨页面通信的问题不断深入的摧残你,但是你又不能给出明确回答的经历。巧了在下就经历过这个过程。转载 2024-05-29 08:51:11 · 6 阅读 · 0 评论 -
Vue每日面试题
路由参数是在路径中可见的,而查询参数则是在路径后以键值对的形式附加的。路由参数使用动态的路径片段(例如:id),而查询参数使用?和键值对(例如?id=123路由参数通常通过路径进行传递,而查询参数通过URL中的查询字符串传递。路由参数通常用于标识资源,而查询参数通常用于过滤或配置。你可以在 Vue 实例化之前通过方法全局注册一个自定义指令。// 全局注册自定义指令 'v-custom'// 在元素插入父节点时触发},// 在元素所在的 VNode 更新时调用。转载 2024-05-28 10:45:30 · 12 阅读 · 0 评论 -
30 个 JavaScript 单行代码,让你成为 JavaScript 奇才
【代码】30 个 JavaScript 单行代码,让你成为 JavaScript 奇才。转载 2024-05-28 09:07:23 · 26 阅读 · 1 评论 -
2023年中前端面试真题之Vue篇
在 Vue.js 中,指令(Directives)是一种特殊的 token,可以在模板中使用,以表示对 DOM 元素的行为。指令以v-开头,后面跟着指令的名称,例如v-bindv-if等。指令用于将模板中的数据与 DOM 元素进行绑定,控制元素的显示、隐藏、渲染和行为等。以下是一些常用的 Vue 指令以及它们的作用:这些指令使你能够轻松地在模板中操作 DOM 元素,根据数据的变化实现视图的动态更新。每个指令都有自己的特定作用,让你能够以声明性的方式定义页面的交互和逻辑。转载 2024-05-28 09:06:23 · 16 阅读 · 0 评论 -
每个前端都要学的前端自动化部署、Devops、CI/CD
ding1.jpg3,定义机器人名字和关键字,创建完成后先将。转载 2024-05-27 09:35:07 · 14 阅读 · 0 评论 -
面试官:JS 如何实现一个 sleep/delay 函数
服务器也可以在响应头中包含一个 Last-Modified 值,表示资源的最后修改时间。客户端在条件请求中通常会发送一个 If-Modified-Since 头,其中包含上次获取资源时的最后修改时间。如果服务器的资源最后修改时间与客户端发送的 If-Modified-Since 值相同或更早,服务器就会返回 304 状态码,表示资源未被修改。转载 2024-05-27 09:32:47 · 70 阅读 · 0 评论 -
面试官:post为什么会发送两次请求?
同源策略是一个重要的安全策略,它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。如果两个 URL 的协议、主机和端口都相同,我们就称这两个 URL 同源。协议:协议是定义了数据如何在计算机内和之间进行交换的规则的系统,例如 HTTP、HTTPS。主机:是已连接到一个计算机网络的一台电子计算机或其他设备。网络主机可以向网络上的用户或其他节点提供信息资源、服务和应用。使用 TCP/IP 协议族参与网络的计算机也可称为 IP 主机。转载 2024-05-27 09:29:48 · 22 阅读 · 0 评论 -
中高级前端必须掌握的package.json最新最全指南
1. 减小打包体积:例如使用react开发的组件库,安装react是必不可少的,而使用组件库的开发者,本地项目肯定安装了react,因此开发的组件库中不必把react打包进去(期望项目的使用者来提供这些模块的实现)。非官方字段是被主流打包工具(webpack,Rollup)所支持, 旨在提供更高级的配置和功能,以满足特定的构建需求,可能不具备通用性。2. 版本一致性:使用你的组件库的开发者需要确保他们项目中安装了与你声明的对等依赖版本兼容的包,以确保组件库正常运行。转载 2024-05-27 08:48:13 · 250 阅读 · 0 评论 -
什么情况下会发送 OPTIONS 请求
在发送请求时往往会带上。原创 2024-05-27 08:43:51 · 125 阅读 · 0 评论 -
如何删除一个 cookie
的过期时间改为过去时即可删除成功,具体操作的话可以通过操作两个字段来完成。: 将要过期的最大秒数,设置为。: 将要过期的绝对时间,存储到。处理,设置为过期时间即可删除。转载 2024-05-27 08:43:25 · 23 阅读 · 0 评论 -
在浏览器中如何监听剪切板中内容
可以获取剪切板中内容,但需要获取到。转载 2024-05-27 08:43:04 · 39 阅读 · 0 评论 -
10 个 Web API
使用Proxy API可以方便地实现这些功能。使用场景:在Web应用中,可能需要实现无限滚动、懒加载等功能,使用IntersectionObserver可以方便地实现这些功能。使用场景:在Web应用中,可能需要实现音频播放、音效处理等功能,使用AudioContext可以方便地实现这些功能。使用场景:在某些情况下,可能需要动态调用对象的方法或构造函数,使用Reflect API可以方便地实现这些功能。使用场景:在某些情况下,可能需要定义对象的私有属性或方法,使用Symbol可以方便地实现这些功能。转载 2024-05-23 09:07:26 · 5 阅读 · 0 评论 -
21 个简洁的 JavaScript单行代码示例技巧
使用 Math.random()、Math.floor() 和一点算术,我们可以生成指定范围内的随机数。此单行代码使用 split()、reverse() 和 join() 方法来反转给定的字符串。使用 Array.from() 方法和箭头函数,我们可以生成给定范围内的数字数组。使用扩展运算符和 Math.max() 方法,我们可以轻松找到数组中的最大数字。通过使用负数组索引和 slice() 方法,我们可以轻松检索数组中的最后一项。通过将数组的总和除以它的长度,我们可以计算出数字的平均值。转载 2024-05-23 08:53:37 · 9 阅读 · 0 评论 -
谷歌浏览器Chrome 117 Beta又上新功能
Chrome 117 Beta 版本新增了 CSS 网格子网格(subgrid)、入场和出场动画支持,以及 CSS、数组分组、迭代器辅助功能等功能。接下来我们就带大家详细的认识一下这些新特性~转载 2024-05-23 08:49:42 · 28 阅读 · 0 评论 -
js Object.preventExtensions()方法
从上面demo中可知,Object.preventExtensions(obj)会阻止传入的obj中添加新的属性,但是删除属性和修改属性值都是可以的,同时可以通过Object.isExtensible(obj)方法来判断obj对象是否可扩展,严格来说是判断obj对象在属性上是否可扩展添加新属性。从上述例子中可知,Object.preventExtensions(obj)执行后,obj的原型obj.__proto__是可以添加新的属性的,但是不能被重新赋值。转载 2024-05-22 09:09:23 · 13 阅读 · 0 评论 -
前端简洁架构【总结】1773- 前端简洁架构陆晨杰 前端自习课 2023-08-14 08:07 福建原文链接:https://dev.to/bespoyasov/clean-architectu
领域中的功能是独立的,它更容易测试。如果应用程序的一部分是用TypeScript编写的,而另一部分是用另一种语言编写的,那么共享内核可能只包含可以在两部分中使用的代码。是的,通常付款是在服务器上完成的,但这是一个示例,让我们在客户端上完成所有操作。在这些示例中,我们不过多关注这一点,有两个原因:它会分散主要观点的注意力,并且如果自己的辅助函数仅使用语言特性,依赖于它们并没有什么问题。将物品添加到购物车的函数并不关心该物品到底是如何添加的:是由用户自己通过 "购买"按钮添加的,还是通过促销代码自动添加的。转载 2024-05-22 08:47:31 · 9 阅读 · 0 评论 -
2024前端面试实战篇
Dockerfile 的最佳实践」「关于 sed 命令的常见报错和解决方法」Suspense:Suspense 是一个新的 React 组件,它用于处理组件的懒加载过程中可能发生的加载延迟。你可以使用 Suspense 包装一个或多个懒加载组件,并提供一个 fallback 属性,以指定在加载懒加载组件时要显示的占位符。转载 2024-05-21 08:53:57 · 9 阅读 · 0 评论 -
JavaScript this解析
默认绑定是指在独立函数调用时,this 会绑定到全局对象(在浏览器环境中是 window,在 Node.js 环境中是 global)。在严格模式下,默认绑定会将 this 绑定到 undefined。箭头函数的 this 值在函数创建时就已经确定,并且会捕获外部函数的 this 值。当一个函数被用作构造函数来创建对象时,this 会绑定到正在创建的新对象。当函数作为对象的方法被调用时,this 会绑定到调用该方法的对象。转载 2024-05-20 10:03:14 · 5 阅读 · 0 评论 -
前端面试之网络模型
在客户端与服务器中经常会有数据的请求,这个时候就是会用到http(hyper text transfer protocol)(超文本传输协议)或者https.在后端设计数据接口时,我们常常使用到这个协议。它是网络通信的最高层,提供了各种应用程序和协议,如HTTP(用于Web浏览器)、SMTP(用于电子邮件)等。FTP是文件传输协议,在开发过程中,个人并没有涉及到,但是我想,在一些资源网站,比如百度网盘、迅雷应该是基于此协议的。表示层负责数据的编码、压缩和加密,以确保数据在不同系统之间的互操作性。转载 2024-05-20 09:57:31 · 10 阅读 · 0 评论 -
前端面试之HTTP协议(上)
该系列主要分享前端面试中计算机网络基础相关知识,其中包括:HTTP协议(一)HTTPS协议DNS协议网络模型TCP与UDPwebsocket总结全网最全面的前端计网相关面试题,由于内容涵盖范围大,系列文章分为一、二、三...篇幅。转载 2024-05-13 08:50:00 · 26 阅读 · 0 评论 -
前端项目重构的深度思考和复盘
项目重构是每一家稳定发展的互联企业的必经之路, 就像一个产品的诞生, 会经历产品试错和产品迭代一样, 随着业务或新技术的不断发展, 已有架构已无法满足更多业务扩展的需求, 所以只有通过重构来让产品“进化”, 才能跟上飞速发展的时代浪潮.转载 2024-05-10 08:44:12 · 73 阅读 · 0 评论 -
面试官:你能停止 JavaScript 中的 forEach 循环吗?
我对面试官说:“哦,也许你是对的,你设法在 JavaScript 中停止了 forEach,但我认为你的老板会解雇你,因为这是一个非常糟糕的代码片段。在面试官回答之前,我花了一些时间解释我对为什么我们不能直接停止 JavaScript 中的 forEach 循环的理解。是的,当我们使用“forEach”迭代数组时,回调将为数组的每个元素执行一次,并且我们无法过早地摆脱它。例如,在下面的代码中,即使“func1”遇到break语句,“2”仍然会输出到控制台。是的,它会输出‘0’、‘1’、‘2’、‘3’。转载 2024-05-10 08:43:42 · 30 阅读 · 0 评论 -
vue3项目页面首次加载慢优化
使用了gzip压缩以后,首次加载的时间就很短了,当然还有其他优化的方法需要去尝试,比如服务端渲染、预渲染、使用在线cdn等。转载 2024-05-10 08:39:03 · 235 阅读 · 0 评论 -
JavaScript设计模式:让你的代码像个天才!
抽象工厂模式提供了一种封装一组具有相同主题的单个工厂的方式。它有一个接口,用于创建相关或依赖对象的家族,而不需要指定实际实现的类。// 创建一组主题对象类型的抽象类// 创建一组具体代表家族的对象// 创建一个抽象工厂// 创建具体工厂类// 使用具体工厂类来创建相关的对象。转载 2024-05-10 08:36:41 · 5 阅读 · 0 评论 -
【无标题】
当今的Web开发中,图形和动画已经成为了吸引用户注意力的重要手段之一。而Pixi.js作为一款高效、易用的2D渲染引擎,已经成为了许多开发者的首选~~(我吹的)~~。本文将介绍PixiJS的基础知识和使用方法,希望可以光速入门,掌握Pixi.js的用法。实际工作中我还没有用上Pixi.js,本文只是记录我的学习过程。将我认为入门时需要掌握的知识点记录下来。所以,你们懂的,太难的问题我回答不上,或者我会用拆特鸡皮蹄敷衍你。转载 2024-05-10 08:34:44 · 5 阅读 · 0 评论 -
JavaScript数组方法大全
与indexOf一致,只不过是返回最后的索引位置,也可以理解为他是从数组的右边开始往左找元素,并返回第一个找到的元素的索引,没找到则返回-1//所有的结果恰恰与indexOf反过来了//返回索引值//5//查找6,从索引为3的位置开始找//2。转载 2024-05-09 16:54:22 · 9 阅读 · 0 评论 -
Vue刨根问底虚拟DOM
虚拟DOM是一个有力的工具,但并不是适用于所有情况的解决方案。总结,DIFF算法的原理是通过递归比较两个树的节点,并标记需要更新、替换、插入、移动或删除的差异,以减少对真实DOM的操作,提高性能。总结,虚拟DOM的真正意义在于它作为一种性能优化技术,通过在JavaScript中构建和操作虚拟DOM树,减少不必要的DOM操作,提高前端应用的性能和用户体验。总结,虚拟DOM是前端框架中的一种性能优化技术,通过在JavaScript中构建和操作虚拟DOM树,减少不必要的DOM操作,从而提高页面的性能和用户体验。转载 2024-05-09 16:53:02 · 11 阅读 · 0 评论 -
拒绝面试唯唯诺诺(React面试题25k字)
在 Redux 中,定义 action 是通过创建一个普通的 JavaScript 对象来完成的。type:这是一个字符串,用于描述 action 的类型,通常是一个唯一的标识符,表示你想执行的操作。payload(可选):这是一个包含与 action 相关数据的属性。它可以是任何类型的数据,如字符串、数字、对象等,具体取决于你的应用需求。// 定义 action 类型// 创建一个 action 创建函数,它返回一个 action 对象return {转载 2024-05-09 16:52:39 · 17 阅读 · 0 评论 -
JavaScript每日面试题
使用export导出的内容需要使用相应的名称进行引入,而导出的内容可以使用任意名称。一个模块可以有多个export,但只能有一个。在导入时,export导出的内容需要用花括号{}包裹,而导出的内容则不需要。转载 2024-05-09 16:50:55 · 11 阅读 · 0 评论 -
SPA(单页面应用)首屏加载速度该如何优化
SPA(单页面应用)是一种Web应用程序架构,它通过在加载应用程序时将所有必需的HTML、JavaScript和CSS资源一次性加载到浏览器,然后通过JavaScript动态地更新页面内容,而不是在用户与应用程序交互时重新加载整个页面。"首屏加载"(首屏渲染)是指在用户第一次访问网页时,浏览器加载并显示的页面内容。在SPA中,由于所有必需的资源在首次加载时被请求并传输到客户端,因此首屏加载通常包括应用程序的整个骨架和初始数据。转载 2024-05-09 14:29:08 · 143 阅读 · 0 评论 -
Vue中的插槽(Slot)
具名作用域插槽的工作方式也是类似的,插槽props可以作为v-slot指令的值被访问到:v-slot:header="props",也可以直接缩写成#header="props",这是缩写形式。其实从打印结果可以看出,slot本质就是Proxy代理的对象,属性名就是各个插槽的名字,属性值就是对应的函数,调用函数得到的结果就是虚拟结点。作用域插槽是一种特殊的插槽,它允许我们在插槽内部访问组件实例的数据,允许父组件将数据传递到子组件中,并在子组件中使用。定义作用域插槽,并在使用组件时,使用。转载 2024-05-08 08:36:23 · 59 阅读 · 0 评论