响应式、模版克隆、Proxy 代理。。。JavaScript 框架工作原理你还了解多少?

2023-12-07
阅读 12 分钟
754
我的日常工作是开发 JavaScript 框架 (LWC)。虽然我已经在这个框架上工作了近三年,但我仍然觉得自己是个门外汉。当我阅读大型框架领域的最新动态时,我常常会被自己不知道的事情压得喘不过气来。
封面图

了解关键区别:await vs return vs return await

2023-12-01
阅读 3 分钟
640
异步编程是现代 JavaScript 开发中一个重要方面,它使我们能够处理耗时的操作,而不会阻塞其他任务的执行。使用异步函数时,我们会遇到三个重要的关键字:await 、return、return await。在本文中,我们将探讨这些关键字之间的差异,并讨论何时使用每个关键字。
封面图

HTTP 缓存最佳实践和 max-age 带来的陷阱

2023-11-28
阅读 5 分钟
504
正确使用缓存可以带来巨大的性能优势,节省宽带,并降低服务器成本,但许多网站并不重视缓存,造成竞争条件,导致相互依赖的资源不同步。绝大多数最佳实践缓存属于以下两种模式之一:模式一:不可变(immutable)内容 + 长 max-age模式二:可变(mutable)内容,始终由服务器验证模式一:不可变内容 + 长 max-age {代码....
封面图

算法可视化:一文弄懂 10 大排序算法

2023-05-18
阅读 23 分钟
5.1k
在本文中,我们将通过动图可视化加文字的形式,循序渐进全面介绍不同类型的算法及其用途(包括原理、优缺点及使用场景)并提供 Python 和 JavaScript 两种语言的示例代码。除此之外,每个算法都会附有一些技术说明,比如使用大 \(O\) 符号来分析不同算法的时间复杂度和空间复杂度等,也提到了一些多数人都很容易理解的一...
封面图

面试小册:面试官经常问的十个棘手的 JavaScript 问题

2023-02-07
阅读 6 分钟
1.2k
在 JavaScript 中有七种基本数据类型(string、number、boolean、undefined、symbol、bigint 和 null),这些都是不可变的。这意味着一旦分配了一个值,我们就无法修改它们,我们可以做的是将它重新分配给一个不同的值(不同的内存指针)。另一方面,其他数据类型(如 Object 和 Function)是可变的,这意味着我们可以修...

如何使用 React 和 Monaco Editor 实现 Web 版 VSCode?

2022-11-24
阅读 9 分钟
7.5k
本项目是 React 基于 Monaco Editor 实现的 Web VSCode Demo,它的主要功能是允许在浏览器中编写 TypeScript/JavaScript 并直接运行,除此之外,它还包含如下功能:

编写自己的 TypeScript CLI

2022-02-09
阅读 12 分钟
3.1k
TL;DR您可以轻松编写 CLI,它比你想象的要简单;我们一起编写 CLI 以生成 Lighthouse 性能报告;你将看到如何配置 TypeScript、EsLint 和 Prettier;你会看到如何使用一些很优秀的库,比如 chalk 和 commander;你将看到如何产生多个进程;你会看到如何在 GitHub Actions 中使用你的 CLI。实际用例Lighthouse 是用于深入...
封面图

React 50 种状态类型

2021-12-15
阅读 8 分钟
3.1k
React 是一个视图层框架,其核心思想是 UI = f(state),即「UI 是 state 的投影」,state 自上而下流动,整个 React 组件树由 state 驱动。当一个 React 应用程序足够复杂,组件嵌套足够深时,组件树中的状态流动会变得难以控制(例如你如何跟踪父节点的 state 流动到叶子节点时产生的变化)。这时我们就需要对 state 进...

56 个 NPM 包解决 16 个 React 问题

2021-08-25
阅读 14 分钟
11.3k
关于如何选择完美的 npm 包的深入指南。React 是用于构建用户界面的 JavaScript 库,它不仅是一个前端 UI 开发框架,更是一套完整的前端开发生态体系。虽然 React 没有包含所有的解决方案,但是我们可以从繁荣的生态系统中找到应对不同场景的 NPM 包,来解决开发中遇到的问题。今天,我们就从以下 16 个纬度着手,寻找最...

Vue SFC Style CSS 变量注入详解(新版)

2021-06-28
阅读 7 分钟
15.2k
CSS 变量可以跟 JavaScript 更好的通信,CSS 变量是运行时。通过本文你会认识并理解以下概念:SFC Style - 单文件组件的样式;原生 CSS 变量 - CSS 作者定义的标准规范;SFC Style Variables 提案(旧版);SFC style CSS variable injection(新版);Vue3 中的使用 CSS 变量注入以及使用原生 CSS 变量;变量注入的背后...
封面图

Vue 路由组件传参的 8 种方式

2021-03-12
阅读 4 分钟
16.1k
我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router@4。

关于 Vue.js 3.0 UI Library element-plus 官网部分 Demo 失效原因汇总

2020-11-13
阅读 3 分钟
8.1k
在向具名插槽提供内容的时候,在 <template> 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称。

探索类型系统的底层 - 自己实现一个 TypeScript

2020-07-27
阅读 13 分钟
8.6k
这篇文章包含两个部分: A 部分:类型系统编译器概述(包括 TypeScript) 语法 vs 语义 什么是 AST? 编译器的类型 语言编译器是做什么的? 语言编译器是如何工作的? 类型系统编译器职责 高级类型检查器的功能 B 部分:构建我们自己的类型系统编译器 解析器 检查器 运行我们的编译器 我们遗漏了什么? A 部分:类型系统编...

代码简洁之道:编写干净的 React Components & JSX

2020-07-20
阅读 10 分钟
5.1k
不同团队编写出来的 React 代码也不尽相同,水平各有高低,就像十个读者就有十种哈姆雷特,但是以下八点可能是你编写 React 代码的基本准则。

性能优化小册 - 渲染十万条数据:基于 IntersectionObserver 的虚拟化长列表

2020-06-17
阅读 4 分钟
13.1k
技术不局限于框架,相同的原理只是实现方式略有不同。 前置 1. 什么是虚拟列表? 首先,虚拟列表只是一个概念,本人对虚拟列表这个表述不置可否。 虚拟列表是对于列表形态数据展示的一种按需渲染,是对长列表渲染的一种优化。 虚拟列表不会一次性完整地渲染长列表,而是按需显示的一种方案,以提高无限滚动的性能。 2. ...

性能优化小册 - React 搜索优化:防抖、缓存、LRU

2020-06-09
阅读 4 分钟
4.6k
最近要对 react 项目做重构优化等相关的工作,由于有好长时间没碰 React 了,今天索性把一个基于关键字搜索的 demo 做一下简单优化,在此记录以下。

性能优化小册 - 让页面更早的渲染:使用 preload 提升资源加载优先级

2020-06-04
阅读 3 分钟
5.9k
preload 是一个新的 Web 标准,旨在提高性能以及提供给 web 开发者更多的细粒度加载控制。它可以使开发者自定义加载逻辑而避免以 script 标签加载资源所带来的性能损耗。

记一次 Angular 基于 STOMP over WebSocket 实现流文本传输

2020-06-01
阅读 7 分钟
8.3k
在介绍正文之前需要先简单了解几个概念: STOMP 协议、STOMP over WebSocket 以及 RxJS。(关于这三点本文不会进行详细介绍)

Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

2020-05-28
阅读 6 分钟
73k
原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

性能优化小册 - 可编程式缓存:Service Workers

2020-05-26
阅读 5 分钟
3.9k
Service Workers 不仅可以应用于 PWA ,PC 端也可以利用其强大的功能实现一些有趣的优化,网络中有很多关于 Service Workers 介绍的比较好的文章,基于小册宗旨,本文并不是一篇 Service Workers 的详细教程。

性能优化小册 - 提高网页响应速度:优化你的 CDN 性能

2020-05-21
阅读 3 分钟
8.5k
CDN 服务本身并不具备域名解析功能,而是依托于 DNS 智能解析功能,由 DNS 根据用户所在地、所用线路进行智能分配最合适的 CDN 服务节点,然后把缓存在该服务节点的静态缓存内容返回给用户。

性能优化小册 - 分类构建:利用好 webpack hash

2020-05-18
阅读 2 分钟
6.9k
借助 wepack 的 hash 命名法,不仅可以提高我们项目的构建效率,在生产环境中,合理设置 hash 类型有助于我们对资源进行有效的缓存。

性能优化小册 - 异步堆栈追踪:为什么 await 胜过 Promise

2020-05-11
阅读 2 分钟
6.3k
与直接使用 Promise 相比,使用 async/await 不仅可以使代码更具可读性,而且还可以在 JavaScript 引擎中实现一些有趣的优化。

当无情面试官问 vue-next-router 带来了哪些变化?

2020-05-08
阅读 11 分钟
11.1k
此次 Vue 的重大改进随之而来带来了 Vue Router 的一系列改进,现阶段(alpha.10)相比 vue2-router 的主要变化,总结如下:

记一次 Vue 组件设计及 computed 动态引入组件

2020-04-10
阅读 7 分钟
9.2k
本文涉及技术点: 动态组件 & 异步组件 内置组件 keep-alive & transition 插槽 slot 及 v-slot 实际场景 多级 tabs 切换,tab 项不固定,灵活控制 tab 项内容的展示,如下图。 目录结构 目录结构大概像这样: src components - 公共组件 Tabs.vue - 封装的 Tabs 组件 EmptyView.vue - 空页面组件 *.vue - 其他...

记一次 <keep-alive> 缓存及其缓存优化原理

2020-04-03
阅读 14 分钟
9.4k
由于缓存空间是有限的,所以不能无限制的进行数据存储,当存储容量达到一个阀值时,就会造成内存溢出,因此在进行数据缓存时,就要根据情况对缓存进行优化,清除一些可能不会再用到的数据。所以根据缓存淘汰的机制不同,常用的有以下三种:

JavaScript - 数据结构详解(一)

2020-01-20
阅读 12 分钟
4.9k
数据结构的概念 数据结构,直白的理解,就是研究数据的存储方式。 数据结构是一门学科,它教会我们「如何存储具有复杂关系的数据更有助于后期对数据的再利用」。 存储结构 数据结构大致包含以下几种存储结构: 线性表 顺序表 链表 栈和队列 树结构 普通树 二叉树 线索二叉树等 图存储结构 下面对各种数据结构做详细讲解...

网站性能优化实战篇

2019-11-24
阅读 7 分钟
9.9k
阅读理由:经验之谈,从理论到实践。 前情摘要 网站优化是前端开发的重中之重,但是优化细节却十分繁杂,没有好的思路,优化很难高效的开展。 本文将以实际网站来做参考,手把手教你如何一步步做好网站优化。 这不是一篇 基础网站优化 文章,继续下文前,请确定已经做了如下基本优化: 图片压缩、合并 代码精简、混淆 减...

CSS 渲染原理以及优化策略

2019-11-21
阅读 10 分钟
5.2k
提起 CSS 很多童鞋都很不屑,尤其是看到 RedMonk 2019 Programming Language Rankings 的时候,CSS 竟然排到了第七位。

彻底理解浏览器缓存机制

2019-11-20
阅读 6 分钟
5.8k
推荐理由:文章思路清晰,鞭辟入里。 概述 浏览器的缓存机制也就是我们说的 HTTP 缓存机制,其机制是根据 HTTP 报文的缓存标示进行的。 所以在分析浏览器缓存之前,我们先使用图文简单介绍一下 HTTP 报文,HTTP 报文分为两种: HTTP 请求(Request)报文。报文格式为: 请求行。 HTTP 头(通用信息头,请求头,实体头)...