前端早茶的博客_Node.js,React,Vue(4)

前端性能优化

全链路前端性能优化通常来讲前端性能优化是指从用户开始访问我们的网站到整个页面完整的展现出来的过程中，通过各种优化策略和优化方法让页面加载的更快，让用户的操作响应更及时，给用户更好的使用体验。这里我们介绍的是前端性能优化知识的解决方案，从静态资源优化开始入手，从表象深入体系化的讲解页面渲染架构，掌

webview

缓存

css

原创 2022-05-12 20:38:43 579 阅读

vite原理

vue3构建工具vite原理之手写vite vite实现原理是什么？当声明一个 script 标签类型为 module 时如： <script type="module" src="/src/main.js"></script>浏览器就会像服务器发起一个GET http://localhost

中间件

构建工具

css

原创 2022-05-12 20:38:16 331 阅读

vue在实际项目中应用

技术栈技术栈选择 Vue 作为框架。 vue-router 和 vuex 都是必不可少的。选择 Ant Design Vue。工具库选择 lodash。建立脚手架搭建 NPM 私服。使用 Node 环境开发 CLI 工具，参考我自己写过的一篇 -【搭建自己的脚手架—“优雅”生成前端工程

css

ico

ios

原创 2022-05-12 20:37:16 1330 阅读

vue自定义指令

一、什么是指令开始之前我们先学习一下指令系统这个词指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统我们看到的v-开头的行内属性，

自定义指令

钩子函数

指令系统

原创 2022-05-12 20:36:55 264 阅读

react项目8点优化

本文篇幅较长，将从编译阶段 -> 路由阶段 -> 渲染阶段 -> 细节优化 -> 状态管理 -> 海量数据源，长列表渲染方向分别加以探讨。一不能输在起跑线上，优化babel配置,webpack配置为项 1 真实项目中痛点当我们用create-react-app或者webpack构建react

数据

懒加载

批量更新

原创 2022-05-12 20:36:49 904 阅读

如何将网页性能优化

最近对公司的一个 PC 站点做了一次整体的性能优化，由于这个系统业务复杂、依赖非常多，加载速度非常慢，优化后各个性能指标都有了显著提升，大约加载速度快了 5 倍左右。我在构建、网络、资源加载、运行时、服务端、功能组织等多个方面都进行了优化，准备做一个系列，分章节给大家分享下我的优化经验。今天，

加载

懒加载

bundle

原创 2022-05-12 20:36:20 247 阅读

postTask优先级调度，原生浏览器

什么是优先级调度假设，我们有个「记录日志」的脚本需要在页面初始化后执行： initCriticalTracking(); 调用栈火炬图如下：可以看到，这是个执行了249.08ms的长任务，在执行期间浏览器会掉帧（表现为：浏览器卡顿）。现在，我们将其包裹在「优先级调度函数scheduler.po

优先级

优先级调度

回调函数

原创 2022-05-12 20:35:55 537 阅读

JS 沙箱隔离

本文并不会从头开始介绍 Web Worker 的基础知识和基本 API 的使用等（只是部分有涉及），若还未了解过 Web Worker，可参考查阅 W3C 标准 Workers 文档中的相关绍。自从 2014 年 HTML5 正式推荐标准发布以来，HTML5 增加了越来越多强大的特性和功能，而在

javascript

主线程

前端架构

原创 2022-05-12 20:35:41 609 阅读

同步获取useState的最新状态值

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 公众号作者：广东靓仔背景新的react hook写法，官方默认setState方法移除了回调函数，但我们有时候的业务场景需要我们同步拿到变量的最新变化值，以便做下一步操作，这时我们可以封装一个hook通

回调函数

公众号

封装

原创 2022-05-12 20:35:24 3264 阅读

umi 样式隔离

前言在使用umi日常开发项目，有时候样式之间会有污染，需要在class增加一个className来区分具体内容 const PrefixWrap = require("postcss-prefixwrap"); const rootId = 'xxx' export default { ...

css

ide

html

原创 2022-05-12 20:35:07 545 阅读

微型生成器框架 ---- Plop

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 公众号作者：广东靓仔 1|0背景 plop:可以通过命令行去生成、处理文件模板代码等. 使用条件参考：项目的每个模块的结构骨架都非常相似，引入模版内容相同就可以使用Plop来实现自动化了，Plop旨在根据模

模版

命令行

文件名

原创 2022-05-12 20:35:00 534 阅读

前端实现在线预览pdf、word、xls、ppt

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 公众号作者：广东靓仔 1、前端实现pdf文件在线预览功能方式一: 通过a标签href属性实现 pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直

在线预览

html

javascript

原创 2022-05-12 20:34:37 2452 阅读

vue3.2响应式性能优化，详解

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 公众号作者：广东靓仔背景 Vue 3 正式发布距今已经快一年了，相信很多小伙伴已经在生产环境用上了 Vue 3 了。如今，Vue.js 3.2 已经正式发布，而这次 minor 版本的升级主要体现在源码层

响应式

数据

vue.js

原创 2022-05-12 20:34:11 744 阅读

useCallback和useMemo源码分析

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 公众号作者：广东靓仔使用感觉useCallback和useMemo两者很像，前者返回一个memorized的回调函数，后者返回一个memorized的值。看一下他们是如何定义的 useCallback

回调函数

数组

公众号

原创 2022-05-12 20:33:51 425 阅读

JavaScript 复杂判断的更优雅写法

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 公众号作者：广东靓仔前提我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/sw

ide

活动状态

按钮点击事件

原创 2022-05-12 20:33:33 132 阅读

HTTP协议大全

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 公众号作者：广东靓仔一、HTTP协议 1. GET和POST的请求的区别 Post 和 Get 是 HTTP 请求的两种方法，其区别如下：应用场景： GET 请求是一个幂等的请求，一般 Get 请求用于

客户端

服务器

数据

原创 2022-05-12 20:30:34 146 阅读

useState原理解析

一、初始化构建dispatcher函数和初始值二、更新时调用dispatcher函数，按序插入update(其实就是一个action) 收集update，调度一次React的更新在更新的过程中将ReactCurrentDispatcher.current指向负责更新的Dispatcher 执

初始化

链表

触发器

原创 2022-05-12 20:30:29 2053 阅读

React中使用Suspense

疑问问：React Suspense有什么用呢？答：在动态导入的帮助下，React Suspense让我们轻松定义延迟加载的组件。代码demo const OtherComponent = React.lazy(() => import('./OtherComponent')); functi

加载

懒加载

延迟加载

原创 2022-05-12 20:29:46 5192 阅读

React之 hook / class 结合typescript笔记

使用 create-react-app 开启 TypeScript Create React App 是一个官方支持的创建 React 单页应用程序的CLI，它提供了一个零配置的现代构建设置。当你使用 Create React App 来创建一个新的 TypeScript React 工程时，你可以

typescript

html

ide

原创 2022-05-12 20:29:39 362 阅读

H5实现聚合支付及踩坑

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 最近有个新的需求，H5实现聚合支付功能。页面在微信、支付宝以及云闪付App内实现扫码支付，大体步骤如下。根据userAgent区分浏览器，决定走哪个回调。核心点一、获取code 1.云闪付 let r

支付宝

微信

h5

原创 2022-05-12 20:26:16 2539 阅读

前端手写代码题库

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 准备工作 API 设计思考作为一个工作过三年以上的老前端而言，都会明白一个事情: 「API的设计比实现更为重要」。何解？如 compose 函数常用在各种中间件设计中，如 redux 等。redux

数组

json

字符串

原创 2022-05-12 20:25:56 494 阅读 2收藏

useEffect和useLayoutEffect的原理与区别

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 下面我们会从effect的数据结构入手，梳理use(Layout)Effect在render和commit阶段的整体流程。 Effect的数据结构对函数组件来说，其fiber上的memorizedStat

链表

数组

数据结构

转载 2022-05-12 20:25:31 241 阅读

用canvas给背景添加音符

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 一、前期准备为了能够实现这个效果，要进行如下准备：一张梦寐以求的美女图片；能够简单使用canvas；准备一些音乐符号；准备编辑器，由于该内容很偏向于实战，边敲边看效果更佳。二、具体实现美女图片

jar

html

封装

原创 2022-05-12 20:24:55 349 阅读

umi项目打包优化

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 前言 umi打包的时候，居然用了30分钟。有必要进行压缩，经过优化后，从30分钟到4分钟。具体方案关键插件和umi版本： "umi": "^3.2.24", "compression-webpack-p

javascript

xml

css

原创 2022-05-12 20:24:39 3751 阅读

vscode 好用插件

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 前言好的IDEA可以提升我们的工作效率

工作效率

ide

原创 2022-05-12 20:24:16 266 阅读

聚合支付设计方案

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 一、项目目标支付中心架构将各业务的公共交易、支付、财务等沉淀到支付中心，并主要解决了以下三个主要问题：建立基础订单、支付、财务统一体系，抽象和封装公共处理逻辑，形成统一的基础服务，降低业务的接入成本及

支付中心

第三方支付

流水号

转载 2022-05-12 20:22:31 498 阅读

快速构建前端错误监控系统

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 前言一个错误监控系统应该做下面这些事情，这个方案适合前端人员比较少的团队。当错误发生的时候我们更需要一些辅助信息来帮我们更快的定位错误，比如 JS错误类型、 JS错误信息、JS错误堆栈、JS错误发生的位

docker

redis

上传

原创 2022-05-12 20:22:01 363 阅读

JS实现继承

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 前言 JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。 JS继承的实现方式既然要实现继承，那么首先我们得有一个父类，代码如下： // 定义一个动物类

父类

子类

原型对象

原创 2022-05-12 20:21:33 153 阅读

小程序Vant组件px转为rpx

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 微信小程序使用了第三方组件库（例如：Vant）时，组件默认样式是使用的px，这无法和我们页面中的rpx单位相兼容。技术方案1.gulp2.gulp-postcss3.postcss-px2units实现步骤

gulp

css

微信小程序

转载 2022-05-12 20:21:16 1290 阅读

React 框架 | 深入剖析 Scheduler 原理

关键词：react react-scheduler scheduler 时间切片任务调度 workLoop 背景本文所有关于 React 源码的讨论，基于 React v17.0.2 版本。文章背景工作中一直有在用 React 相关的技术栈，但却一直没有花时间好好思考一下其底层的运行逻辑，碰

任务调度

优先级

github

原创 2022-05-12 20:20:30 1229 阅读 1收藏

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

陈泽锋博客

前端性能优化

vite原理

vue在实际项目中应用

vue自定义指令

react项目8点优化

如何将网页性能优化

postTask优先级调度，原生浏览器

JS 沙箱隔离

同步获取useState的最新状态值

umi 样式隔离

微型生成器框架 ---- Plop

前端实现在线预览pdf、word、xls、ppt

vue3.2响应式性能优化，详解

useCallback和useMemo源码分析

JavaScript 复杂判断的更优雅写法

HTTP协议大全

useState原理解析

React中使用Suspense

React之 hook / class 结合typescript笔记

H5实现聚合支付及踩坑

前端手写代码题库

useEffect和useLayoutEffect的原理与区别

用canvas给背景添加音符

umi项目打包优化

vscode 好用插件

聚合支付设计方案

快速构建前端错误监控系统

JS实现继承

小程序Vant组件px转为rpx

React 框架 | 深入剖析 Scheduler 原理

欢迎