Performance的使用攻略
Performance是Chrome浏览器自带的性能监测工具。根据我的使用，简单理解就是我们可以通过它录制一段时间的浏览器活动，通过活动的数据去分析页面是否存在提升的空间。想要获取页面的活动数据，那我们的第一步便是录制浏览器的活动。 打开F12，进入Perfomance标签页，我们可以看到出现了提示。我们不想看这个文本在说什么，我们只想马上开始用（不是），由于我已经百度翻译过了（不是，看过了），所以文本提示是在说箭头所指的地方，实心圆代...
Vue3嵌套路由中使用keep-alive缓存多层的实现
目录 前言 Demo项目结构 路由层级扁平化 给所有的 router view 都嵌套上 keep alive 前言 是Vue中的缓存标签， 组件在标签中的内容会被缓存下来;但是在多层嵌套的 中， 只能缓存到该层下的 ， 由于路由嵌套比较常见，所以这里提供两种我觉得OK的解决方案。 解决思路 路由层级扁平化，在路由守卫中执行一个拍平的函数，将需要缓存的路由提升到第一层，这样处理会影响到路由层级，最直白的影响如对 面包屑 等功能有直接影响...
完美解决vue3 keep-alive多个路由使用同一个组件的缓存问题
之前页面少的话 用keep live结合router view，使用keep live的include属性就可以自己决定keep live缓存那些组件不缓存那些组件，直到遇到个问题。 平时写的代码如下： 其中 visitedViewPaths表示的是一个放Component name的数组，可以去看文档 如果配置的路由A用A组件，路由B用A组件，因为include属性是靠组件的name来决定缓存与不缓存的，还有这种情况，路由里配置的{...
极致爽文，tsx、jsx语法应用vue3
JSX语法让程序员体验到前所未有的舒爽，而在Vue3中，快速过渡到TSX也是轻而易举的。除了下文介绍的TSX用法外，其他方面与Vue3的使用方式并无二致。TSX所需学习的内容并不繁杂，只是稍微改变了开发习惯，取消了模板语法，让我们能够像编写JavaScript一样书写页面。 通过执行 来创建一个Vue工程。 工程地址 你可以在以下地址找到本文使用的工程示例： 组件定义：defineComponent 在Vue3中， 是一个用于定义组件的...
浏览器节能机制导致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提供的 中，简单点理解，你其实可以把它当作浏览器，就是用来展现页面内容的。目前移动端主流系统分为 与 ，然而两者提供的 容器也存在着诸多差异，今天我们就只探讨两者软键盘带来的影响。 首先，我们先来写个简...