全部文章
共 1299 篇文章
你能让网页也像QQ那种一样发出右下角消息吗
<span style="color: var( g headertextcolor);" 需求</span 很平常的一个工作日，「产品经理」给我发了个消息： 产品： 你能让网页也像QQ一样，来了消息能进行提示吗？我说的不是网页内的弹出消息 我： 刚搞完上个需求，别搞嗷，你小子 产品是一个比较随和的人，所以上面的对话比较随意；具体的聊天内容，我这里就省略了，跟他对话之后，他的大致需求如下： 页面中展示预警内容 检测到预警情况会通知用户且...
🪒Web端字体切割压缩方案
今天接到一个系统需求，需要将系统内的文字替换为鸿蒙OS的字体（ ），但是鸿蒙OS的字体单Regular的文件就有8M+。这个直接放到网页上，会极大影响使用体验。 于是乎，开始考虑怎么开始对字体文件进行压缩。 第一种方案 一般来说，字体格式体积由大到小排列（性能从差到好）： ttf，eot(IE8)，woff，woff2 从官网下载的鸿蒙字体是ttf格式的，尝试用了woff2格式的（ ），但是还是有4M多。对于Web端来说，还是太大了。...
H5 实现拍照选景框效果利用
背景 在实际项目中，遇到了需要唤起手机摄像头拍照的需求，最开始是通过 的方式，可以直接唤起手机相机，但是用户拍照的方向各式各样，导致后续业务处理时，没有达到预期的效果。 基于此，产品同学期望能在用户拍照时给用户一个引导框（也就是平时我们在用第三方证件拍照时的取景框效果）。经过讨论，给出了两种解决方案，一种是通过我们自研，先尝试看一下效果，第二种是使用第三方的 SDK，仅使用他们的拍照功能。 本文档仅涉及第一种，即通过我们自研的方式，实现...
封装一个H5照相机组件（放大缩小、连拍、预览、手电筒，横竖屏拍摄）
项目上有个需求就是说移动端网页中的照相机要支持连拍功能。 要知道咱们一般网页中通过input标签调用出来的照相机都是拍完后需要进行点击确认操作，然后再重新点击拍照按钮调起照相机如此往复，这样的交互方式对于需要快速拍摄照片的场景来说效率确实太低了。 如果本机摄像头无法进行连拍操作的话只能通过直接调用媒体摄像头的方式看看能否实现，考虑到开源的组件UI和交互方式可能无法满足项目需要且也不太好扩展功能所以觉得自己封装一个。 使用到的技术 Nav...
浏览器和nodejs事件循环（Event Loop）有什么区别
单线程和异步 JS是单线程的，无论在浏览器还是在nodejs 浏览器中JS执行和DOM渲染共用一个线程，是互斥的 异步是单线程的解决方案 1\. 浏览器中的事件循环 异步里面分宏任务和微任务 宏任务：setTimeout，setInterval，setImmediate，I/O，UI渲染，网络请求 微任务：Promise，process.nextTick，MutationObserver、async/await 宏任务和微任务的区别：微...
“同学，谈谈你对vue3 响应式原理的理解”
深入解析 Vue 3 的响应式原理涉及其核心实现细节和底层机制，主要包括 的使用、依赖收集与触发、以及性能优化策略。 1\. 响应式系统概述 Vue 3 的响应式系统基于 对象来实现数据的自动追踪和更新。 的主要作用是拦截对对象属性的操作（如读取、写入等），并允许开发者定义自定义行为。 2\. 响应式对象的创建 2.1 的使用 构造函数接收两个参数： 目标对象 ：即需要被代理的原始对象。 处理器对象 ：定义了一系列拦截操作的方法（如 、...
H5移动端-解决点击输入框时页面自动放大的问题
问题 在移动端项目，我们常遇到的一个问题：用户点击输入框时，页面会不期望地发生自动缩放，这既打断了用户的输入流程，也影响了整体的用户体验。 我们的目标是优化这一行为，确保用户在点击输入框时，页面能够保持稳定，仅允许用户专注于内容的输入，从而提升产品的可用性和满意度。 解决前后效果对比 方案 针对移动端点击输入框导致页面自动缩放的问题，我们需要根据不同操作系统（主要是安卓与iOS）采取差异化的解决方案。 安卓：通常可以通过在HTML文档头...
JavaScript 内存泄漏：识别与防范
导读 内存泄漏是指程序在不再需要某些对象时，未能释放这些对象所占用的内存，导致内存占用持续增加，最终可能导致系统性能下降甚至崩溃。 在 JavaScript 中，由于其垃圾回收机制（Garbage Collection），内存管理通常由运行时环境自动处理。然而，内存泄漏仍然可能发生，特别是在长时间运行的应用程序中。本文将介绍JavaScript内存泄漏的常见原因及其预防方法。 常见的内存泄漏类型 以下是 JavaScript 中一些常见...
Web浏览器中的JavaScript事件循环机制
JavaScript是一门单线程语言，但通过事件循环（Event Loop）机制，它能够处理异步操作，实现非阻塞的I/O模型。让我们深入了解Web浏览器中的事件循环机制。 事件循环的基本概念 事件循环主要由以下几个部分组成： 1. 调用栈（Call Stack）：用于存储正在执行的函数调用。 2. 堆（Heap）：用于存储对象。 3. 任务队列（Task Queue）： 宏任务队列（Macrotask Queue） 微任务队列（Micr...