奇舞周刊-CSDN博客

转载奇舞周刊第539期：10 个像专业人士一样使用 <template> HTML 标签的基本技巧

奇舞推荐■■■10 个像专业人士一样使用 <template> HTML 标签的基本技巧HTML中的<template>标记是 Web 开发中一个功能强大但经常未得到充分利用的元素。它允许你定义可重复使用的内容，这些内容可以克隆并插入 DOM 中而无需最初渲染。此功能对于创建动态、交互式 Web 应用程序特别有用。一文吃透 WebSocket 原理通常我们开发H5，都是...

2024-08-23 18:34:32 1

转载 SVG中的paint-order现在也支持普通文本了

很多CSS特性更新是非常隐晦的，导致很容易被忽视。最近，Chrome 123就新增了paint-order对普通文本的支持，这就让文字描边实现更加容易了。这并不是一个新属性，SVG中已经支持很多年了。一起了解一下吧一、过去只支持 SVG 元素paint-order，顾名思义，表示绘制的顺序。对于一个图形的绘制，顺序还是非常重要的。例如用SVG来绘制一个带边框的矩形<style>...

2024-08-22 18:00:39 6

本文作者为 360 奇舞团前端开发工程师引言在现代 Web 开发中，将高性能计算和智能分析集成到前端应用中已经成为一种趋势。本文将介绍在超大型远洋航运颗/货船舶管理系统中，借助于 Rust 和 AI 技术实现 Web 侧端智能数据分析处理海量传感器数据进行可视化界面的渲染工作，通过一系列的数据清洗、转换和分析，提升用户体验。背景数据分析与预处理的需求在现代 Web 应用中，特别是在数据密集型的应...

2024-08-21 18:00:48 911

原创 Vue 项目 SEO 优化的关键

本文作者为 360 奇舞团前端开发工程师最近在一个 Vue 项目中，发现了许多在开发前、中、后期需要特别注意的细节，以确保性能和 SEO 的最佳结合。本文将聊聊 Vue 项目要做 SEO 优化方向侧的一些相关内容什么是 SEO，为什么它如此重要？SEO（Search Engine Optimization），即搜索引擎优化，是指通过优化网站的内容、结构和技术，使其在搜索引擎的自然搜索结果中获得更高...

2024-08-20 18:04:16 899

转载一次网络请求的顿悟之旅

????目录1 IP、DNS 和 CDN2 TCP、消息分包和协议设计3CGI 和 FastCGI4服务器模型谈5数据层的演进当你在浏览器输入 qq.com 按下回车键，到页面呈现在你面前，整个过程发生了什么？我以前思考过这个问题，从最前面的浏览器到最后的 db 都梳理的一遍，触发了一次技术顿悟，将很多散落的知识点贯通起来了。01IP、DNS 和 CDN如果面试时问你「局域网 IP 有哪些 IP ...

2024-08-19 18:00:43 27

转载奇舞周刊第538期：前端在线代码编辑器技术杂谈

奇舞推荐■■■前端在线代码编辑器技术杂谈本文介绍了一个代码编辑和实时预览的项目，调研了多个开源库，并对这些库的实现细节进行了深入分析。比较了不同方案在代码编译、依赖处理和模块导入方面的优缺点。前端H5与客户端Native交互原理 - JSBridge在混合应用开发中，一种常见且成熟的技术方案是将原生应用与 WebView 结合，使得复杂的业务逻辑可以通过网页技术实现。实现这种类型的混合应用时，...

2024-08-16 18:03:40 36

转载消灭 DOM 型 XSS 的终极杀招！

大家好，我是 ConardLi。最近发现 Chrome 团队在博客更新了一篇文章，表示 YouTube 要实施 Trusted Types（可信类型）了，要求相关插件的开发者尽快完成改造，不然插件可能就用不了了。Trusted Types 要求第三方浏览器扩展程序在为 DOM API 赋值时使用类型化对象而不是字符串。自 2024 年 7 月 25 日起，不符合 Trusted Types 安全要...

2024-08-15 18:01:27 45

原创纯前端实现语音文字互转

本文作者系360奇舞团前端开发工程师在现代互联网的发展中，语音技术正逐渐成为改变用户体验的重要一环。Web Speech API 的引入使得开发者能够在浏览器中轻松实现语音识别和语音合成功能，为用户带来更加直观和便捷的操作体验。本文将介绍 Web Speech API 的基本概念、功能特性以及如何利用它来构建创新的应用程序。什么是 Web Speech API？Web Speech API 是一组...

2024-08-14 18:01:37 847

原创常见的加密算法

本文作者系360奇舞团前端开发工程师前言密码学是一门研究信息加密和解密技术的科学，通过数学方法设计和分析加密算法和协议，以确保数据在传输和存储过程中的保密性、完整性、真实性和不可否认性。在前后端的各种重要交互场景中（登录，支付）往往都会用到一种或者多种加密算法，来保护用户的信息安全。古代密码学凯撒密码凯撒密码是一种替换加密方法，将字母表中的每个字母替换为其后固定位置的另一个字母。阴符和阴书阴符是一...

2024-08-13 18:04:16 405

转载无意中发现 Vue3 的小技巧，帮我节省很多代码

无意中发现 Vue3 的小技巧，帮我节省很多代码前言大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~最近在开发 Vue3 项目时偶然发现了一个技巧：组件的事件往下传可以进行叠加！，感觉对大家的开发肯定有帮助，能节省很多代码量！！！我会通过一个小案例来跟大家讲解这个小技巧的好处体现在哪~场景先来说说我的场景吧，我在项目开发中对一个基础组件BasicCom...

2024-08-12 18:00:26 60

转载奇舞周刊第537期：WebGPU和WebAssembly能否克服DOCKER的AI GPU问题？

奇舞推荐■■■WebGPU与WebAssembly能否克服Docker的AI GPU问题"WebGPU和WASM能否颠覆AI GPU领域？本文探索其在解决DOCKER AI GPU问题上的潜力与挑战。跟随我一起揭开技术的神秘面纱，看看未来的GPU加速世界如何重塑我们的AI体验！"N种集成Rust与Nodejs的方案"探索 Rust 和 Node.js 的最佳结合方式！从跨越编程语言界限到优化性...

2024-08-09 15:45:20 65

转载 70%的人都答错了的面试题，vue3的ref是如何实现响应式的？

前言最近在我的vue源码交流群有位面试官分享了一道他的面试题：vue3的ref是如何实现响应式的？下面有不少小伙伴回答的是Proxy，其实这些小伙伴只回答对了一半。当ref接收的是一个对象时确实是依靠Proxy去实现响应式的。但是ref还可以接收string、number或boolean这样的原始类型，当是原始类型时，响应式就不是依靠Proxy去实现的，而是在value属性的getter和...

2024-08-08 18:06:45 66

原创使用 React Context API 的最佳实践

本文作者为 360 奇舞团前端开发工程师本文将详细介绍如何使用 React 的 Context API 优雅地实现多主题切换，解决 props 穿透问题，并避免不必要的重新渲染。通过具体的示例代码，展示如何在浅色和深色模式之间切换，并探讨在实际项目中管理多个 Context 的最佳实践。目录什么是 React Context API，何时使用？在浅色和深色模式之间切换 UI 主题使用属性传递方案C...

2024-08-07 18:05:35 404

原创 AI视频解决方案汇总

本文作者为 360 奇舞团前端开发工程师随着人工智能技术的不断发展，AI生成视频的领域也在不断壮大。从基于大规模数据的深度学习方法到创新的算法和工具，各种解决方案正在不断涌现，为视频制作带来了新的可能性，从最开始的Pika、Runway到一经问世就惊艳众人的Sora，可以说大模型在多模态，特别是视频模态的发展速度远超我们的想象。不过就文生视频而言，目前市面上仍然没有像ChantGPT这样的现象级产...

2024-08-06 18:01:33 314

转载深度对比 React 与 Vue 的 Diff 算法

昨天接了个广子，恰了点饭。你们的吐槽我的认了，哎呀，你们都说得对。所以我今晚连夜爆肝写了一篇专门用来面试的干货，总计 7000 字左右，分享给大家，必须要抢救一下想要取关的大佬们！许多朋友会在简历上同时写自己会 React、Vue，但是倒霉的面试官一看到这种简历，就喜欢问它们有什么区别。其中频率比较高的一个问题就是 React 与 Vue 的 diff 算法有啥相同之处和不同之处...很显然，这种...

2024-08-05 18:01:52 73

原创奇舞周刊第536期：B端常用交互方式的量化及优化实践和指引｜得物技术

奇舞推荐■■■B端常用交互方式的量化及优化实践和指引｜得物技术B端前端交互领域是处于视觉设计师、产品和前端之间的交叉地带。Vue3 用了组合式 (Composition) API 后代码变得更乱了，怎么办？组合式 (Composition) API 的一大特点是“非常灵活”，但也因为非常灵活，每个开发都有自己的想法。加上项目的持续迭代导致我们的代码变得愈发混乱，最终到达无法维护的地步。本文是我...

2024-08-02 18:26:50 644

转载 next.js 的成熟，到底意味着什么

随着 SPA 技术的兴盛，前端这十年以来，开发方式从早期 asp/jsp/php 实现了一个非常大的转变。前后端分离、纯客户端方案成为了前端开发中的主流选择。当我们在讨论 react、vue、angualr 时，大多数时候，讨论的都是客户端渲染时的表现，其实很少会考虑他们在服务端渲染这一块做的到底如何了。但是事实上。服务端渲染方案一直是一个巨大的刚需。他虽然没有被更普遍的提及，但是在大多数团队中...

2024-07-31 18:48:27 98

转载深度解析 tailwindcss 设计源规则

这段时间陆陆续续收到了很多朋友对于如何更进一步使用 tailwindcss 的提问，发现大家在学习和使用 tailwindcss 的过程中，并没有掌握真正的核心的要点。所以经常会在一些时候比较无所适从。例如，如果公司有自己的设计规范，我应该如何调整 tailwindcss 去自定义我的设计方案？又或者有的同学不太喜欢 tailwindcss 的默认尺寸 m-1 表示 margin: 0.25rem...

2024-07-30 18:34:42 104

转载如何实现一个分词器

如何实现一个分词器在开发代码补全插件的过程中，根据项目需要，我实现了一个分词器，本文将介绍分词器的具体实现细节。一、什么是分词器？分词器是 NLP（natural language processing，自然语言处理）领域的一个重要部分，它可以把一段文本转换为小的单元，称为 token 。token可以是单词、字符、标点符号等。在基于 Transformer 的 LLM （Large Langua...

2024-07-29 18:39:45 99

原创奇舞周刊第535期：AI Code 在团队开发工作流的融合思考

奇舞推荐■■■AI Code 在团队开发工作流的融合思考在2024年，生成式人工智能（Generative AI）显著提升了软件开发效率，渗透到编码、测试和文档等各个环节。AI与低代码平台的结合提升了功能交付的效率，但面临定制化和成本挑战。2024 Vue 生态工具最能打的组合！2024 年 Vue 开发生态系统推荐使用 create-vue 脚手架、Pinia 状态管理、Vue Router...

2024-07-26 18:09:01 454

原创安卓手机部署大模型实战

本文作者系360奇舞团前端开发工程师前言自ChatGPT发布以来，大语言模型（Large language model, LLM)就成了AI乃至整个计算机科学的话题中心。学术界，工业界围绕大语言模型本身及其应用展开了广泛的讨论，大量的新的实践层出不穷。由于LLM对计算资源的需求极大，有能力部署大语言模型的公司和实验室一般通过搭建集群，然后开放API或者网页demo的方式让用户可以使用模型。在人们纷...

2024-07-25 18:00:43 2115

转载基于大模型 + 知识库的 Code Review 实践

背景???? 想法源于在一次 Code Review 时，向 Claude 询问哪种写法代码更优雅得来。当时就想能不能让 AI 帮我们辅助做 Code Review？痛点信息安全合规问题：公司内代码直接调 ChatGPT / Claude 会有安全/合规问题，为了使用 ChatGPT / Claude 需要对代码脱敏，只提供抽象逻辑，这往往更花时间。三星引入 ChatGPT 不到 20 天，被曝发生 3...

2024-07-24 18:00:58 144

原创一文带你了解 Chrome AI

本文作者系360奇舞团前端开发工程师在人工智能迅猛发展的今天，Google Chrome 正在通过其前沿的技术推动浏览器体验的革新。特别是 Gemini 大模型作为 Chrome 的核心AI技术之一，正引领着智能化应用的新时代。本文将深入探讨 Gemini 大模型及其在 Chrome 浏览器中的应用，涵盖 Built-in AI 、DevTools AI 以及如何在网页中直接调用 Gemini A...

2024-07-23 18:01:18 907

转载 NPM 依赖管理的复杂性

这是一个很少被提及的话题 —— 「依赖管理」(Dependencies Management) 。在开源文化盛行的现代，多数时候我们都不必从零开始搭建一套软件系统，转而可以借助诸多开放的代码片段及其他资源更快速高效开发软件应用，这算的上软件工程发展史上一次巨大革命，因为它能大幅提升软件工业的生产效率，我们不必再从底层开始编写所有代码，大部分问题与常见的编程模式都能在社区找到相应的解决方案，且这些被...

2024-07-22 18:00:55 124

转载奇舞周刊第534期：再见lodash，你好es-toolkit ！

奇舞推荐■■■再见lodash,你好es-toolkites-toolkit 是一个现代的 JavaScript 实用库，提供了一系列强大的函数，适用于日常使用。与 lodash 等替代品相比，es-toolkit 提供了显著更小的包体积（最多减少97%）和 2-3倍更快的运行时性能。AI更适合前端开发人员，UI不只是聊天机器人！前端生态系统发展得如此之快，从某种程度上讲，前端工程师比其他任...

2024-07-19 16:23:17 162

转载前端 lockfile 合并冲突，如何正确地处理？

某次前端需求开发中，新增了一个 npm 包，在进行合码时发现 lockfile 出现冲突。❝lockfile，即包管理工具的 lock 文件，比如 package-lock.json 、yarn.lock 、pnpm-lock.yaml手动解冲突非常低效，又容易出错。以下是几种常用的解决方案：删掉 lockfile，后面再重新安装依赖重置为其中一个分支的 lockfile，后面再重新安装依赖运行依...

2024-07-16 18:31:01 143

转载 React 项目里，如何快速定位你的组件源码？

如果说业务开发中最重要的能力，那定位代码的能力肯定是其中之一。业务项目一般代码都很多，你拿到一个需求之后，可能改起来不难，但是要定位在哪里改比较难。特别是接手别人写的代码的时候。大家都是怎么在不熟悉的项目里定位的代码呢？很多都学都是搜文案，搜 className。这样没问题，但如果你用了 styled-component 之类的方案之后，className 都是动态生成的：而且不少项目都做了国际化...

2024-07-15 18:08:20 144

原创奇舞周刊第533期：单点登录（SSO）实现详解

奇舞推荐■■■单点登录（SSO）实现详解！！单点登录是什么？你是怎么理解的？单点登录是如何实现的。纯前端怎么实现检测版本更新，请看这篇！在传统的多页Web应用中，每次用户访问页面时，都会从服务器获取最新的页面和资源，因此版本更新相对简单，用户总是能获取到最新的版本。然而，SPA在首次加载后，前端的静态资源会缓存在浏览器内存中，且在整个使用过程中通常不会自动重新加载。这种特性意味着如果应用有新的...

2024-07-12 19:22:31 562

转载 JavaScript ES15 新特性正式发布！全网最详细讲解！

前言2024 年 6 月 26 日，第 127 届 Ecma 大会批准了 ECMAScript 2024 语言规范，这意味着它现在正式成为标准。新特性如下：Object.groupBy、Map.groupByPromise.withResolversString.prototype.isWellFormed、String.prototype.toWellFormedAtomics.waitAsyn...

2024-07-09 18:54:31 205

转载新知识get，vue3是如何实现在style中使用响应式变量？

前言vue2的时候想必大家有遇到需要在style模块中访问script模块中的响应式变量，为此我们不得不使用css变量去实现。现在vue3已经内置了这个功能啦，可以在style中使用v-bind指令绑定script模块中的响应式变量，这篇文章我们来讲讲vue是如何实现在style中使用script模块中的响应式变量。注：本文中使用的vue版本为3.4.19。看个demo我们来看个简单的demo，i...

2024-07-08 17:08:07 178

原创奇舞周刊第532期：奇舞团生日快乐~

时光荏苒，岁月如歌，转眼间，奇舞团13岁啦????????????《奇舞周刊》也陪伴大家来到了第532期。????????致敬每一位读者和创作者，是你们的热情、陪伴和鼓励，让我们不断前进。❤️❤️❤️奇舞团13周年合影奇舞推荐■■■谈谈 WebComponents本文介绍了Web Components的核心技术：Custom Elements、HTML Templates和Shadow DOM，展示了它们如何创建可重用、隔...

2024-07-05 17:56:54 704

原创 python爬虫

本文作者系360奇舞团前端开发工程师概念网络爬虫是伪装成客户端与服务端进行数据交互的程序，重点模拟人的行为爬虫的步骤发起网络请求爬虫请求模块requests：requests是Python中使用最广泛的HTTP请求库，可以发送HTTP/HTTPS请求，同时支持Cookie、文件上传等功能urllib:是Python的标准库之一，提供了用于打开和读取URL的接口importrequestsre...

2024-07-04 18:05:01 1007

转载渲染树的形成原理你真的很懂吗？

浏览器系列文章说一下为什么写这个系列？原因一：该文章系列不管你是前端开发者，还是后端开发者在面试中经常会被问到一个问题“从浏览器输入url到页面显示经历了哪些？”一个非常常见的问题，看了该系列绝对能惊到面试官，可能就因为这一道面试题就收了你呢！嘿嘿。原因二：自己主要是后端方向，该系列文章也是为了学习记录，方便以后查阅。极客时间李兵老师也开了这个专栏，看后还有几个疑问的点，自己查询资料学习整理...

2024-07-03 18:02:06 121

转载太逼真了！Gen-3 Alpha重磅发布，Sora最强竞争对手！

专注AIGC领域的专业社区，关注微软&OpenAI、百度文心一言、讯飞星火等大语言模型（LLM）的发展和应用落地，聚焦LLM的市场研究和AIGC开发者生态，欢迎关注！6月17日晚，著名生成式AI平台Runway在官网发布了，全新文生视频模型——Gen-3 Alpha。与Gen-2相比，Gen-3在生成视频的质量、色彩、饱和度、光影、文本语义还原、运镜、动作一致性、场景切换等实现大幅度提升。...

2024-07-02 18:04:07 167

原创如何开发一款JSSDK

本文作者系360奇舞团前端开发工程师JSSDK的定义与分类什么是JSSDKSDK是Software Development Kit（软件开发工具包）的缩写，JSSDK是为了帮助前端实现特定需求，而向开发者暴露的一些JS-API的集合，开发者可以通过它在网页中集成和使用某些特定的功能，例如社交分享、地图服务、支付功能等.它通常包括一下模块：JavaScript库：这是 JSSDK 的核心部分，包含了...

2024-07-01 18:00:37 1040

转载奇舞周刊第531期：State of JavaScript 2023

奇舞推荐■■■State of Js 2023在JavaScript技术领域，我们看到开发者们不再钟情于一些广泛使用的库，比如像Svelte、Solid和htmx这样使用率不那么高的库在满意度方面也取得了相当好的成绩，这也证明了JavaScript生态的活力。另外一方面，我们看到“Rust化”在前端基建方向也成了一种新的潮流，像编译器、构建工具、元框架等领域都出现了不少基于Rust的技术。而回...

2024-06-28 18:33:09 132

转载 Vite 热更新(HMR)原理了解一下

❝幸福的三大要素是：有要做的事（something to do）、有要爱的人（someone to love）、有寄予希望的东西（something to hope for）❞前言用过Vite进行项目开发的同学，肯定听说过，Vite在开发环境和生产环境是两种不同的资源处理方式。在开发环境，Vite以原生ESM方式提供源码，让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换...

2024-06-25 16:00:10 151

转载一种适合H5屏幕适配方案

一、动态rem适配方案：适合H5项目的适配方案1. @media媒体查询适配首先，我们需要设置一个根元素的基准值，这个基准值通常根据视口宽度进行计算。可以在项目的 CSS 文件中，通过媒体查询动态调整根元素的 font-size。html{font-size:16px;/*默认基准值*/}...@media(min-width:1024px){html{...

2024-06-24 15:43:32 229

原创论 To B 产品：从概念到市场实践

本文作者为 360 奇舞团产品经理论 To B 产品：从概念到市场实践To B 产品在商业世界中扮演着至关重要的角色。相较于面向消费者的To C市场，To B市场更专注于为其他企业提供产品和服务。理解和成功运营To B产品需要对其特定的市场需求和运作方式有深刻的认识。产品的多层次结构To B产品同样可以按照核心利益、有形性能和附加性能来划分。首先是产品的核心利益，即企业客户从产品中直接获益的方面。...

2024-06-20 19:01:21 1016

转载单核QPS提升10倍，亿级日调用！QQ频道前端网关升级之路

????目录1 生于 B 端：先让自己满意2 长于 C 端：跨越边界3提升安全/可用性4提升性能/效率：实用第一5提升可观测性：深度是被逼出来的6 总结：以躺平的心态完成不躺平在流量增长、功能扩展的背景下，叠加性能优化的内在要求，把一个协议转换发展为业务网关，过程有多曲折？选型又有哪些考虑？为什么放弃了JSAPI（客户端方案）、HTTPSSO（后台方案），最后选择了Node（前端）方案？本文...

2024-06-18 18:01:37 114

空空如也

空空如也