芭拉拉小魔仙-优快云博客

原创高并发场景下前端性能优化手册：资源压缩、CDN配置与Web Workers实战

《高并发场景下的前端性能优化实战》摘要：面对百万级并发访问，前端性能优化成为业务存亡的关键。文章深入探讨了高并发前端面临的三大挑战（流量洪峰、资源瓶颈、线程阻塞），并提出系统化解决方案：通过Webpack资源压缩、WebP图像优化和字体子集化减少传输体积；利用CDN智能缓存策略提升命中率至98%；优化DOM操作与事件委托避免卡顿；使用Web Worker处理计算密集型任务。结合微信抢红包和电商秒杀等实战案例，展示分层防御、请求分时等优化策略，并强调性能监控五大核心指标（LCP、CLS等）。本文为企业构建高并

2025-06-16 09:48:54 508

原创【Vue3/Typescript】从零开始搭建H5移动端项目

摘要：本文介绍了Vue项目中的关键配置，包括：1) 集成ESLint进行代码规范检查，支持Vue和TypeScript；2) 配置unplugin-auto-import实现Vue相关API的自动导入；3) 选择Vant作为移动端UI框架；4) 通过postcss-pxtorem和lib-flexible实现rem布局适配；5) 底部安全区适配方案。这些配置涵盖了从代码规范、开发效率到移动端适配的最佳实践，为Vue移动端开发提供了完整的解决方案。（149字）

2025-06-12 13:42:08 269

原创 Vue3项目无法在IE浏览器运行

在安装并配置了babel、core-js等polyfill后，E浏览器（包括IE11）运行Vue3项目时出现“Unhandled promise rejection ReferenceError: ‘Proxy’未定义”错误。这是因为IE浏览器完全不支持ES6的Proxy对象，而Vue3的响应式系统底层大量依赖Proxy实现，因此Vue3项目无法在IE浏览器运行。即使使用了babel、core-js等polyfill，Proxy也无法被polyfill，这是浏览器本身的硬性限制。解决方案包括：1. 放弃IE

2025-05-22 14:05:27 172

原创【Vue3/Typescript】合并多个pdf并预览打印，兼容低版本浏览器

最开始使用的方案是pdf-lib + printJs ,直接弹出打印窗口。但是在360浏览器中有时不会弹出打印窗口。经过排查发现pdf已经拼接并渲染完成，问题处在window.print()上。360有时会把非用户自发行为触发的打印行为当作广告屏蔽掉。window.print()不行便尝试了window.open()。在新窗口中打开拼接pdf，让用户手动触发打印行为。window.open()也会被拦截。最终决定的方案：弹出iframe弹窗，让用户触发打印。

2025-04-29 09:19:49 461

原创【Vue3 / TypeScript】项目兼容低版本浏览器的全面指南

兼容 IE11 等低版本浏览器保持现代开发体验实现渐进式增强维持良好的性能表现记住，兼容性是一个系统工程，需要从工具配置、代码编写到构建优化的全流程关注。随着浏览器市场的演变，建议定期评估和调整兼容性策略。本文方案已在多个企业级项目中验证，可支持千万级PV的稳定运行。实际应用中请根据项目具体情况调整配置参数。

2025-04-22 15:21:41 1003 1

原创【Vue3/Typescript】根据图片路径下载图片并修改图片名称

【代码】【Vue3/Typescript】根据图片路径下载图片并修改图片名称。

2025-04-19 10:59:33 194

原创解决 Vue3 项目中使用 pdfjs-dist 在旧版浏览器中的兼容性问题

实施上述任一解决方案后，在目标浏览器中重新加载应用，错误应该不再出现。如果问题仍然存在，可能需要检查是否有其他不兼容的 ES 新特性被使用。对于 Vue3 项目，推荐组合使用方案1和方案4，这样可以确保不仅解决当前问题，还能为其他可能的 ES 新特性提供兼容支持。如果可能，也可以考虑提示用户升级浏览器，因为 Chrome 86 已经是较旧的版本，许多现代 Web 特性可能无法支持。360极速浏览器13.5打不开网站，控制台报错。表明在浏览器内核版本 86.0.420.198 中，在项目的入口文件（如。

2025-04-19 10:44:00 605

原创【Vue3/Typescript】深入解析：使用 iframe 实现浏览器打印兼容性优化，控制页眉页脚

规则进行打印控制，但低版本浏览器（如 IE9-11、旧版 Firefox/Safari）可能无法正确应用这些样式。在前端开发中，打印功能是一个常见的需求，但不同浏览器对打印样式的支持差异较大，尤其是页眉页脚的控制。的方法，分析其原理、兼容性优势，并提供完整的实现方案。如果你的项目需要兼容 IE9+ 或旧版移动端浏览器，

2025-04-19 10:21:34 972

原创 Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题

将 TUICallKit 使用分包集成之后，主包中的 vendor,js 会变得非常大，这也是目前遇到的痛点问题。这是因为 uniapp 打包小程序在 Vue2 和 Vue3 上打包机制存在差异。Vue2 使用 webpack 打包，独立分包中都会有单独的 vendor,js 不存在包体积问题。Vue3 使用 vite。没有找到解决方案，改用vue2了。vue2分包不占用主包体积。打包，分包中的依赖会被打入主包中，造成主包体积过大问题。操作后主包的vendor.js依旧很大。

2025-04-03 11:28:49 568

原创《Postcss - pxtorem在Vue3中实现自适应原理与实践》

Postcss - pxtorem是一个PostCSS插件，它的主要作用是将CSS中的px单位转换为rem单位。在网页开发中，rem是一个相对单位，它是相对于根元素（html元素）的字体大小来计算的。通过将px转换为rem，我们可以方便地实现页面在不同设备屏幕尺寸下的自适应。

2024-12-04 15:09:23 1176 1

原创浏览器数据存储方法深度剖析：LocalStorage、IndexedDB、Cookies、OPFS 与 WASM - SQLite

1994 年由网景公司引入的 Cookies，主要用于存储小型键值数据，在会话管理、个性化和跟踪等方面发挥着重要作用。它不仅存储在客户端，还会随每个 HTTP 请求发送到服务器，因此其存储容量有限，通常每个 Cookie 不超过 4KB（RFC - 6265 规定）。虽然其存储的数据量小，但由于是 Web 的重要基础特性，在性能优化方面一直备受关注，如 Chromium 的共享内存版本控制和异步 CookieStore API。

2024-12-03 14:18:58 1369

原创深入理解 Viewport Meta 标记及其基本属性的使用场景

Viewport（视口）是用户在网页上能够看到的区域。而viewport meta标记则是HTML中用于控制视口的设置。它位于标签内部，通过它我们可以告诉浏览器如何对页面进行缩放和布局，从而适配不同的设备屏幕。

2024-11-28 08:38:13 890

原创 Ajax、Fetch、Axios、XMLHttpRequest 的关系与区别

XMLHttpRequest 是一种用于在 Web 浏览器和服务器之间进行异步数据传输的 API。它算得上是早期实现浏览器端异步请求的核心技术，通过它可以在不刷新整个页面的情况下，向服务器发送 HTTP 请求并获取响应数据，然后借助 JavaScript 来对获取到的数据进行操作，进而更新页面的部分内容。例如，早期的网页中实现简单的动态加载更多内容的功能，很多就是依靠 XMLHttpRequest 来发送请求获取新数据并展示的。

2024-11-27 11:48:01 1598

原创【CSS】纯CSS Loading动画组件

【代码】【CSS】纯CSS Loading动画组件。

2024-10-18 11:33:00 478

原创【CSS】纯css3螺旋状loading加载特效

css3 螺旋Loading特效

2024-10-11 11:29:25 536

原创 Vue3 Typescript 前端页面5min后无操作自动退出至登录页面

前端页面5min无操作，弹出弹窗提示用户系统将在30s后退出，30s后系统自动退出至登录页面。

2024-09-30 09:35:57 874 1

原创实现语音合成的三种方法：HTML5 Web Speech 、speak-tts、百度语音合成

在前端开发中，文字转语音（Text-to-Speech, TTS）技术是一种非常实用的功能，广泛应用于教育、商业、娱乐以及无障碍辅助等多个领域。和speak-tts，并对比它们的优缺点及适用场景。

2024-09-27 10:44:38 5503 3

原创用CSS 方式设置 table 样式

在现代Web开发中，使用CSS来设置table的样式是一种常见且强大的方法，它能让你的表格数据既美观又易于阅读。下面我将通过一个示例来展示如何使用现代CSS技巧来美化表格。

2024-09-09 09:01:46 1812

原创解决苹果手机通过getUserMedia唤起摄像头出现黑屏问题

在iOS设备上，用户必须明确授权网站或应用访问摄像头。如果用户在首次请求时没有授权，或者之后更改了权限设置，那么摄像头将无法正常工作。API 要求在安全的上下文中使用，即你的网页必须通过HTTPS协议提供。如果你的网站还在使用HTTP，那么你需要将其升级到HTTPS。虽然大多数现代浏览器（包括Safari）都支持这一API，但最好还是在。之前，用户已经授权了摄像头访问权限。首先，确保你正在使用的浏览器支持。上检查最新的兼容性信息。

2024-09-06 17:19:00 1025

原创揭秘开发者效率飞升的秘密武器：选择合适的编程工具

选择合适的编程工具是提升开发者工作效率的关键。无论是智能的代码编辑器、强大的版本控制工具，还是那些让我们事半功倍的自动化脚本，它们都在各自的领域发挥着不可替代的作用。通过不断学习和尝试新的工具和技术，我们可以不断优化自己的工作流程，实现效率的飞升。希望每位开发者都能找到适合自己的秘密武器，在软件开发的道路上越走越远。

2024-09-06 11:45:00 1207

原创 navigator.mediaDevices.getUserMedia检查用户的摄像头是否可用，虚拟摄像头问题

API 提供了这一功能，它允许你请求访问用户的媒体设备，如摄像头和麦克风。虽然这个API本身主要用于获取媒体流，但你可以通过尝试获取摄像头流来间接检查摄像头是否可用。通过stream.getVideoTracks()，获取当前设备，发现是虚拟摄像头的问题。如果成功，我们会在控制台中打印一条消息，并可以将视频流绑定到一个。在Web开发中，检查用户的摄像头是否可用是一个常见的需求，尤其是在需要视频聊天或录制视频的应用程序中。如果失败，我们会捕获错误并根据错误的类型显示相应的消息给用户。

2024-09-06 11:23:34 798

原创 React、Vue.js 和 Angular主流前端框架介绍与选择指南

在当今的前端开发领域，选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和Angular，探讨它们各自的特点、开发场景、优缺点，并提供选择框架的建议。

2024-09-04 15:52:14 1469

原创 Vue3 + TypeScript 实现防抖（Debounce）和节流（Throttle）

在Vue3项目中结合TypeScript使用防抖（Debounce）和节流（Throttle）技术，可以有效提升应用的性能和用户体验，尤其是在处理频繁触发的事件（如滚动、窗口大小调整、输入框内容变化等）时。下面将详细介绍这两种技术的原理、使用方法以及适用场景。

2024-09-04 13:47:25 1797

原创前端之路，与大师同行：不容错过的技术大牛博客精选

前端程序员在不断提升自己的过程中，需要关注多个方面，包括技术能力的提升、职业素养的增强以及持续学习的态度。以下是一些具体的建议：深入学习基础技术：关注新技术和趋势：实战项目经验：代码质量和性能优化：团队合作和沟通能力：持续学习和自我提升：解决问题的能力：设定学习目标：制定学习计划：实践和应用：反思和总结：《CSS世界三部曲》（包括《CSS世界》、《CSS选择器世界》、《CSS新世界》）《JavaScript高级程序设计（第4版）》《JavaScript权威指南（犀牛书）》《ES6标准入门（第三版）》《高性能

2024-09-03 14:31:38 1325 1

原创 ES6 reduce方法详解：示例、应用场景与实用技巧

在JavaScript中，reduce方法是一个非常强大的数组方法，它允许你将数组中的元素归并（reduce）为单个值。reduce方法执行一个由你提供的reducer函数（归并函数），将其结果汇总为单一的返回值。

2024-09-03 11:07:48 1990

原创 ES6中新增的Set方法详解

在ES6（ECMAScript 2015）中，Set是一种新的数据结构，它提供了一种存储任何类型唯一值的方式，无论是原始值还是对象引用。本文将详细介绍Set的特点、解决的问题、使用场景以及使用方法。

2024-08-30 08:52:01 511

原创 Promise：JavaScript 中的异步编程解决方案

在JavaScript中，Promise是一种用于异步编程的对象，它提供了一种更优雅的方式来处理异步操作的成功和失败，相比传统的回调函数方法，Promise让代码更加简洁、易读、易维护。本文将详细介绍Promise的特点、用法以及它解决的问题。

2024-08-29 17:54:20 501

原创全能型AI“草莓”的未来展望：多样性VS专业性，谁将引领市场潮流？

这款AI从解决深奥的数学问题到驾驭复杂多变的营销策略，展现出了前所未有的多样性和适应性，引发了业界对于AI发展方向的深刻讨论：全能型AI是否真的代表了未来的趋势？而对于专业型AI来说，则需要在保持专业性的同时，关注跨领域的融合与创新，以适应不断变化的市场需求。隐私与伦理：随着AI应用范围的扩大，如何确保用户数据的安全和隐私，以及避免潜在的伦理问题，成为全能型AI发展过程中不可忽视的挑战。定制化服务：针对特定行业或场景的需求，专业型AI可以提供更加精准和个性化的解决方案，满足客户的特殊需求。

2024-08-29 14:59:23 345

原创 CSS中的align-content属性：实现垂直居中的新方式

在CSS中，align-content属性原本主要用在Flexbox和Grid布局中，用于控制交叉轴（crossaxis）上内容的对齐方式。但在2024年，浏览器开始支持在默认布局（flowlayout）中使用align-content，从而实现了使用单一CSS属性即可实现垂直居中的效果。align-content属性的引入为CSS的垂直居中问题提供了一个全新的解决方案。通过使用这一属性，我们可以在默认布局中轻松实现内容的垂直居中，而无需依赖Flexbox、Grid或其他复杂的布局方式。

2024-08-28 09:51:36 2115 1

原创在URL链接中指定浏览器跳转到PDF文件的指定页码

在Web开发中，经常需要处理各种类型的文件交互，包括PDF文件。有时，我们可能希望当用户点击一个链接时，浏览器能够直接打开PDF文件并跳转到文件的特定页码。虽然HTML标准本身并不直接支持在URL中指定PDF的页码，但我们可以通过一些技巧和工具来实现这一功能。

2024-08-24 09:45:00 748

原创 CSS @layer：深入理解与实战应用

layer 是CSS中一个强大的特性，它允许开发者以更加灵活和高效的方式来组织和控制样式。通过合理使用@layer，可以显著提高CSS代码的可维护性、性能和可定制性。随着浏览器对@layer支持的不断完善，我们有理由相信，它将在未来的Web开发中扮演更加重要的角色。@layer说明。

2024-08-24 09:15:00 1442

原创在网易云音乐服务器故障事件中提升应急处理能力的探讨

为了提升团队的应急处理能力，网易云音乐可以定期组织模拟演练，模拟真实故障场景以检验团队的响应速度和解决方案的有效性。演练结束后，及时组织复盘总结会议，分析存在的问题和不足，并提出改进措施。网易云音乐此次服务器故障事件虽然给用户和企业带来了一定的影响，但也为我们提供了宝贵的经验和教训。通过构建有效的危机应对机制、加强技术培训与分享、模拟演练与复盘总结以及培养团队协作精神等措施，我们可以不断提升团队的应急处理能力，在未来的技术风暴中站稳脚跟，为用户提供更加稳定、可靠的服务。

2024-08-23 13:55:50 647

原创平衡的艺术：编码与学习的双螺旋

在快速迭代的编程世界中，找到日常编码与自我提升的平衡并非易事，但它却是每一位程序员职业生涯中不可或缺的一部分。通过设定明确的目标、利用碎片时间学习、将学习成果融入工作、建立学习社群以及保持好奇心和勇气，我们可以在繁忙的编码工作与个人成长之间架起一座友谊、互利的桥梁。让我们在追求技术的道路上不断前行，共同迎接更加辉煌的未来。

2024-08-23 13:48:41 463

原创深入理解 structuredClone：JavaScript 的深拷贝解决方案

是一个全局函数，用于创建对象的深拷贝。与浅拷贝不同，深拷贝会递归地复制对象的所有嵌套属性，确保原始对象和拷贝对象之间没有任何引用关系。

2024-08-21 14:31:58 963

原创 JavaScript 中的深拷贝新宠：structuredClone() 函数详解

在 JavaScript 中，处理对象拷贝时，我们经常会遇到浅拷贝（shallow copy）和深拷贝（deep copy）的概念。浅拷贝只复制对象的第一层属性，如果属性值是引用类型（如对象、数组等），则只复制引用而不复制对象本身，这可能会导致原始数据被意外修改。而深拷贝则递归地复制对象及其所有子属性，确保原始数据和拷贝数据完全独立。传统上，JavaScript 没有内置直接进行深拷贝的函数，开发者通常需要自己编写深拷贝函数或使用第三方库（如 lodash 的 _.cloneDeep()）。

2024-08-21 14:12:58 1162