
web前端技术
文章平均质量分 95
从零基础学起,主要配合python或Java进行实战开发,加深印象,主要为自己的学习笔记.
广龙宇
专注于Rust编程及相关技术分享,涵盖系统编程、开源项目及实用技巧,内容深入浅出,适合新手和进阶学习。关注我,获取最新的技术资讯和实用教程,共同成长为更好的开发者。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
【Web API系列】WebTransportSendStream接口深度解析:构建高性能实时数据传输的基石
WebTransportSendStream是的子类,专门用于处理二进制数据的发送。sendOrder: 控制数据包的发送优先级(数值越小优先级越高,null表示默认顺序)。getStats(): 返回包含传输统计信息的Promise对象(如已发送字节数、RTT等)。低延迟传输:基于QUIC协议绕过TCP队头阻塞细粒度控制:通过sendOrder、getStats实现精准优化高扩展性:与现有Web API(如WebRTC、WebCodecs)无缝集成。原创 2025-05-31 08:02:47 · 11877 阅读 · 8 评论 -
【Web API系列】深入解析 Web Service Worker 中的 WindowClient 接口:原理、实践与进阶应用
WindowClient 接口作为 Service Worker 生态系统的关键枢纽,为现代 Web 应用提供了前所未有的窗口控制能力。窗口生命周期管理的核心机制多方法组合使用的进阶模式企业级应用的架构设计思路性能与安全的最佳实践方案在实际项目应用中,建议采用渐进式集成策略,从简单的焦点控制开始,逐步扩展到复杂的多窗口协同场景。同时要建立完善的监控体系,对窗口状态变化、方法调用成功率等关键指标进行持续跟踪。原创 2025-04-27 09:34:53 · 15554 阅读 · 20 评论 -
【Web API系列】Web Shared Storage API 深度解析:WindowSharedStorage 接口实战指南
WindowSharedStorage 作为 Web 存储技术演进的重要里程碑,其设计充分平衡了功能强大性与隐私安全性。如何构建基于 Worklet 的安全存储架构复杂业务场景下的高级应用模式性能优化与异常处理的全套方案采用渐进增强策略应对兼容性问题建立数据生命周期管理机制定期审计存储使用合规性随着 Privacy Sandbox 生态的持续完善,WindowSharedStorage 必将在智能 Web 应用开发中发挥更重要的作用。原创 2025-04-22 09:22:40 · 16499 阅读 · 22 评论 -
【Web API系列】Web Shared Storage API之WorkletSharedStorage深度解析与实践指南
WorkletSharedStorage作为现代Web存储的革新方案,成功在功能性与隐私性之间找到了平衡点。通过本文的系统性解析,你应该已经掌握:如何通过Worklet上下文安全访问共享存储、如何利用预算机制优化资源使用、以及在不同业务场景中的最佳实践方法。在实际应用中,需要特别注意以下几点:首先,始终遵循最小数据原则,仅存储必要的匿名标识信息;其次,合理设计预算消耗策略,避免过早耗尽操作额度;最后,充分利用异步迭代器等现代JavaScript特性提升代码可维护性。原创 2025-04-16 14:24:17 · 14479 阅读 · 15 评论 -
【Web API系列】WebSocketStream API 深度实践:构建高吞吐量实时应用的流式通信方案
WebSocketStream API 通过引入流式处理模型,极大地提升了 WebSocket 在复杂场景下的应用能力。从实时协作系统到金融数据平台,其背压管理机制和现代流式接口为高性能 Web 应用开发提供了新范式。渐进增强:结合特性检测实现优雅降级性能监控:持续跟踪内存使用和网络延迟指标安全加固:始终使用加密连接并实施严格的身份验证错误处理:建立完备的错误恢复机制随着浏览器支持度的不断提升,WebSocketStream API 有望成为实时 Web 应用开发的首选方案。原创 2025-04-10 09:32:02 · 16443 阅读 · 14 评论 -
【Web API系列】XMLHttpRequest API和Fetch API深入理解与应用指南
XMLHttpRequest作为Web异步通信的奠基者,至今仍在特定场景下发挥作用,而Fetch API凭借其现代化的设计正在成为主流选择。浏览器兼容性:如需支持旧版浏览器,XHR仍是必要选项。功能需求:进度监控、请求取消等特性可能影响技术选型。代码可维护性:Fetch的Promise链与async/await语法更易维护。未来,随着Web Streams API和Service Worker的普及,Fetch API将在性能优化和离线体验领域展现更大潜力。原创 2025-04-07 09:23:36 · 16565 阅读 · 22 评论 -
【Web API系列】深入掌握Web键盘API(Keyboard API):构建全屏沉浸式应用的完整指南
现代Keyboard API为Web应用带来了设备级的输入控制能力,结合全屏API可打造真正沉浸式的专业级应用。物理键与布局键的映射关系:通过实现国际化支持输入控制权管理:合理使用lock()与unlock()平衡功能与用户体验性能优化策略:输入平滑处理、状态同步机制渐进增强方案:传统事件与Keyboard API的兼容性处理建议开发者在实际项目中采用分层架构设计,将输入处理模块抽象为独立服务。原创 2025-03-27 10:10:38 · 25070 阅读 · 19 评论 -
【NodeJs】轻松构建一个纯ts项目-tsground
本文灵感来源于此前的一篇文章【NodeJs】从头到尾构建一个Typescript项目,由于构建一个TS项目要经过许多步骤,比如创建项目,添加依赖,写配置文件,除此以外还要各种调试,而眼下又没找到个合适的脚手架来生成一个项目,这就导致比如我想测试某一段ts代码或者想要写个小demo就是花费很多功夫,因此就自己做一个cli来生成这种项目,替代这些前期配置的步骤,如果再有需要自定义的需求直接再生成的项目上修改就好了,tsground就这么诞生了。原创 2024-11-18 09:35:02 · 15732 阅读 · 1 评论 -
【NodeJs】从头到尾构建一个Typescript项目
试想一下这么一个情况,你想要对一些数据或文件进行批量处理,但是你用的编程语言比较顺手的或者工作使用的编程语言是Typescript或者Javascript,因此想要使用Typescript来实现这些操作。当然,要想完成这个工作,哪怕你使用python,shell也是可以完成的,但是这里只谈论使用Typescript.现在就是这个情况,我想要写一个nodejs的TS项目,能够编译我写的代码,并且执行代码,得到我想要的结果。原创 2024-10-28 13:41:34 · 10812 阅读 · 1 评论 -
【Hexo博客|Fluid主题】实现链接卡片效果
今天在阅读Github新闻时,发现一个链接卡片的库登上了Hello Github,看到这个效果实在是太有趣了,就跟知乎上的链接差不多,所以打算将该功能添加到我的博客中。先看看效果如果你也有类似的需求,那么就学起来吧。对于该功能,应该整合相关代码片段,这样使用体验会更好,后面有空写一个。原创 2024-01-26 16:17:20 · 1674 阅读 · 0 评论 -
【全栈开发|Fresh框架】Fresh环境安装与快速体验Fresh全栈开发
对新技术永远有一种探索欲。上次听说Fresh的时候还不是很完善,但是自称下一代Web全栈开发框架。Fresh是一个面向JavaScript和TypeScript开发人员的全栈现代Web框架,旨在创建高质量、高性能和个性化的Web应用程序变得轻而易举。基于Deno运行时:Fresh由Deno原班人马开发,享有Deno一系列工具链和生态的优势,比如内置的测试工具、支持httpimport等等。原创 2024-01-09 09:42:41 · 2185 阅读 · 0 评论 -
【Web API系列】使用异步剪贴板API(async clipboard)的图像的编程复制和粘贴
访问系统剪贴板的传统方法是通过进行剪贴板交互。虽然这种剪切和粘贴方法受到广泛支持,但还是有代价的:剪贴板访问是同步的,并且只能对 DOM 执行读写操作。这对于少量文字来说没什么问题,但在很多情况下,阻止相应网页以进行剪贴板传输会带来糟糕的体验。可能需要耗时的清理或图片解码,才能安全粘贴内容。浏览器可能需要从粘贴的文档加载或内嵌链接的资源。这样会在等待磁盘或网络时阻塞网页。想象一下,向混合中添加权限,要求浏览器在请求剪贴板访问权限时屏蔽网页。同时,针对剪贴板交互的设置的权限较为宽松,并且因浏览器而异。原创 2023-12-31 16:18:20 · 2026 阅读 · 1 评论 -
【Web API系列】使用getDisplayMedia来实现录屏功能
在当今这个信息爆炸的时代,屏幕录制已成为一种较为常见的需求。无论是制作教学视频、演示产品功能、记录游戏精彩瞬间,还是进行远程协作,录屏功能都扮演着至关重要的角色。你是否曾想过,无需安装任何第三方软件,仅通过浏览器就能轻松实现屏幕录制?这听起来似乎有些不可思议,但 Web API 中的接口却让这一切成为可能。是一个强大的 API,它允许 Web 应用程序捕获屏幕或特定窗口的内容,并将其作为媒体流进行处理。这意味着你可以像操作摄像头或麦克风一样,对屏幕内容进行录制、编辑、甚至实时传输。原创 2023-12-26 19:31:18 · 3875 阅读 · 0 评论 -
【web前端技术】dicebear一句话生成头像
DiceBear是一种基于哈希算法的头像生成工具,能够根据用户的唯一标识快速生成独特的头像。其核心原理包括输入处理、哈希计算、颜色生成和SVG渲染。DiceBear支持多种风格和自定义配置,包括颜色、形状、大小等,满足不同应用场景的需求。通过本文,你已经掌握了DiceBear的安装、配置和使用方法,并了解了其在用户系统、即时通讯应用和在线学习平台等场景中的实际应用。DiceBear的优势在于其简单性、高效性和灵活性,是Web前端开发中生成用户头像的理想选择。希望本文对你有所帮助!原创 2022-06-28 20:40:19 · 127016 阅读 · 0 评论 -
【web前端技术】深入理解与应用:响应式画廊插件 Justified Gallery
Justified Gallery 是一款 jQuery 插件,它能够创建一个响应式的、基于网格布局的图片画廊。其核心功能在于能够动态计算并调整每张图片的大小,使得所有图片在同一行的高度保持一致,从而形成一个整齐、美观的画廊布局。与传统的固定大小网格布局相比,Justified Gallery 能够更好地利用空间,避免出现大量的空白区域,尤其是在处理不同尺寸图片时,更能体现其优势。Justified Gallery 的主要优势包括:自动适应不同屏幕尺寸,提供最佳的视觉体验。原创 2022-06-22 15:24:56 · 131159 阅读 · 0 评论 -
【web前端技术】前端工程师必备技能:精准识别手机端
在移动互联网时代,网站和 Web 应用的访问流量越来越向移动端倾斜。对于前端工程师而言,能够准确判断用户使用的设备是否为手机端,是一项至关重要的技能。这不仅关系到网站的响应式设计和用户体验,还影响着页面布局、功能实现、性能优化等多个方面。传统的桌面端和移动端 Web 开发往往采用不同的技术栈和设计思路。然而,随着响应式设计、移动优先等理念的普及,越来越多的网站和 Web 应用开始采用一套代码适配多种设备。原创 2022-06-22 15:11:32 · 131268 阅读 · 0 评论 -
web前端基础(一)——HTML+CSS
系列文章目录web前端基础(一)——HTML+CSS目录系列文章目录前言HTMLHTML的介绍1. html的定义2. html的作用HTML的基本结构1. 结构代码2. 浏览网页文件vscode的下载与使用1. vscode 的基本介绍2. vscode 的安装3. vscode 的插件安装4. vscode 的插件卸载5. 设置字体大小6. 设置颜色主题7. 设置默认浏览器[可选]初识常用的HTML标签1. 常用的 ..原创 2021-08-18 08:38:21 · 145567 阅读 · 5 评论