- 博客(119)
- 收藏
- 关注
RSS订阅原创 css加载会造成阻塞吗？
因为你加载css的时候，可能会修改下面DOM节点的样式，如果css加载不阻塞DOM树渲染的话，那么当css加载完之后，DOM树可能又得重新重绘或者回流了，这就造成了一些没有必要的损耗。由上图我们可以看出，位于css加载语句前的那个js代码先执行了，但是位于css加载语句后面的代码迟迟没有执行，直到css加载完成后，它才执行。由上图，我们也可以看到，当css还没加载出来的时候，页面显示白屏，直到css加载完成之后，红色字体才显示出来，也就是说，下面的内容虽然解析了，但是并没有被渲染出来。
2024-09-17 21:16:30
1115
1原创 前端项目常用方法
区别在于，防抖函数只会在高频事件结束后 n 毫秒调用一次函数，节流函数会在高频事件触发过程当中每隔 n 毫秒调用一次函数。规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。防抖和节流的作用都是在高频事件中防止函数被多次调用，是一种性能优化的方案。常见的应用场景都是使用高频事件来调用函数的过程当中，比如应用于。）内高频事件再次被触发，则重新计算时间。）只会执行一次函数，如果指定时间（事件，文字输入、自动完成的。触发高频事件后一段时间（
2024-09-01 21:41:26
914
原创 Js中process.nextTick，setImmediate，setTimeout，Promise.then，async/await执行顺序
race方法和all一样，接受的参数是一个每项都是promise的数组，但是与all不同的是，当最先执行完的事件执行完之后，就直接返回该promise对象的值。finally( )方法用于指定不管Promise对象最后状态如何，都会执行的操作，不管promise最后的状态，在执行完 then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。调用all方法时的结果成功的时候是回调函数的参数也是一个数组，这个数组按顺序保存着每一个promise对象resolve执行时的值。
2024-08-18 19:53:58
797
原创 前端图形开发canvas入门
Canvas 是一种非常强大的技术，可以用于在网页上绘制图像、动画和其他视觉效果。Canvas 可以通过 JavaScript 进行控制，可以实现非常复杂的交互效果，而且它的性能也非常出色。在使用 Canvas 时，需要注意性能优化，避免频繁的绘制和 DOM 操作。
2024-08-11 21:37:15
2581
原创 TypeScript基本使用
基于类型的声明在给参数赋默认值时，需要借助withDefaults 编译器宏来实现。title?: string,}>(), {title: '标题',return {name: '细狗', age: 18}})< /script>注意：引用数据类型data给默认值时需要通过一个构造方法进行返回，并且给默认值后，原来在定义类型时是必传参，也会自动转化为可选参。< /script>这种声明方式比较方便，但是无法给触发的事件参数定义类型。如有这个需求，我们可以通过对象字面量的方式解决这个问题。
2024-08-04 21:30:31
856
原创 TypeScript基础语法
TypeScript，简称 ts，是微软开发的一种静态的编程语言，它是 JavaScript 的超集。那么它有什么特别之处呢?简单来说，js 有的 ts 都有，所有js 代码都可以在 ts 里面运行。ts 支持类型支持，ts = type +JavaScript。就是给变量添加类型约束，可以显示标记出代码中的意外行为，从而降低了发生错误的可能性let 变量名: 类型 = 初始值 let age: number = 18这样写有啥好处捏？更好的规定了数据的类型，避免了不必要的错误。
2024-07-26 17:16:16
1037
原创 vue中8种组件通信方式
上面两种方式用于父子组件之间的通信， 而使用props进行父子组件通信更加普遍;二者皆不能用于非父子组件之间的通信。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上父子组件通信:props;ref;
2024-07-22 21:47:11
1697
原创 封装图片压缩
1.可以设置压缩后的图片最大宽度/高度。限制输出最大宽/高值 （如果不设置，按照原图尺寸大小）3.可以设置输出图片的质量级别（假设1-10级别。级别越大，质量越高，占用存储越大，越清晰）2.要求输出格式支持blob 和 File 文件。
2024-07-12 17:31:03
267
原创 this指向问题以及如何改变指向
箭头函数的"this"是静态的，它捕获其定义时（而不是运行时）的上下文。因此，箭头函数通常不适合作为Vue组件中方法的定义方式，因为它无法访问Vue实例的数据和方法。：普通函数的"this"是在运行时动态绑定的，取决于函数的调用方式和上下文。Vue.js在模板和事件处理函数中自动绑定了组件实例，以便确保方法中的"this"指向正确。会指向当前的Vue实例，因为Vue在内部会确保方法被调用时绑定正确的上下文。方法创建一个新的函数，称为绑定函数，它会把指定的对象绑定为调用函数时的。
2024-07-05 17:28:33
1400
原创 关于WebSocket
通过在建立 WebSocket 连接时使用加密传输，可以确保数据在传输过程中被加密，并防止第三方窃听或篡改数据。通过can i use网址我们可以知道，WebSocket 在现代的 Web 浏览器中具有广泛的兼容性，但在一些旧版本的浏览器中可能存在兼容性问题。WebSocket可以提供实时、双向、持久的通信能力，使得 Web 应用能够实现高效、实时的数据传输和即时通信。因此，如果在使用 WebSocket 时不进行任何加密措施，那么数据在传输过程中可能会被窃听、篡改或伪造。
2024-06-26 17:31:43
969
原创 JavaScript 预编译与执行机制解析
在深入探讨JavaScript预编译与执行机制之前，我们首先需要明确几个基本概念：声明提升、函数执行上下文、全局执行上下文以及调用栈。这些概念共同构成了JavaScript运行时环境的核心组成部分，对于理解代码的执行流程至关重要。本文将围绕这些核心概念，展开一次深度解析之旅,全面而深入地阐述这一主题。
2024-06-23 22:56:52
1265
原创 如何在 Vue 3 中使用 vue3-print-nb 实现灵活的前端打印
它的属性值可以是一个对象以此来实现更加定制化的打印效果，一起来看看吧💖 HTML。我们可以给要打印的页面指定额外的样式、额外的样式、额外头，甚至是添加回调函数！属性即可实现打印的效果，可以选择打印全部或者打印指定页面，比如我只想要打印。对象添加一个url属性即可实现打印当前网址对应的整个页面。还有一点需要的注意的是设置url属性需要确保同源策略相同！设置了preview属性将在打印时候显示打印预览。，我已经提前在el-table上定义好了。以上实现了一个最基本的打印效果，只需要在要打印的元素上通过。
2024-06-16 15:56:46
1567
原创 echarts组件x轴坐标显示不全解决方法
/ endValue: 4, //滚动条的截止位置（按比例分割你的柱状图x轴长度）// type: "slider", //给x轴设置滚动条。// show: true, //flase直接隐藏图形。// startValue: 0, //滚动条的起始位置。interval: 2 // 每隔两个标签显示一次。
2024-06-10 22:30:03
2065
原创 JS判断对象是否为空对象的几种方法
/true 为空， false 不为空。console.log('对象是否为空：', isEmptyObj({}))console.log('对象是否为空：', isEmptyObj({}))console.log('对象是否为空：', isEmptyObj({}))console.log('对象是否为空：', isEmptyObj({}))
2024-05-30 17:26:48
576
原创 ?? 运算符、?. 运算符和 ?. .运算符
运算符的进一步简形式是?如果对象的某个属性或方法不存在，. 运算符会抛出一个TypeError，而?在这个例子中，虽然obj.foo存在，但它的值为null，所以使用. 运算符对bar进行访问抛出TypeError，而使用?在这个例子中，如果getInputValue(‘username’)返回的值为null或undefined，则username会被设置为加菲猫作为默认值。在这个例子中，由于x的值为0，它被判定为 “falsy” 值，所以使用 || 运算符时返回了y的值，而使用?
2024-05-26 17:50:04
1488
原创 Promise.all()
在处理多个并发请求时，一般会用Promise.all()方法。Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例Promise.all() 方法接收一个 promise 的 iterable 类型（注：Array，Map，Set 都属于 ES6 的 iterable 类型）的输入，并且只返回一个Promise实例， 那个输入的所有 promise 的 resolve 回调的结果是一个数组。
2024-05-19 17:53:10
375
原创 实现echarts地图
color: "#c4cccd", //鼠标悬浮时显示各省名称的颜色。areaColor: "#f1ffff", //区域颜色，鼠标悬停颜色。数组中提供了地图上各个区域的数据，每个数据项包含了区域的名称、数值和额外的自定义数据。borderColor: "#4a87fb", //区域边框颜色。color: "#c4cccd", //显示各省名称颜色。内容通过一个自定义的。areaColor: "#f1ffff", //区域颜色。layoutCenter: ["35%", "50%"], //位置。
2024-05-12 14:58:09
1735
原创 echarts部分属性使用
/ 文字超出宽度是否截断或者换行'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...'break' 换行'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行。// horizontal: ['arrow-left', 'arrow-right'], // 设置水平方向翻页按钮图标。// 'scroll'：可滚动翻页的图例。// 控制下一页的显示在左侧还是右侧'start','end'// 'plain'：普通图例。
2024-04-21 18:24:08
860
原创 从输入url到页面加载的全过程
3.生成渲染树：从DOM树的根节点开始，遍历每个可见节点，对于每个可见节点，找到CSSOM树中对应的规则并应用，根据每个可见节点及其对应样式，组合生成渲染树。当页面元素样式改变不影响元素在文档流中的位置时，如color、visibility等，浏览器只会将新的样式赋予元素并进行重新绘制的操作。浏览器查看缓存（浏览器缓存、系统缓存、路由缓存），如果缓存中有，直接在屏幕上展示页面内容。5.根据渲染树及其回流得到的集合信息，得到节点的绝对像素，绘制页面像素信息。7.加载js脚本，加载完成解析js脚本。
2024-04-14 18:39:31
295
原创 JS获取12小时内的时间，时间格式为：YYYY-MM-DD hh:mm:ss
const before12Timestamp = timestamp - 12 * 60 * 60 * 1000// 获取12小时前的时间戳。const timestamp = defaultTime.getTime() // 获取当前时间的时间戳。var date = new Date(timestamp) //当前时间戳。// 将时间戳转换为日期格式。
2024-04-08 20:04:03
347
原创 关于style/class的几种写法
2.计算属性判断return this.isTrue;// 这里的值可以根据需要进行修改。如果isActive为true，则元素会应用active类；在data中定义 textColor和fontSize。在data中定义isTrue active为样式。/* 添加相应的样式 */data中定义isTrue。一. style写法。
2024-03-29 17:25:33
868
原创 Vue 实现带拖动功能的时间轴
用于设置时间轴滑块的初始日期，格式通常为 YYYY-MM-DD。：一个数组，用于标记特定日期，在时间轴上会有相应的标记显示。：一个数组，用于锁定日期，当滑动结束时自动跳到指定的日期。：一个布尔值，用于控制是否显示背景遮罩。
2024-03-24 18:30:46
3511
原创 echarts地图
左侧为地图展示，右侧可滚动地域和游客总量，地图下方图例对应4个区间分别是0，0.25，0.5，0.75 1对应地图颜色。2.如要实现地图展示，需创建一个div容器用来加载地图，在加载地图前需准备json数据。这个数据就是当前的国内地图。基于 Echarts 的中国地图展示游客数据的图表。，该参数应为一个包含了各地区游客数据的数组。，根据下载json数据。3.配置当前地图的显示。
2024-03-15 14:52:53
476
原创 视频m3u8(hls)
1.需要hls插件配合video，在需要的地方调用函数，并且传值，用来记录。判断目前是单屏幕还是多屏幕，先清除视频，然后加载url，再初始化。
2024-01-28 16:10:49
294
原创 视频录制(本地好使，线上未解决)
会出现报错，跨域隔离SharedArrayBuffer 报错问题。把下载的nodemoudle中的放到public下，项目中引入。在vue.config中解决。
2024-01-19 17:39:59
455
原创 视频监控(抓拍)
创建canvas节点，设置宽高，调用canvas 的getContext方法，以及drawImage方法，传入。urlObj是当前这一项，然后获取当前这一项的下标以及dom节点。新打开链接，展示图片以及下载。
2024-01-14 15:47:25
526
原创 echarts 柱状图
4.如何固定最后一根柱子的高度在同一个位置，data: dataArry.map(item => fixedTotal)3.第一根柱子的 position: "right", 相当于百分比跟随柱子的最右边，data是百分比的数据。数据过多会导致下拉的时候，触发y轴formatter，更新序号，序号会重新排列，不准确。所有的数据返回项都变成新数组，全部返回[100,100,100........]1.y轴显示的序号和名称需要在数据中拼接，而不是在y轴data中拼接，这在用柱子做背景的时候有用(中间的柱子)。
2023-12-24 18:47:20
285
原创 CSS3 2D变形 过渡 动画
在CSS3中，动画效果包括4个部分：变形（transform）、3D变形、过渡（transition）、动画（animation）。CSS3 2D变形 3D变形 过渡 动画。
2023-12-17 21:37:39
850
原创 vue递归以及示例
递归是一种在函数中调用自身的编程技巧。通过递归，函数可以将一个问题分解为更小的子问题，并且在达到基本情况（终止条件）时停止递归。递归在解决某些问题时非常有用，特别是那些可以被分解为相同类型的子问题的情况。2.例如递归级联去掉空的children。传入相对应的属性以及数据源。3.例如级联禁用某一层级。
2023-12-09 18:21:55
1735
原创 flv 轮播功能(单个、多个)
/ 当多分屏进入单分屏的话currentVideoIndex.value 可能会有问题，不能保证选择的视频是从index=0开始的。// 这里设置了超过1秒以上则进行视频加速播放。// 默认索引0，取二维数组第一项的id 1为视频时，调用init改变dom和index。// 二维数组取余数，currentVideoIndex.value，第一次加url数据。// 当前的值取余的值大于0说明有多组 然后循环，如果
2023-12-03 19:18:36
169
原创 flv视频轮播功能(单个时)
img @click="stopClick" src="@/assets/images/1p.png" class="imgStyle" alt="">停止。// 当多分屏进入单分屏的话currentVideoIndex.value 可能会有问题，不能保证选择的视频是从index=0开始的。// 默认索引0，取二维数组第一项的id 1为视频时，调用init改变dom和index。enableWorker: false, //启用分离的线程进行转换。cors: true, // 是否跨域。
2023-11-25 19:24:14
536
原创 em/px/rem/vh/vw 的区别？
为了简化 font-size 的换算，可以在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10px。em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值。在移动端中存在设备像素比，px实际显示的大小是不确定，之所以认为px为绝对单位，在于px的大小和元素的其他属性无关。rem，相对单位，相对的只是HTML根元素font-size的值。在桌面端，指的是浏览器的可视区域。
2023-11-19 18:55:29
142
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人