浏览器节能机制导致Websocket断连的巨坑
点击上方 前端Q，关注公众号 回复加群，加入前端Q技术交流群 作者：tager https://juejin.cn/post/7362576319928008755 你踩过吗？浏览器节能机制导致Websocket断连的坑 近期，在使用 连接时遇到了频繁断连的问题，这种情况在单个用户上每天发生数百次。尽管利用了 的自动重连机制能够在断连后迅速恢复连接，但这并不保证每一次重连都能成功接收 消息。因此，我们进行了一些的排查和测试工作。 最终发...
SPA项目频繁上线导致白屏？最佳实践来了
<span style="color: var( g textcolor);" 背景是我们团队有个项目，上线后，偶尔会听到有人反馈说页面白屏了，刷新页面才好，因为有相当的机率复现，就排查原因。最后发现与SPA有关。</span 什么是SPA SPA是"单页应用程序"（Single Page Application）的缩写，与传统的多页应用程序（Multi Page Application，就是原生的一个个的HTML）相对应。 在传统的多...
vue下拉刷新组件的开发及slot的使用
“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要，这里笔者由曾经做过的vue项目中的“blink”功能和各位探讨下【下拉刷新】组件的开发： JavaScript正式开篇 在前端项目的 components 文件夹下新建 pullRefreshView 文件夹，在其中新建组件 index.vue：（它代表“整个屏幕”，通过slot插入页面其他内容而不是传统的设置遮罩层触发下拉刷新） 首先需要编写下拉刷新组件的 temp...
深入浅出HTTP2预检请求（CORS Preflight Request）_跨域预检请求
前言 在现代Web开发中， （Cross Origin Resource Sharing，简称CORS）是一项关键技术，它允许浏览器在不同源之间安全地执行Ajax请求。当一个来自不同源的请求涉及到一些特殊 HTTP 头部或者方法时，浏览器会先发送一个称为“预检请求”（Preflight Request）的OPTIONS请求以确认服务器是否允许这样的实际请求。本文将详细介绍预检请求的工作原理、应用场景以及相关配置。 什么是预检请求？ 预检...
如何巧妙应对iOS键盘难题
前言 写过移动端的同学或多或少都遇到过软键盘带来的各种各样的问题，最典型的就是输入框被软键盘遮挡、fixed元素失效等问题，并且这些问题在iOS上的表现让人难以接受。 webview的差异 在移动端上，我们的H5页面一般是运行在宿主APP提供的 中，简单点理解，你其实可以把它当作浏览器，就是用来展现页面内容的。目前移动端主流系统分为 与 ，然而两者提供的 容器也存在着诸多差异，今天我们就只探讨两者软键盘带来的影响。 首先，我们先来写个简...
vite+vue3实现低版本浏览器兼容的解决方案（白屏问题）
前言 项目全线使用vue3的时候，自然使用的是配套更加契合的vite打包工具，于是自然而然会用到很多新的语法，比如这两年开始普及的可选链语法，这个语法都已经纳入声呐的代码规范中了，但是vite自身打包的时候，并不会做过多的兼容处理。 默认情况vite的兼容目标是支持 原生ES模块 ， 原生ESM动态导入 和 的浏览器，官方预设的兼容目标如下： 1. es2020 2. edge 88 3. firefox 78 4. chrome 87...
Vite 的实现原理，确实很巧妙
vite 是新兴的构建工具，它相比 webpack 最大的特点就是快。 那它是如何做到这么快的呢？ 因为 vite 在开发环境并不做打包。 我们创建个 vite 项目： 安装依赖，然后把服务跑起来： 浏览器访问下： 本地是 main.tsx 引入了 App.tsx，并且还有 react 和 react dom/client 的依赖： 用 devtools 看下： 可以看到，main.tsx、App.tsx 还有 react 和 reac...
vue3+vite 安卓8.0下打开白屏问题记录
问题：vue3+vite 开发移动端应用，上线后现场反馈安卓8.0下进入页面白屏 分析：原因就是因为语法兼容问题。根据vite官方文档描述， 默认支持 Chrome =87、Firefox =78、Safari =14、Edge =88 ，所以需要我们手动兼容低版本。 处理方案： 增加打包兼容代码 vite.config.js下增加 打包运行发现依然白屏。 请注意，默认情况下 Vite 只处理语法转译，且 默认不包含任何 polyfil...
Zustand不仅使用起来简单，源码更简单
说起 Zustand，很多使用 React 的小伙伴肯定不陌生 它是一个 React 状态管理库，类似于 Redux、Mobx 一起来看下 Zustand 的周下载量，大概在 250w，妥妥的第一梯队 再来看下 Zustand 的 github 标星，截止目前（2024 3 27）已经有 41.6k，妥妥的高赞仓库 如此优秀的 React 状态管理库不得不研究下。 顺便说一下，Zustand 的作者写了三个状态管理库，凭借一己之力，搅混...