随笔分类 - 前端
摘要：8.12MessageChannelMessageChannel 常用于主线程与 Web Worker 线程之间的通信，尤其是当需要在Worker完成计算或处理后，向主线程报告结果时 0. 避免宏任务队列堵塞：在某些场景下，使用setTimeout或Promise来延迟执行可能不够精确或会导致不必要
阅读全文
摘要：Vue CLI 项目页面打开时间优化：从16秒到2秒内 - dev-zuo 技术日常在日常开发中，经常要写一些 demo 来测试一些功能，于是专门新建了一个 github 仓库来管理，方便积累。这次想着把 vue demo 部署到服务器，方便 PC/手机 实时看效果。于是把 vue-cli 项目 n
阅读全文
摘要：useEffect 将组件连接到外部系统，处理网络、浏览器、DOM、动画、使用不同 UI 库编写的小部件以及其他非 React 代码。 useInsertionEffect 在 React 对 DOM 进行更改之前触发，库可以在此处插入动态 CSS 默认情况下，当一个组件重新渲染时， React 将
阅读全文
摘要：前端领域提升性能，可以考虑以下几个关键方向： 网络优化： 减少HTTP请求：通过合并文件、使用雪碧图、CSS内联小图片等方式减少请求次数。开启HTTP/2或HTTP/3：利用多路复用、头部压缩等特性提升传输效率。DNS预解析：使用<link rel="dns-prefetch">预解析DNS，减少域
阅读全文
摘要：em整理： 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em,10px=0.625em。为了简化 font-size 的换算，需要在 css 中的 body 选择器中声明Font-size=62.5%，这就使 em 值变为 16px*6
阅读全文
摘要：https://github.com/tim-kos/node-retry （npm install retry） const retry = require('retry') const delay = require('delay') const isItGood = [false, false
阅读全文
摘要：<div class="container"> <img src="loading.gif" data-src="pic.png"> <img src="loading.gif" data-src="pic.png"> <img src="loading.gif" data-src="pic.png
阅读全文
摘要：播放器播放条 斗鱼、Youtobe等 https://web-streaming.github.io/ppbar/ 使用 使用 ppbar，需要导入 ProgressBar 类和 ppbar 的样式。 import ProgressBar from 'ppbar'; import 'ppbar/di
阅读全文
摘要：<template> <div class="list-wrapper" ref="allListRef"> <div v-if="showArrow && listSource.length > minArrowItemsCount" @click="scrollLeft" class="arro
阅读全文
摘要：宫格布局第一种：.template-list { width: 100%; border-radius: 4px; height: 202px; display: grid; grid-template-columns: repeat(4, 94px); gap: 8px; overflow-y:
阅读全文
摘要：import { groupBy } from 'lodash'computed: { groupRecords() { const records = this.dataRecords .map( data => { const date = moment(this.tabActive 1 ? d
阅读全文
摘要：navigator.sendBeacon()方法可用于通过HTTP将少量数据异步传输到Web服务器。 使用sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题：数据可靠，传输异步并且不会影响下
阅读全文
摘要：一、Safari下问题说明 在 Safari 浏览器下，无论是桌面端 Safari，还是 iOS Safari，visibilitychange 事件不总是触发的。 对于窗口最小化，Tab 隐藏等行为 visibilitychange 事件是正常的，但是如果是点击页面某个链接发生的当前页导航跳转，则
阅读全文
摘要：1. ?? 非空运算符 在 JS 中，?? 运算符被称为非空运算符。如果第一个参数不是 null/undefined（译者注：这里只有两个假值，但是 JS 中假值包含：未定义 undefined、空对象 null、数值 0、空数字 NaN、布尔 false，空字符串’’，不要搞混了），将返回第一个参
阅读全文
摘要：<template> <div class="count-to-wrapper"> <slot name="left"/> <p class="content-outer"><span :class="['count-to-count-text', countClass]" :id="counter
阅读全文
摘要：需求： 从接口动态获取子菜单数据 动态加载 要求只有展开才加载子菜单数据 支持刷新，页面显示正常 思路： 一开始比较乱，思路很多。想了很多 首先路由和菜单共用一个全局route, 数据的传递也是通过store的route, 然后要考虑的俩个点就是一个就是渲染菜单和加载路由，可以在导航首位里处理路由，
阅读全文
摘要：$(function () { const models = [ {id: 1, title: 'hello', parent: 0}, {id: 3, title: 'hello', parent: 1}, {id: 4, title: 'hello', parent: 3}, {id: 5, t
阅读全文
摘要：<template> <div :id="`drawer_container_${id}`"> <el-drawer :id="id+'_drawer'" :wrapperClosable="false" @close="onClose" v-if="isShowDraw" :visible.syn
阅读全文
摘要：var url = interfaceURL; var backUrl = interfaceBackURL; var hardBackUrl = hardDataURL; var cacheTime = 10day; Ajax({ url: url, backurl: backUrl, succe
阅读全文
摘要：网络方面 web应用，总是会有一部分的时间浪费在网络连接和资源下载方面。往往建立一次网络连接是需要时间成本的。而且浏览器同一时间所发送的网络请求数是有限的。所以，这个层面的优化可以从「减少请求数目」开始： 减少http请求：在YUI35规则中也有提到，主要是优化js、css和图片资源三个方面，因为h
阅读全文
