自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

趣谈前端

公众号《趣谈前端》.一个重度代码洁癖者,有对前端生态的总结,思考和探索.内容涵盖了笔者多年对vue;react;node;webpack以及javascript框架设计的探索和经验.

  • 博客(471)
  • 收藏
  • 关注

原创 当后端一次性丢给你10万条数据, 作为前端工程师的你,要怎么处理?

前段时间有朋友问我一个他们公司遇到的问题, 说是后端由于某种原因没有实现分页功能, 所以一次性返回了2万条数据,让前端用select组件展示到用户界面里. 我听完之后立马明白了他的困惑,...

2020-06-09 22:00:00 16237 43

原创 前端开发中不可忽视的知识点汇总(二)

本文为前端开发重要知识点汇总系列第二篇,上一篇请参考22. 让页面里的字体变清晰,变细用CSS怎么做?-webkit-font-smoothing:antialiase...

2019-10-21 08:00:00 2157 2

原创 web性能优化的15条实用技巧

javascript在浏览器中运行的性能,可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂,事实上,多数浏览器使用单一进程来...

2019-10-02 18:30:20 2884 3

原创 前端开发中不可忽视的知识点汇总(一)

本文结合自己前端日常开发中,经常用到的且非常重要的一些知识点,进行了汇总,这是本系列第一篇。1.css禁用鼠标事件.disabled { pointer-eve...

2019-09-24 19:34:05 1599

原创 用css3实现惊艳面试官的背景即背景动画(高级附源码)

我们传统的前端更多的是用javascript实现各种复杂动画,自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,...

2019-09-22 18:30:00 4156 2

原创 5分钟教你用nodeJS手写一个mock数据服务器

对于前端开发者而言,javascript正扮演着越来越重要的地位,它不仅能为浏览器端赋能,在web服务器方面也有很大的价值(我们可以用nodeJS来写服务端代码,启动we...

2019-09-07 18:30:00 3824 4

原创 前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)

前言hello, 大家好, 我是徐小夕, 今天又到了我们的博学时间。本文是 100+前端几何学应用案例 专栏的第四篇文章, 之前和大家分享了如何从零实现几何画板以及几何画板的撤销重做功能:几何学在前端边界计算中的应用和原理分析前端图形学实战: 从零开发几何画板(vue3 + vite版)前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)今天继续和大家分享一下几何...

2022-11-29 08:20:17 1

转载 简单实现一个虚拟形象系统

大厂技术坚持周更精选好文 前言 上周启动居家开会的时候,看到有人通过「虚拟形象」功能,给自己带上了口罩、眼镜之类,于是想到了是不是也可以搞一个简单的虚拟形象系统。大致想来,分为以下几个部分: 卷积神经网络(CNN) 下面讲解一下三层CNN网络模型:卷积层——提取特征卷积层的运算过程如下图,用一个卷积核扫完整张图片:通过动图能够更好的理解卷积过程,使用一个卷积核(过滤器)来过滤图像的各个小区...

2022-11-27 23:07:37 6

原创 前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)

hello, 大家好, 我是徐小夕, 今天又到了我们的博学时间。本文是 100+前端几何学应用案例 专栏的第三篇文章, 在第一篇文章 几何学在前端边界计算中的应用和原理分析 和第二篇文章 前端图形学实战: 从零开发几何画板(vue3 + vite版) 中我介绍了几何学在前端领域的应用以及如何从零开发一个几何画板:2022-10-15 20.46.21.gif如果大家感兴趣可以在 gitee 查看我...

2022-11-19 11:59:06 33

转载 从零实现一个迷你 Webpack

大厂技术坚持周更精选好文webpack 是当前使用较多的一个打包工具,将众多代码组织到一起使得在浏览器下可以正常运行,下面以打包为目的,实现一个简易版 webpack,支持单入口文件的打包,不涉及插件、分包等。前置知识举个????,先来看看下面这个 demo,例子很简单,一个 index.js,里面引用了一个文件 a.js,a.js 内部引入了 b.js,通过 webpack 最简单的配置,将 ...

2022-11-17 08:58:30 3

转载 前缀树在前端路由系统中的应用

大厂技术坚持周更精选好文 背景 本人自己曾经造轮子搞过一个 Node.js 端的应用层 Web 框架,里面涉及到一个路由系统的实现,当时是通过一个叫前缀树的数据结构来实现便捷的路由查找与匹配机制,这里跟大家分享一下。 前缀树介绍 前缀树,即字典树,又称 Trie 树。这种数据结构通常用来储存字符串,并且是以路径字符节点的形式来储存。拥有公共前缀的字符串,会共享同样的父节点路径。前缀树是通过...

2022-11-12 11:57:25 12

转载 Pinia 前端状态管理使用指南!(含插件使用)

大厂技术坚持周更精选好文前言Pinia ,发音为*/piːnjʌ/*,来源于西班牙语piña。意思为菠萝,表示与菠萝一样,由很多小块组成。在 Pinia 中,每个 Store 都是单独存在,一同进行状态管理。Pinia 是由 Vue.js 团队成员开发,最初是为了探索 Vuex 下一次迭代会是什么样子。过程中,Pinia 实现了 Vuex5 提案的大部分内容,于是就取而代之了。与 V...

2022-11-10 13:22:01 5

转载 用Vue.js开发企业管理后台,好书推荐!

Vue.js是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是,它可以自底向上逐层应用。Vue.js的核心库只关注视图层,不仅易于上手,还便于与第三方库或已有的项目整合。当与现代化的工具链及各种支持类库结合使用时,Vue.js完全能够为复杂的单页应用提供驱动。时至今日,Vue.js 已成为世界三大主流前端框架之一。Vue.js 在国内也是主流技术之一,有完善的中文文档和中文社区,易学易上手...

2022-11-10 13:22:01 6

转载 微前端场景下的代码共享

大厂技术坚持周更精选好文前言在现有前端应用日益复杂化的业务场景下,将一个体积庞大的前端应用拆分为几个可以独立开发、测试、部署的微应用变得越来越普遍。微前端的这种模式这大大提高了我们的构建效率,在每次构建时我们不再需要去构建一个庞大的应用,而是构建我们所需要构建的某个子应用。通常在一个微前端的架构下应用之间又会有许多公共的代码,那么在此基础上又如何更加灵活更加有效的共用这些代码呢?(下面介绍...

2022-11-09 12:00:35 40

原创 (10月最新) 前端图形学实战: 从零开发几何画板(vue3 + vite版)

前言hello, 大家好, 我是徐小夕, 今天又到了我们的博学时间。本文是 100+前端几何学应用案例 专栏的第二篇文章, 在第一篇文章几何学在前端边界计算中的应用和原理分析 中我介绍了几何学在前端领域里的应用, 同时用 vue3 带大家一起实现了常见图形的边界计算算法, 并且分享了如何用几何原理和Web Dom生成任意三角形的方式:image.png如果大家感兴趣可以在 gitee 查看我的具体...

2022-10-30 17:00:55 97

转载 keep-alive多级路由缓存最佳实践

大厂技术坚持周更精选好文在我们的业务中,我们常常会有列表页跳转详情页,详情页可能还会继续跳转下一级页面,下一级页面还会跳转下一级页面,当我们返回上一级页面时,我想保持前一次的所有查询条件以及页面的当前状态。一想到页面缓存,在vue中我们就想到keep-alive这个vue的内置组件,在keep-alive这个内置组件提供了一个include的接口,只要路由name匹配上就会缓存当前组件。你...

2022-10-30 17:00:55 72

转载 前端工程化基建探索:从内部机制和核心原理了解npm

大厂技术坚持周更精选好文前言本文【前端工程化基建探索】的第2篇,上一篇前端工程化基建探索(1)前端大佬,你好!当我们拉取一个前端工程化项目,都会通过npm/Yarn/pnpm 管理工具来安装项目的依赖,运行项目,打包项目,基本上是前端开发三部曲。不知在前端开发过程中你是否考虑过下面几个问题:1、安装依赖的时候(npm install),做了什么工作?项目中的lock相关文件(packag...

2022-10-28 20:26:55 27

转载 组件库Monmrepo架构与开发调试环境构建

每日yyds: 今天你又博学了吗?大厂技术坚持周更精选好文本节内容直接进入开发环节,我们按步骤一边开发,一边对比element-plus: ???? Vue 3 的桌面端组件库进行开发,了解其从零开始的开发过程,在此之前我们需要统一Node版本,统一包管理器:基础环境统一Node版本:14+Pnpm版本: 7.13.5 7+编辑器:vscodepnpm下载npminstallpnpm-g基...

2022-10-24 08:58:16 34

转载 浅谈 WebVR 全景

大厂技术坚持周更精选好文前言近年来VR概念越来越火,相信大家在网上都有过VR的浏览体验,比如VR全景看房[1]、VR全景看车[2]、VR全景旅游[3]等等,VR全景给了我们视觉上的沉浸式体验。本文将会简单探究Web VR全景的实现原理,同时也会用threejs实现两个小的demo,希望对大家以后在业务上遇到类似的场景能有所帮助。什么是VR引用维基百科的定义:虚拟现实(英语:virtual ...

2022-10-23 09:29:26 50

转载 微前端如何做样式隔离?

大厂技术坚持周更精选好文可视化低代码社区:http://www.lowcoder.cn问题示例 className 命名重复导致的样式冲突 我们先创建一个问题,验证样式冲突的存在:在主应用和子应用上分别使用 div 元素插入一段标题,两个 div 元素使用相同的 class 名 title,分别在 class 中设置文字颜色,主应用 color 值为 yellow,子应用为 red。由...

2022-10-19 08:29:03 47

原创 《前端图形学实战》几何学在前端边界计算中的应用和原理分析

前言之所以会开设这个专栏, 是为了弥补部分程序员对代数和几何学的短板(当然也是为了巩固我的数学基础), 同时在实用价值上, 代数和几何学在编程界也起到了非常重要的推动作用, 比如我们看到的各种建模软件, 仿真&设计软件, 内部都涉及了很多数学原理, 在Web界, 我们比较熟悉的可视化图表, 在线设计软件Figma, 各式各样的可视化低代码产品, 都或多或少的应用了几何学原理, 所以要先让自...

2022-10-16 09:05:42 659

转载 Tauri:下一代桌面应用开发框架?

大厂技术坚持周更精选好文本文为来自 教育-智能学习-前端团队 成员的文章,已授权发布。桌面应用开发在处于移动互联网的当下,虽然桌面应用的重要性已经不能同往日而语,但在我们平常的日常工作和生活中,还是扮演着非常重要的角色和地位。在我们的日常工作中,离不开Lark、VSCode等桌面应用。相比较于移动端而言,桌面端应用的生态多种多样,因此也诞生了各种各样的桌面应用开发技术栈。本次分享将会对相关...

2022-10-14 08:29:19 262

转载 别想了,这本前端性能秘籍,你铁定需要!

很多人可能有耐心花费一两个小时在一家火锅店门口排队,但几乎没有人愿意等30s去加载一个短视频。事实上,对于大多数的 App 或网站来说,别说是30s,即使是3s也足以让大量用户放弃等待转而去做其他的事情。Google 发现,如果页面加载时间超过3s,53%的移动网站访问活动将难以为继。性能对于开发人员来说是一个经久不衰的话题,也是用户体验的重要因素。有人可能会问:如今计算机和手机的性能都在飞速发展...

2022-10-14 08:29:19 29

转载 深入理解 D3.js 可视化库之力导向图原理与实现

大厂技术坚持周更精选好文简介D3.js[1] 是一个基于 web 标准的 JS 可视化库,它借助 SVG、Canvas 和 HTML 进行数据可视化。在数据可视化中,我们很多时候会使用图来表达数据中所蕴含的信息,图方便让我们清晰的理清各个节点之间的联系,快速提取有用信息。而图布局算法可以使散乱的信息 (信息多以点线的关系承载) 通过一种清晰的方式呈现出来,符合相应的美学标准。不同的图布局[...

2022-10-13 08:29:03 138

原创 《前端算法实战》使用解释器模式实现Xpath路径的算法

前端领域里基于javascript的设计模式和算法有很多,在很多复杂应用中也扮演着很重要的角色,接下来就介绍一下javascript设计模式中的解释器模式,并用它来实现一个获取元素Xpath路径的算法。大厂技术坚持周更精选好文上期回顾《前端实战总结》之迭代器模式的N+1种应用场景《前端实战总结》之设计模式的应用——备忘录模式正文1.解释器模式对于一种语言,我们给出其文法表示形式(一种语言中...

2022-10-13 08:29:03 29

转载 「React 深入」一文玩转React Hooks的单元测试

大厂技术坚持周更精选好文大家好,俗话说得好,光说不练假把式,我始终认为实践才是最好的老师,上面一章我们已经详细的了解了Jest相关概念,以及如何搭建一个简单的测试环境(花一个小时,迅速掌握Jest的全部知识点~),今天就来详细讲讲React Hooks的单元测试在网上我们可以搜到很多React的单元测试,但有关React Hooks的单元测试却很少,或者说并不全面,所以今天就来详细讲讲有关...

2022-10-12 08:30:35 75

转载 Web 3D 从入门到跑路

大厂技术坚持周更精选好文前情概要作为在该领域小白的我,在准备该主题分享之前,我信心满满的去知乎查了下,如何学习 WebGL?如何入手webGl以及three.js呢? - 知乎[1]前端开发者应该如何学习计算机图形学相关的知识? - 知乎[2]大三计算机,想接触图形学方面的知识,直接学WebGL还是OpenGL ? - 知乎[3] 等 .......摘取自知乎回复:图形 + 数学 + 体系...

2022-10-08 08:40:16 62

转载 探索Node.js发起HTTP请求的6种不同方法

大厂技术坚持周更精选好文介绍本文将向大家介绍6种不同的方法在node.js中去发起HTTP请求,这里我们会通过对掘金社区的板块分类接口 的请求作为演示来完成这个每种不同方法的使用,当然为了更清晰的打印出所得到的数据,我们要提前安装chalk库来给其打印的数据加上颜色,好了,我们马上就要开始啦~正文Node.js HTTPS ModuleNode.js在标准库中带有https模块,所以你根本...

2022-09-26 08:37:48 56

转载 Single Source of Truth:XCode + SwiftUI 的界面编辑的设计理念

大厂技术坚持周更精选好文aPaaS Growth 团队专注在用户可感知的、宏观的 aPaaS 应用的搭建流程,及租户、应用治理等产品路径,致力于打造 aPaaS 平台流畅的 “应用交付” 流程和体验,完善应用构建相关的生态,加强应用搭建的便捷性和可靠性,提升应用的整体性能,从而助力 aPaaS 的用户增长,与基础团队一起推进 aPaaS 在企业内外部的落地与提效。背景 1:Define S...

2022-09-24 08:50:18 44

转载 一文颠覆大众对闭包的认知

大厂技术坚持周更精选好文网络上流传着许多对闭包的说法,这些说法为了方便理解曲解了闭包的真正原理,本文将会介绍这些原理,并且提供大量demo运行的结果来验证本文的正确性,注意:这可能会颠覆你对闭包的认知,请在家长的陪同下阅读!!!闭包 & 内存泄漏网络上对闭包的解释基本上都和 MDN 大同小异,“闭包就是访问了自由变量的函数”,其实这是为了大众方便理解而给出的错误结论(即使是这样似乎...

2022-09-20 08:30:41 33

转载 一本1986年就问世的编程书为何能畅销至今?

说起IT编程经典,我们总是绕不开《编程珠玑》。距离这本书首次问世已有近40年之久了,中文版也已经出版近15年。以计算机和互联网的发展速度而言,别说是40年,哪怕只有几个月也足够让一项技术更新得“面目全非”。那么这一本1986年就面世的《编程珠玑》,为何至今仍能畅销全球,且被业内大牛誉为编程“奇书”?对于这个问题,我们邀请了一位老朋友——资深技术人高博,来和大家聊聊《编程珠玑》。01高博与《编程珠玑...

2022-09-20 08:30:41 42

转载 关于下一代前端代码构建技术的设想

大厂技术坚持周更精选好文简单阐述下我对前端代码构建技术代际关系的理解,以及每个阶段遇到的问题。最初的前端代码是没有构建这个概念的,早期的 JavaScript 代码通常在编写完成后就直接通过 script 标签加载到浏览里就可以直接运行,随着技术进步,seajs requirejs 等技术在纯浏览器环境下引入了 JavaScript 代码的模块化方案,为了匹配这些方案于是有了最基础的构建技...

2022-09-16 08:31:47 33

原创 《前端技巧复盘》使用纯css实现网站换肤和焦点图切换动画

今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站.你将收获•网站换肤设计方案介绍•:target伪类介绍和用法以及如何使用css实现网站换肤•transition动画以及如何用纯css实现焦点图动画效果展示1.网站换肤2.焦点图动画实现思路1.网站换肤通常我们实现网站换肤都基于如下方式实现:•方案一: 使用OOCSS模式,通过js动态切换公共类名...

2022-09-12 08:30:31 64

转载 Markdown 写 PPT 是如何实现的?

建议通过底部阅读原文在PC阅读前言Markdown 是一种轻量的标记语言,我们只需要写 md 格式文件,不必考虑文档的排版,被广泛用于博客写作,技术文档编写等,程序员们都热爱,但我们工作中除了写文档,有时候还需要汇报工作,技术分享等,需要用到 PPT,但设计 PPT 可能不是每个程序员所喜欢的,所以我们可以使用一个非常好用的工具 slidev[1], 可以使用 markdown 来制作演示文稿,...

2022-09-12 08:30:31 54

转载 详解从零搭建企业级 vue3 + vite2+ ts4 框架全过程

大厂技术坚持周更精选好文本文不仅仅是搭建个脚手架这么简单,还会带你了解每一步、甚至每一个配置项的作用,和每个配置的知识点涉及到的知识点:Vue3、Vite、TypeScript、ESlint、Stylelint、Vue-router、Axios、Pinia本文项目初始化时间为2022/2/19,运行初始化命令获得的 vite 最新版本为 2.8.0整个搭建过程体系因为我想把每个点都写得详细...

2022-09-08 08:25:45 341

原创 想学Web前端开发,应该怎么自学?

大厂技术坚持周更精选好文hello, 大家好, 我是徐小夕, 之前很多朋友问我前端应该怎么学, 怎样才能提高前端开发的段位, 作为一名非科班出生的前端程序员, 这里分享一下我对自学前端的看法.非科班生如何快速逆袭, 成为独当一面的前端工程师?就拿我本人的亲身经历来说吧大学读的是工业&设计相关的专业, 对工业制造, 精益生产, 工业产品设计有一定的造诣, 但是和互联网领域比如前端, ...

2022-09-02 08:30:17 319

转载 一次 VSCode 插件内存泄露背后的技术思考

大厂技术坚持周更精选好文问题在一次新版本的插件发布后,收到反馈,偶尔会有卡死的情况,在休眠后出现概率比较高。收集数据巧妇难为无米之炊,分析问题之前首先要有足够的数据。遇到性能问题,可以从先从内存入手,分析内存的工具有很多,本文尝试使用 llnode 和 heapdump。 llnode llnode 针对单个进程进行操作,而 VSCode 启动了许多进程,所以需要首先确定插件运行在哪个进程...

2022-08-31 08:30:36 310

转载 贝塞尔曲线轨迹运动原理与实战

大厂技术坚持周更精选好文本次分享大概分为下面几个方面背景贝塞尔曲线讲解实现和探索过程背景近期在 X 业务测评报告页有一个需求,用户可以左右拖动滑块来查看各个等级的信息。在之前的野种中是通过切换图片的方式,会有卡顿的现象。由于 X 业务中等级区分比较少,等级间距更大,所以卡顿感会更大。所以为了能够体现更丝滑的效果,使用svg画出贝塞尔曲线,动态控制实线和虚线的切换以及空心小球的位置。 svg...

2022-08-26 12:10:46 180

转载 使用前端技术实现静态图片局部流动效果

“声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。”大厂技术坚持周更精选好文背景如果你有玩过 ???? 《王者荣耀》、《阴阳师》 等手游,一定注意到过它的启动动画、皮肤立绘卡片等场景,经常采用静态底图加局部液态流动效果的简单动画,这些流动动画可能出现在缓缓流动的水流 ????、迎风飘动的旗帜 ????、游戏角色衣袖 ????♀️、随着时间缓动的...

2022-08-25 08:30:41 103

转载 为什么 React 的 Diff 算法不采用 Vue 的双端对比算法?

大厂技术坚持周更精选好文前言都说“双端对比算法”,那么双端对比算法,到底是怎么样的呢?跟 React 中的 Diff 算法又有什么不同呢?要了解这些,我们先了解 React 中的 Diff 算法,然后再了解 Vue3 中的 Diff 算法,最后讲一下 Vue2 中的 Diff 算法,才能去比较一下他们的区别。最后讲一下为什么 Vue 中不需要使用 Fiber 架构。React 官方的解析其...

2022-08-22 08:30:28 52

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除