全部文章
共 1306 篇文章
7 种常见的前端攻击
大家都知道，保证网站的安全是十分重要的，一旦网站被攻陷，就有可能造成用户的经济损失，隐私泄露，网站功能被破坏，或者是传播恶意病毒等重大危害。所以下面我们就来讲讲7 种常见的前端攻击。 1\. 跨站脚本 (XSS) 跨站脚本攻击 (XSS) 是一种注入攻击，攻击者通过将恶意脚本注入到网页中，欺骗用户浏览器执行，从而窃取用户敏感信息或破坏网站。XSS 攻击是 Web 应用程序中最常见的安全威胁之一，也是造成重大安全事故的常见原因。 攻击方式...
JavaScript 连接蓝牙&传输数据！
需求背景 最近项目上接到一个新的需求： ！ 以下是关于这个需求的 ： 支持主流浏览器 ：如 Chrome、Firefox、Safari 等以及不同操作系统（如 Windows、macOS、Linux 等）。 蓝牙连接 ：用户能够通过浏览器自动搜索并连接到附近的蓝牙打印机。 文件打印 ：用户可以选择本地文件（如 PDF、Word、图片等格式）并通过蓝牙打印机进行打印。 用户界面 ：提供一个简洁明了的用户界面，方便用户选择打印机、上传文件和...
Next.js 项目写 Tailwind CSS 基本都会遇到的两个问题
前言 目前 Tailwind CSS 在 GitHub 有 80k Stars、Npm 周下载量 733W，已经成为前端主流的 CSS 框架。 而 Next.js 脚手架默认集成 Tailwind CSS，创建项目后便可直接使用 Tailwind CSS。 Tailwind CSS 看似使用简单，其实也有一些“门道”在其中。本篇我们就来聊聊 Next.js 项目写 Tailwind CSS 时会遇到的一些问题以及如何解决。 初始化项目...
Nextjs首屏加载速度性能从80分优化到98分
google控制台的网络network去看首次加载资源请求是否有重复加载的情况 google控制台的performance来录制首屏加载过程的文件时长以及阻塞情况,避免一些首次加载无须展示的组件的优化 \ 打包size优化,@next/bundle analyzer可视化的检查页面和打包的资源大小,然后针对性去优化 选择性能指标检测工具我用的 更好的了解真实用户的体验 以上是对性能可视化和测试的工具,方便针对性优化 首先对图片,css进...
React | 浏览器刷新，会执行 useEffect 的 卸载函数吗？
React | 浏览器刷新，会执行 useEffect 的 卸载函数吗？ 需求描述 后端在跑一个长期的异步上传任务，在任务执行过程中，用户刷新页面（f5），此时产品希望能够发送一个 kill 任务，杀掉这个任务。 拆解 需求合理性 其他情况是否存在类似：比如关闭 tab，关闭浏览器，突然断网等操作，等浏览器层级或者异常的用户行为 前端是否应该响应这种行为：对于更深层次的需求处理 根本问题点，或者说为什么会存在这个需求：上一个任务会加锁，...
shadcn-ui 一个真·灵活的组件库
当前主流组件库的问题 我之前使用过很多组件库，比如 MUI，AntDesign，ElementUI，等等。他们都是很出名的组件库。 优点就不说了。他们的缺点是不灵活。 不灵活有 2 个原因。 生态不开放 第 1 个不灵活的原因是我感觉选了一家之后，就得一用到底，没有办法使用其他派系的组件了，比如我觉得 MUI 中的表格不好，Ant Design 的表格好，但是我无法在 MUI 中使用 AntDesign 的表格组件，因为在一个项目中无法...
uni-app小程序超过2M怎么办
开发版可以调整上限为4M 开发者工具 详情 本地设置 预览及真机调试时主包、分包体积上限调整为4M 勾选 上传代码时，主包必须在2M以内。 小程序tabbar页面必须放在主包。 推荐除了tabbar页面以外，其余的都放在分包。其实只要这样做了，再复杂的小程序，主包代码都很难超过2M，但如果是 uni app 开发的，那就不一定了。 开发环境压缩代码 使用cli创建的项目 在 ， 中设置压缩：在命令中加入 使用hbuilderx创建的项目...
一个 API,带你打开前端摄像头之门
当然不想了解就直接跳转看完整代码 获取设备列表 获取视频流 需要注意的是,此功能仅在本地环境或者线上的安全环境（HTTPS）下可用 言归正传,在日常业务开发中,我们经常会遇到调用摄像头的场景 最常见的就是前端调用摄像头,然后生成一张照片,用于业务开发 常规开发 首先我们来看看常规开发模式 代码其实非常简单,直接上代码(已附上完整注释) 渲染视频流 拍照功能 常规的思路,我们肯定是截取 video 的某一帧,然后渲染到 canvas 上面...
不会才知道并不是所有的mp4视频都能被video标签播放吧？
今天遇到个奇怪的bug，好好一个mp4视频在本地所有设备均可正常播放，但是上传至cos之后插入富文本，发现video标签只能识别出音频，并无视频。排查半天才找出问题所在，特此记录一下！欢迎各位看官关注作者的微信公众号 ，获得最新技术分享。 首先video标签并不能解析所有视频编码格式，它只支持MPEG4，Ogg，WebM 三种视频格式。支持的视频格式及编码格式如下： 但是，video标签对这三种视频格式是有具体要求的 Ogg = 带有...