全部文章
共 1299 篇文章
多种方案教你实现iframe嵌套页面相互传参(父子通信)
需求描述 在工作中，我们会遇到一些需求，使用iframe嵌套另一个页面，这个页面大部分情况下不会部署在父页面相同的域名下，但是又需要父子页面进行数据交互，那么我们该怎么处理呢？ 开始上手 上代码 父页面 iframe页面 父向子传值 方法一：通过URL传参 父页面添加代码 iframe页面添加代码 方法二：通过window.postMessage()方法 父页面添加代码 iframe页面添加代码 注意事项 postMessage方法有三...
无法复现生产BUG？rrweb录制用户行为助你排忧解难！
背景 对于一些比较重要的项目，我们可能需要对这些项目中的某些网页进行特殊处理，比如记录的用户行为，这样做是有好处的，通过分析用户的行为从而对项目的流程进行优化；采集用户遇到的 bug 的操作路径，尤其是当我们无法复现生产环境的 BUG 时，录制用户行为对开发人员有很大的帮助，那么该如何实现录制用户行为的功能呢？ 关于录制用户行为需要注意两点： 必须要做到用户无感知才行，如果让用户决定是否录制，那其实就无法记录用户行为了，一般来说用户是会...
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创建的项目...