大家好，我卡颂。 本文会讲解React中Error Boundaries的完整实现逻辑。 一张图概括： 这里简单讲解下React工作流程，后文有用。分为三步： 触发更新 render阶段：计算更新会造成的副作用 commit阶段：在宿主环境执行副作用 副作用有很多，比如： 插入DOM节点 执行useEffect回调 好了，让我们进入主题。 什么是Error Boundaries React提供了两...

大家好，我卡颂。 开发者可以控制浏览器资源的加载顺序，但这种控制的粒度能做到多细呢？ 本文来聊聊资源加载优先级的问题。 浏览器解析资源的优先级 当浏览器开始解析网页，并开始下载图片、Script 以及 CSS 等资源的时候，浏览器会为每个资源分配一个代表资源下载优先级的 fetch priority 标志。 而资源下载的顺序就取决于这个优先级标志，这个优先级标志的计算逻辑会受很多因素的影响： Sc...

1. 什么是重构 这里先给重构下一个定义：改善既有代码的设计。 具体来说就是在不改变代码功能行为的情况下，对其内部结构的一种调整。需要注意的是，重构不是代码优化，重构注重的是提高代码的可理解性与可扩展性，对性能的影响可好可坏。而性能优化则让程序运行的更快，当然，最终的代码可能更难理解和维护。 2. 为什么要重构 2.1. 改善程序的内部设计 如果没有重构，在软件不停的版本迭代中，代码的设计只会越来...

NodeJs现在处于发展阶段，相关资料和书籍不是很多。说开了NodeJs只是JavaScript作为CommonJS的实现，使得 JavaScript在服务器端有了用武之地，所以NodeJs从语法层面来说还是JavaScript。但是与客户端的JavaScript又有所区 别。注意以下几点： 要学习NodeJs，必须有一定的JavaScript基础，理解事件模型，了解JavaScript的语法和特...

一、实现一个反向代理服务器 相比大多数应用服务器，Node.js 可以很轻松的处理大量的网络流量，但这并不是 Node.js 的设计初衷。 如果你有一个高流量的站点，提高性能的第一步是在你的 Node.js 前面放一个反向代理服务器。这可以保护你的 Node.js 服 务器免于直接暴露在网络中，而且可以允许你灵活的使用多个应用服务器做负载均衡和静态文件缓存。 使用 NGINX 在一个已经存在的服务...

Web前端目前现有的UI框架：Bootstrap、JqueryUi、Foundation、Semantic UI、Pure、UIkit UI框架优缺点具体可参考：https://blog.csdn.net/qq_41852103/article/details/79619250 Web前端目前现有的JS框架：JQuery、Zepto、VueJS、AngularJS、ReactJS、backbone...

一、程序命名 容易输入的变量名 。比如：Fred，asdf 单字母的变量名 。比如：a,b,c, x,y,z（如果不够用，可以考虑a1,a2,a3,a4,….） 有创意地拼写错误 。比如：SetPintleOpening， SetPintalClosing。这样可以让人很难搜索代码。 抽象 。比如：ProcessData, DoIt, GetData… 抽象到就跟什么都没说一样。 缩写 。比如：W...

一、前言 最近正好在学习 Webpack，觉得 Webpack 这种通过构建模块依赖图来打包项目文件的思想很有意思，于是参考了网上的一些文章实现了一个简陋版本的 mini-webpack，通过入口文件将依赖的模块打包在一起，生成一份最终运行的代码。想了解 Webpack 的构建原理还需要补充一些相关的背景知识，下面一起来看看。 二、背景知识 1. 抽象语法树（AST） 什么是抽象语法树？ 平时我们...

前言 最近在玩next.js，有几种渲染方式。今日前端早读课文章由腾讯@stark分享，由公号:腾讯云cloudbase授权分享。 正文从这开始~~ 在开始阅读之前，先解释一下文章里用到的英文缩写： CSR：Client Side Rendering，客户端（通常是浏览器）渲染； SSR：Server Side Rendering，服务端渲染； SSG：Static Site Generation...

前言 概述 撕裂（tearing）是图形编程中的一个传统术语，是指视觉上的不一致。 例如，在视频中画面撕裂是指在一个屏幕中看到了多个帧，这使视频看起来是有问题的。在用户界面中，撕裂是指一个 UI 上显示了同一状态的多个值。例如，您可能会在列表中为同一项目显示了不同的价格。 由于 JavaScript 是单线程的，在 web 开发中通常不会出现这个问题。但是，在 React 18 中，并发渲染 (c...

在8月31日，微软发了一个介绍他们新发布的功能的帖子介绍，这个新东西就是——Web版的Vscode，不过现在已经找不到那个帖子了，点进去似乎已经404了，估计是他们发早了，不过这也说明不久后他们就会重新发布，敬请期待~ 其实WebIDE放到现在一点都不新奇，早在3年前，Gitee就推出了自己的"webide" Gitee的webide 那个时候技术还不是太成熟，与其说是webide，还不如说是一个...

一、组件声明 在React中，组件的声明方式有两种：函数组件和类组件， 来看看这两种类型的组件声明时是如何定义TS类型的。 1. 类组件 类组件的定义形式有两种：React.Component<P, S={}> 和 React.PureComponent<P, S={} SS={}>，它们都是泛型接口，接收两个参数，第一个是props类型的定义，第二个是state类型的定义，这两个参数都不是必须的...

1. React Hooks诞生之前 Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性（比如生命周期）。React Hooks 的出现是对类组件和函数组件这两种组件形式的思考和侧重。下面就来看看函数组件和类组件分别有哪些优缺点。 （1）类组件 类组件是基于 ES6中的 Class 写法，通过继承 React.Compone...

在浏览器输入URL到页面展示，这中间发生了什么？ 导航流程 用户发出URL请求到页面开始解析的过程，就叫导航流程。 浏览器进程接收用户输入的URL请求，再将该URL转发给网络进程 用户输入URL/查询关键词 现代的浏览器搜索栏都有内置搜索引擎，当用户输入的是搜索关键词(即不符合URL规则)，则会根据用户设置的浏览器默认搜索引擎，合成带查询关键词的URL。 # 输入查询关键词-github，会根据浏...

一、温故知新之CSS上报 几年前有介绍过使用 CSS 实现数据上报： .button-1:active::after { content: url(./pixel.gif?action=click&id=button1); display: none; }.button-2:active::after { content: url(./pixel.gif?action=click&id=butto...

什么是二叉堆 二叉堆本质是一种完全二叉树，二叉堆不是最小堆就是最大堆。它能高效、快速地找出最大值和最小值，常用于优先队列和堆排序算法。 完全二叉树 完全二叉树是二叉堆的结构特性。一颗完全的二叉树，它的每一层都有左侧和右侧子节点(除最后一层的叶节点)，并且最后一层的叶节点尽可能都是左侧子节点。完全二叉树约定编号从根结点起，自上而下，自左而右进行编号。 完全二叉树是指最后一层左边是满的，右边可能满也可...

一、引言 无论是实例组件还是 HTML 组件，传参都是免不了的。 以 Web Components 组件举例，我们要传递宽度和高度，就可以使用自定义的 width 或 height 属性，例如： <by-zxx width="300" height="150"></by-zxx> 但有时候，我们需要传递的参数是一段 HTML 内容，这个时候，这段 HTML 该如何传入组件内？ 此时就需要使用插槽元...

大家好，我是 ConardLi，周末愉快 ～ 相信大家在平时都做过一些自动化测试的工作，Chrome 在最新的版本（Chrome 97）里面新增了一个非常好用的功能，可以帮助我们录制、回放、测试用户操作，今天就和大家来一起试用一下。 Recorder 面板 首先我们打开 Devtools，然后打开 More Tools - Recorder。 或者也可以使用菜单命令打开 Recorder： 开始录...

1. npm 基本概念 npm 全称为 Node Package Manager，是一个基于 Node.js 的包管理器，也是 Node.js 社区最流行、支持的第三方模块最多的包管理器。它的初衷就是让开发人员更容易分享和重用代码。npm 提供了命令行工具，其主要功能是管理Node.js包，包括安装、更新、删除、查看、搜索、发布等。 ​ npm 最初只是Node.js 的包管理器，但随着前端技术的...

说起CSS单位，我们最熟悉的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种，下面就分别来看看这些单位。 1. 相对单位 相对单位就是相对于另一个长度的长度。CSS中的相对单位主要分为两大类： 字体相对单位，他们都是根据font-size来进行计算的。常见的字体相对单位有：em、re...