全部文章
共 1306 篇文章
搭建自动化 Web 页面性能检测系统 —— 部署篇
作为一个前端想去做全栈的项目时，可能第一个思路是 node + vue/react。一开始可能会新建多个工程目录去实现，假设分别为 web 和 server，也许还有管理后台的代码 admin，那么就有了三个工程的代码。此时为了方便管理就需要在远程仓库新建一个 group 统一管理代码，一般这种方式称之为 MultiRepo。 这显然是不够简洁的，对于开发者而言也不便于开发和部署。这类多模块的项目我们可以引入 Monore...
汇总14种JavaScript循环遍历的用法
不整理不知道，整理吓一跳，原来 有这么多不同的循环方式的，包含冷门的几个我一共整理出来 。下面将会通过尽可能简单的事例进行说明。 先直入主题看看分别是哪些循环方式： 1、for循环 2、while 循环 3、do...while循环 4、forEach循环 5、map()循环 6、for…in循环 7、for...of 循环 8、filter()过滤循环 9、some()循环 10、every()循环 11、Object.keys循环对...
老板：让文章和公司介绍可以被读出来。和公众号一样的效果
最近碰到一个需求，要实现和微信公众号一样的阅读全文的功能。 然后找到了 window.speechSynthesis 这个API，在翻阅大量资料和网站后，发现在很多资料里，关于这个api的描述都不是很齐全，或是属性值的区间没有描述，或是浏览器的支持情况没有描述。好嘛，我自己总结一个嘛。 概念介绍 window.speechSynthesis window.speechSynthesis 是 HTML5 推出的 Web API 。在支持该...
electron如何调用dll库
electron开发桌面软件时需要和硬件打交道，很多硬件只提供dll库供调用。过去一年做了很多electron适配硬件的东西，比如读卡，打印，纸币识别等，把一些开发经验分享给大家。 ， 等。 1. 首先明确dll是32位还是64位，需要用对应32位/64位的node， 安装依赖的时候(npm install)也要用对应版本node下载安装，切到32位nvm use 16 32 。 2. C和JavaScript之间的类型转换 | C |...
H5 实现 ChatGPT 语音对话效果
起因 前段时间在群里看到群友想要复刻 的语音对话效果，手痒之下自己也来复刻一波！ 难点解析 这个效果平心而论是比较复杂的，我一般会把这种比较复杂的效果简单拆解出来，然后一步一步来解决。 1. 不规则圆形，可以看到最开始时是由一个圆形过渡到不规则的圆形同时有一个滚动的效果。 2. 溶解粘滞效果，从不规则的圆形过渡到音柱时可以看到有一个粘滞溶解的效果。 3. 音柱的抖动效果，我们需要模拟收音时的不规则抖动效果来更贴近真实场景。 4. 融合拓...
poistion: sticky 失效的所有原因
在 Web 开发和设计的世界里，CSS 在创建视觉吸引力和互动性强的网站或应用方面起着至关重要的作用。当涉及到在 Web 页面上定位元素时，Web 开发者通常要让某些元素在滚动时固定在特定的位置。传统上， 属性被用于这个目的。然而，还有一个更好的替代方案，它提供了更多的灵活性和更好的用户体验 —— 。 可以说，CSS 的 是 Web 开发者梦寐以求的功能。它允许元素根据滚动位置在相对定位（ ）和固定定位（ ）之间切换，而不需要任何 Ja...
图解浏览器的多进程渲染机制
观察浏览器的任务管理器可以发现，打开浏览器的一个页面需要多个进程，包括浏览器进程、GPU进程、网络进程、渲染进程等，有插件的话还会包括各种插件进程（Chrome选项 更多工具 任务管理器）。 本文将聚焦于 浏览器的各个进程间是如何配合，将页面呈现给用户的。 📌 你将了解到 1. 浏览器在历史发展过程中，其进程架构做了哪些调整，为什么这样调整，以及解决了哪些问题？ 2. 从用户在地址栏输入URL，到页面渲染完成这之间发生了什么？回流和重...
神奇的进度条！水缸进度动画效果怎么实现的？
最近看到一个非常有趣的动画效果： 水波进度动画 ，想了一下实现思路，分享给大家 效果如下 基本组件代码 先把最基础的组件代码样式写出来，其实无非就是四个部分： 1、圆形水缸 2、水波 2、百分比数字 3、进度条 我们先把 画出来， 待会再画 可以看到初步效果已经出来了 水波效果 最重点的就是 ，其实这个 就是个障眼法罢了，我画张图你们就懂了，其实就是一个 ，一直在 ，让用户有一种水波的视觉感 所以我们可以画一个圆角正方形，并且让他一直旋...
Electron 打包Mac安装包代码签名问题解决方案
最近一直在做electron应用的打包，集成mac版本的自动更新时出现了问题。 无法获取当前应用的代码签名。 （首先声明：由于mac的签名机制，npm run dev 是肯定没有签名的，以下所述都需要在npm run build 下打正式包） 百思不得其解，试过了各种办法，研究了N遍官方文档，发现现实和书上写的还是不一样。 注意到一直是npm run build打包的时候都无法签名成功（由于无法获取开发者认证信息，跳过签名）。 针对上述...