优联前端（HTML/CSS/JS）
关注
分享
扫一扫
文章平均质量分 83
https://ufrontend.com/
优联前端
技术实力：主流技术全覆盖，Web前端技术，微信小程序，2D/3D游戏技术，动画交互技术等主流技术全覆盖，轻松实现客户项目需求。
动画交互技术：公司引入动画交互技术，优化产品细节及用户体验。
性能优化：公司对项目加载速度、卡顿、性能等方面做严格测试和优化，确保产品在各个平台终端运行流畅。
项目管理：专业化的项目管理，管理中融入产品化思维，确保项目准时高质量交付。
用户体验：用户体验设计与交互技术结合，深度挖掘用户需求，提高产品可用性，增强用户粘性。
企业邮箱：info@ufrontend.com
企业官网：https://ufrontend.com
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
如何让网页内容无法被轻易复制？这些技巧很有效
本文介绍了多种前端内容保护方案，包括基础CSS禁用选择、JavaScript事件拦截、复制水印、动态加载、Canvas渲染和文字转图片等方法。文章分析了不同方案的优缺点，建议采用分层防护策略，组合多种技术实现平衡保护效果与用户体验。同时强调完全防止复制在技术上不可行，应结合后端验证、法律声明和监控机制，并提醒开发者要在内容保护与用户体验之间找到平衡点，最终通过提供独特价值来吸引用户付费而非过度依赖技术防护。原创 2025-12-12 17:34:20 · 441 阅读 · 0 评论 -
解决async/await页面卡顿：理解并发处理的正确方法
摘要： 本文探讨了async/await在JavaScript中的使用误区，指出其本身不会阻塞主线程，但不当的串行写法（如循环内逐个await请求）会导致页面响应延迟。通过对比错误示例与优化方案（如Promise.all并行请求），分析不同场景下的并发控制工具（Promise.allSettled、Promise.race等），并给出控制请求数量的实现方法。核心结论：合理利用并发处理可显著提升异步代码效率，避免页面卡顿，需根据需求选择合适策略。优联前端作为专业H5技术公司，提供相关解决方案。原创 2025-08-05 09:34:06 · 670 阅读 · 0 评论 -
JavaScript 中位运算符的7种神奇用法
JavaScript位运算操作指南 摘要：JavaScript采用64位浮点数存储数值，但位运算会转换为32位整数处理。本文介绍了7种基本位运算符：按位与(&)、或(|)、异或(^)、非(~)、左移(<<)、有符号右移(>>)和无符号右移(>>>)，并通过二进制示例说明其运算原理。还分享了位运算的实用技巧：快速判断奇偶性、数值取整、变量值交换以及RGB与十六进制颜色转换。这些操作虽然底层，但在特定场景下能显著提升性能，适合对效率要求较高的场景使用。原创 2025-07-02 09:50:08 · 834 阅读 · 0 评论 -
11个CSS常用技巧梳理
在日常前端开发中，CSS 往往被认为只是“样式美化”的工具，但其实它远比我们想象中强大。掌握一些 CSS 的实用小技巧，不仅可以大幅提升开发效率，还能写出更优雅、可维护的代码。本文将整理一系列 CSS 中常被忽视但极具价值的小技巧，帮助你在页面布局、响应式设计和用户体验上更进一步。1、图片文字环绕shape-outside 是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域圆形：shape-outside: circle(50%);//第一个值代表半径。原创 2025-05-21 12:06:01 · 400 阅读 · 0 评论 -
5个改善用户体验的HTML属性
关于优联前端武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。承接开发Web前端，微信小程序、小游戏，2D/3D游戏，动画交互与UI广告设计等各种技术研发。原创 2025-04-11 09:41:17 · 1108 阅读 · 0 评论 -
10 个最新 CSS 功能已在所有主流浏览器中得到支持
CSS 不断发展，新功能使我们的工作更快、更简洁、更强大。得益于最新的浏览器改进（Baseline 2024），许多新功能现在可在所有主要引擎上使用。以下是您可以立即开始使用的10 CSS新功能。原创 2025-04-10 09:46:23 · 973 阅读 · 0 评论 -
如何避免写出高耦合低内聚的前端代码？
武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。一般来说在比较复杂的应用中，页面级别的模块只做对各个子组件的调用，流程控制以及页面级别的变量控制(单一职责)。当封装组件的时候，应该是在组件的接口(e.g. props)中暴露组件需要的外部数据，而非在组件里面或者组件的子组件里面依赖外部数据导致过高的耦合。几个数据源如何同步?原创 2025-04-07 15:00:10 · 833 阅读 · 0 评论 -
10 个你可能不知道的高级 JavaScript 技术
JavaScript 是一种功能强大的开发语言，它隐藏了许多可以用来提高开发效率和代码整洁度的功能。以下是 10 种你可能不知道的高级 JavaScript 技术，它们可以显著提高你的编码技能。1. 使用别名进行解构解构允许你将数组中的值或对象的属性解包为不同的变量。别名允许你在此过程中重命名变量，这在处理来自外部来源（如 API）的数据时特别有用。用例：从 API 获取数据时，你想为属性分配更有意义的名称，以提高代码的可读性和可维护性。原创 2025-03-24 12:21:20 · 1065 阅读 · 0 评论 -
24 条可以提高工作效率的前端开发技巧代码片段
武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。当 margin-top 在嵌套 div 上不起作用时，请向父级添加 overflow: hidden 或 display: inline-block/table-cell。:before/:after 比 ::before/::after 具有更好的兼容性，但两者都是伪元素。原创 2025-03-21 09:30:33 · 947 阅读 · 0 评论 -
30 个 CSS 技巧助你提升网页开发水平
武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。使用特定属性定位链接，以进行自定义样式设置。设置字体大小范围，以确保跨屏幕尺寸的可读性。改进焦点样式以实现更好的键盘导航和可访问性。对遵循特定兄弟元素的元素进行样式设置。设置链接下划线样式以获得独特的外观。原创 2025-03-12 11:10:43 · 995 阅读 · 0 评论 -
WebGL Chromakey 实时绿幕抠图
20 行核心（shader）代码实现实时绿幕抠图先体验 DEMO，基于WebAV实现移除图片背景移除视频背景。原创 2025-02-08 09:35:20 · 1473 阅读 · 0 评论 -
Web 音视频（一）基础知识
阅读后续文章或开始使用 WebAV 处理音视频数据之前，需要一点点背景知识。本篇主要简单介绍音视频最基础的知识，以及 WebCodecs 的核心 API。原创 2025-01-20 11:04:31 · 835 阅读 · 0 评论 -
Web 音视频（四）在浏览器中处理音频
为什么单独介绍音频处理?网络上缺乏音频处理的资料，绝大多数示例都是针对视频而略过音频，很多人在网上寻找音频处理的示例对前端开发者来说，音频处理相对视频略微复杂一些所以，本文专门针对音频数据，汇总讲解采集-处理-编码-封装全过程，帮助初学者入门。上图是在 Web 中从采集音频到封装文件的大致流程。你可以跳过原理介绍，直接查看文末 WebAV 编码封装音频示例。原创 2025-02-06 09:54:51 · 1594 阅读 · 0 评论 -
Web 音视频（三）在浏览器中创建视频
在 WebCodecs 之前，由于编解码能力的缺失，几乎无法在纯浏览器中编辑、创建视频。WebCodecs 补齐了编解码能力，相当于在浏览器中提供了视频创作能力。预计 WebCodecs 将会像 HTML5 技术（Video、Audio、MSE...）一样对用户习惯带来巨大改变，HTML5 作用于视频消费端，WebCodecs 作用于视频生产端。本章介绍如何在浏览器中创建视频。原创 2025-01-22 09:52:13 · 1383 阅读 · 0 评论 -
Web 音视频（二）在浏览器中解析视频
浏览器中已经能直接播放视频，为什么还需要手动写代码解析？因为，某些场景需要对视频进行更细致的处理，比如截取关键帧、提取视频中的文字、人物打码、极低延时播放视频等等。总之，除了最单纯的视频播放外，对视频数据的一切处理都需要从解析开始。MP4 是最流行兼容性最好的视频封装格式之一，在各种浏览器中也得到了良好支持；本系列后续都以 MP4 视频作为示例，所以先简单介绍 MP4 的基本概念。其它格式的视频文件需使用对应的解封装 SDKMP4 可以分为普通 MP4 和 Fragment MP4；原创 2025-01-21 10:18:54 · 1031 阅读 · 0 评论 -
CSS中的accent-color如何使用
accent-color是CSS 2022年推出的一个新属性，它能修改input默认控件的颜色，支持的input控件元素包括复选框（<input type="checkbox">）、单选框（<input type="radio">）、范围选择框（<input type="range">）和进度条（<progress>）。在黑暗模式下，该属性也能适配。此外，accent-color属性是可继承的，可以在根级别设置，也可以在单个元素上设置。在根级别设置：:root { accent-color: lime;原创 2025-01-14 10:34:11 · 763 阅读 · 0 评论 -
在JavaScript开发中，如何判断对象自身为空？
如何判断一个对象为空是我们在开发中经常会遇到的问题，今天我们来聊聊几种经常使用的方法，以及在不同的场景下我们如何去使用。JSON.stringify 方法可以使对象序列化，转为相应的 JSON 格式。缺点：如果存在 undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。更多2. for in 配合 hasOwnPropertybreakbreak缺点：for in 不能遍历不可枚举的属性。原创 2025-01-08 11:41:57 · 957 阅读 · 0 评论 -
html5解决华为原生浏览器底部栏兼容问题
我们之前开发的H5网页，有客户反馈页面底部被浏览器下方的工具栏遮住了，经过测试发现目前只有华为原生x5浏览器底部栏出现这个兼容问题，它遮住了底部页面，造成了这个样式兼容问题。可以看出：在华为浏览器中下方工具条的高度不算在浏览器自身bom高度上，而是算网页dom的一部分。更通俗地理解可以为，它就是个z-index：无限高;bottom:0的。原创 2024-12-28 09:30:00 · 1619 阅读 · 0 评论 -
分享12个前端动画库让你的交互动效更加引人注目
动画效果，可以快速吸引访客注意力。通过创造性的对象运动和流畅的页面过渡，您不仅可以为您的网站增添独特的美感，还可以增强用户参与度并创造令人难忘的第一印象。在今天这篇文章中，我们跟你分享12个强大的 JavaScript 库，从而让创建动画变得简单。像滚动动画、手写动画、SPA页面过渡、打字动画、彩色动画、SVG动画……它们功能无穷。1.Anime.js地址：https://animejs.com/Anime.js 在 GitHub 上拥有超过 43k Stars，毫无疑问是最受欢迎的动画库之一。原创 2024-12-27 09:55:48 · 7975 阅读 · 0 评论 -
15 个简洁的 JavaScript 单行代码
武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。New Set（ARR）从数组中创建一个集合，固有地删除了重复项，而扩展运算符（``...'）将其转换回数组。替换（/（[A-Z]）（[[A-Z]）/g，'$ 1- $ 2'）：查找小写字母的出现，然后是大写字母，并用小写字母，连字符和大写字母代替。split（''）：将字符串转换为字符数组。原创 2024-11-12 10:38:41 · 363 阅读 · 0 评论 -
十个 JavaScript 隐藏的专业技巧样例代码
JavaScript 是最广泛使用的编程语言之一，但真正掌握它需要的不仅仅是了解基础知识。专业开发人员知道有一些隐藏的技术、鲜为人知的功能和微妙的技巧可以将您的 JavaScript 技能提升到一个新的水平。以下是经验丰富的 JavaScript 开发人员所信奉的 10 个秘密技巧——让我们看看您知道多少！1. 条件赋值的短路求值短路求值使用逻辑 `&&` 和 `||` 运算符有条件地赋值，从而减少了对 `if` 语句的需求。原创 2024-11-08 09:46:48 · 685 阅读 · 0 评论 -
前端框架对比和选择
前端框架是用于构建用户界面的工具和库，它提供组件化结构、数据绑定、路由管理和状态管理等功能，帮助开发者高效地创建和维护web应用的前端部分。选择适合的前端框架需要对项目的具体需求、团队的技术背景、性能要求、生态支持以及开发速度等多方面进行权衡。每个框架都有其独特的优缺点，理解这些差异可以帮助开发者做出明智的选择，从而确保项目的成功实施。原创 2024-10-09 09:43:48 · 1552 阅读 · 0 评论 -
uni-小程序SDK 概述
uni小程序SDK，是为原生App打造的可运行基于uni-app。原创 2024-09-27 09:38:15 · 1282 阅读 · 0 评论 -
中高级工程师都需知道的七种高级 JavaScript 技术用例
武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。无论你是优化性能、提高可读性还是构建可扩展的应用程序，这些方法都将使你的 JavaScript 技能更上一层楼。用例：在构建可与部分数据一起重用的复杂函数时，柯里化特别有用，例如，在函数式编程或 React 组件中。用例：解构在处理 API 或复杂对象时特别有用，它允许你仅提取所需的数据。原创 2024-09-24 09:40:16 · 783 阅读 · 0 评论 -
uni-app-通过vue-cli命令行快速上手
选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为，如就是下载图片模板。原创 2024-09-19 11:26:37 · 3724 阅读 · 0 评论 -
uni-app-通过HBuilderX可视化界面快速上手
uni-app支持通过 可视化界面、vue-cli命令行两种方式快速创建项目。HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。官方IDE下载地址。原创 2024-09-13 14:15:41 · 3532 阅读 · 0 评论 -
前端攻城狮需要掌握的5个JavaScript函数实用示例
武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。可进行Web前端，微信小程序、小游戏，2D/3D游戏，动画交互与UI广告设计等各种技术研发。使用公式 πr² 计算面积，其中 π 是数学常数（JavaScript 中的 Math.PI），r 是半径。否则，返回“未成年人”。原创 2024-09-10 11:11:04 · 1072 阅读 · 0 评论 -
解决移动端1px 边框优化的8个方法
您是否注意到 1px 边框在移动设备上有时会显得比预期的要粗？这种不一致源于移动屏幕的像素密度不同。在 Web 开发中，我们使用 CSS 来设置页面样式。但是，CSS 中的 1px 并不总是转换为设备上的物理 1px。这种差异就是我们的“1px 边框问题”产生的原因。罪魁祸首：像素密度每个设备都拥有特定的像素密度，由 devicePixelRatio 测量，它告诉我们物理像素与设备独立像素之间的比率。devicePixelRatio = 物理像素 / 独立像素。原创 2024-09-09 11:20:07 · 1286 阅读 · 0 评论 -
JavaScript 21个常用数组使用方法
在 JavaScript 中，数组是一种特殊类型的对象，用于存储和组织多个值。数组使您可以将值分组到单个变量名下，从而方便管理和操作数据集合。以下是更详细的解释：在 JavaScript 中，一对方括号 [] 表示数组。数组中的所有元素都用逗号 , 分隔。在 JavaScript 中，数组可以包含任何类型的元素。这意味着您可以创建包含 String、Boolean、Number、Object 甚至其他数组等类型的元素的数组。原创 2024-09-06 11:33:56 · 1320 阅读 · 0 评论 -
程序员都必须要知道的 8个常见数据结构
武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。在最大堆中，对于任何给定节点，节点的值大于或等于其子节点的值。在最小堆中，节点的值小于或等于其子节点的值。它们提供对最大（对于最大堆）或最小（对于最小堆）元素的有效访问，使其成为优先级队列实现的理想选择。想象一个图书馆，其中书籍（值）根据从书名派生的唯一代码（键）存储在书架（存储桶）中。原创 2024-09-05 10:06:28 · 1329 阅读 · 0 评论 -
HTML ＜template＞ 标签的基本技巧
HTML中的标记是 Web 开发中一个功能强大但经常未得到充分利用的元素。它允许你定义可重复使用的内容，这些内容可以克隆并插入 DOM 中而无需最初渲染。此功能对于创建动态、交互式 Web 应用程序特别有用。在本文中，我们将探讨有效使用 标记的 10 个基本技巧，帮助你在项目中充分发挥其潜力。1. 了解 标记的基础知识 标记是一个 HTML 元素，它包含页面加载时不会渲染的客户端内容。原创 2024-08-30 11:12:09 · 2689 阅读 · 0 评论 -
JavaScript中 新的七种 Set 方法
武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。union() 方法将两个集合中的独特元素合并为一个全新的集合。此方法确定一个集合的所有元素是否存在于另一个集合中。它检查一个集合是否完全包含另一个集合的所有元素。它收集每个集合独有的元素，排除任何共享元素。原创 2024-08-13 09:15:00 · 580 阅读 · 0 评论 -
4种防止模态框弹出时页面滚动的方法
武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。只需将一个类（例如，no-scroll）添加到 <body> 标签，并将其链接到带有 overflow:hidden 的 CSS 规则。再具体项目开发时，我们需要选择适合自己项目的情况，来匹配项目的需要，不能随意选择。当模态框弹出时，使用 JavaScript 添加此类，并在模态框关闭时将其删除。原创 2024-08-06 09:49:07 · 1085 阅读 · 0 评论 -
30 个JavaScript片段技巧干货，让你代码有更好的可读性
武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。使用 includes() 检查数组是否包含某个值，这是 indexOf 的更清晰的替代方案。创建一个新函数，当调用该函数时，将其 this 关键字设置为提供的值。将多个源对象合并为目标对象，有效地组合它们的属性。原创 2024-08-05 09:41:14 · 542 阅读 · 0 评论 -
JavaScript API 之 IntersectionObserver实现无限滚动、懒加载
IntersectionObserver 是一种 JavaScript API，它提供了一种异步监测元素与其祖先容器或视口之间交叉状态的方法。简单来说，它可以告诉我们一个元素是否进入了视口或者与其祖先容器发生了交叉。通过 IntersectionObserver，我们可以轻松地监听目标元素的可见性变化，进而根据这些变化来实现各种交互效果，比如懒加载图片、实现无限滚动等功能。相较于传统的事件监听方式，IntersectionObserver 更高效、灵活，可以提供更好的用户体验和性能优化。原创 2024-08-01 09:17:28 · 1558 阅读 · 0 评论 -
JavaScript 绿幕抠图实现
因为视频相关标准及浏览器的实现问题，很难在主流浏览器中顺利播放背景透明的视频。有两种方法可以为最通用的视频格式（MP4,H264）移除背景，实现透明效果：原创 2024-07-12 12:10:48 · 1849 阅读 · 0 评论 -
20 行核心（shader）代码实现实时绿幕抠图
武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。除了上面分析的核心代码之外还有一些为了让 Shader 运行起来的辅助代码，属于 WebGL 的基础知识，查看完整代码。将相似度与饱和度参数计算，然后与原像素点的灰度值混合，越大越靠近原像素点，越小越就接近灰度。原创 2024-07-12 12:04:56 · 1615 阅读 · 0 评论 -
开源浏览器引擎对比与适用场景：WebKit、Chrome、Gecko
武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。承接Web前端，微信小程序、小游戏，2D/3D游戏，动画交互与UI广告设计等各种技术研发。综上所述，不同的浏览器引擎适用于不同的场景。而Gecko则因其高度定制性和扩展性、隐私保护和安全性以及兼容性和稳定性等特点适合需要这些特性的场景。原创 2024-07-11 11:08:37 · 3466 阅读 · 0 评论 -
开源浏览器引擎：WebKit简介及工作流程、优缺点
WebKit是一个高性能、高速度、轻量级的浏览器引擎，能够高效、准确地解析和渲染网页内容，并提供丰富的交互功能。它广泛应用于各种浏览器和应用中，包括桌面浏览器、移动浏览器以及嵌入式系统等。WebKit不仅支持标准的Web技术，还通过不断的发展和更新，引入新的特性和优化，以提升用户体验和性能。原创 2024-07-11 09:12:29 · 1822 阅读 · 0 评论 -
yarn的安装与配置是怎样的？
Yarn的安装可以通过多种方式进行，主要取决于你的操作系统原创 2024-07-10 10:53:04 · 716 阅读 · 0 评论