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

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

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

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

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

本项目是 React 基于 Monaco Editor 实现的 Web VSCode Demo，它的主要功能是允许在浏览器中编写 TypeScript/JavaScript 并直接运行，除此之外，它还包含如下功能：

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

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

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

CSS 变量可以跟 JavaScript 更好的通信，CSS 变量是运行时。通过本文你会认识并理解以下概念：SFC Style - 单文件组件的样式；原生 CSS 变量 - CSS 作者定义的标准规范；SFC Style Variables 提案（旧版）；SFC style CSS variable injection（新版）；Vue3 中的使用 CSS 变量注入以及使用原生 CSS 变量；变量注入的背后...

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

在向具名插槽提供内容的时候，在 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。

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

不同团队编写出来的 React 代码也不尽相同，水平各有高低，就像十个读者就有十种哈姆雷特，但是以下八点可能是你编写 React 代码的基本准则。

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

最近要对 react 项目做重构优化等相关的工作，由于有好长时间没碰 React 了，今天索性把一个基于关键字搜索的 demo 做一下简单优化，在此记录以下。

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

在介绍正文之前需要先简单了解几个概念： STOMP 协议、STOMP over WebSocket 以及 RxJS。（关于这三点本文不会进行详细介绍）

原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

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

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

借助 wepack 的 hash 命名法，不仅可以提高我们项目的构建效率，在生产环境中，合理设置 hash 类型有助于我们对资源进行有效的缓存。

与直接使用 Promise 相比，使用 async/await 不仅可以使代码更具可读性，而且还可以在 JavaScript 引擎中实现一些有趣的优化。

此次 Vue 的重大改进随之而来带来了 Vue Router 的一系列改进，现阶段（alpha.10）相比 vue2-router 的主要变化，总结如下：

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

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

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

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

提起 CSS 很多童鞋都很不屑，尤其是看到 RedMonk 2019 Programming Language Rankings 的时候，CSS 竟然排到了第七位。

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