blog
blog copied to clipboard
forthealllight
📖我的博客，记录学习的一些笔记，如有喜欢，欢迎star
# 在单页应用中，如何优雅的上报前端性能数据 ------   最近在做一个较为通用的前端性能监控平台，区别于前端异常监控，前端的性能监控主要需要上报和展示的是前端的性能数据，包括首页渲染时间、每个页面的白屏时间、每个页面所有资源的加载时间以及每一个页面中所以请求的响应时间等等。   本文的介绍的是如何设计一个通用的jssdk,可以以较小的侵入性，自动上报前端的性能数据。主要采用的是Performance API以及sendBeacon方法等等。主要参考的是google analytics以及阿里云前端性能监控平台的实践。   在我的项目中使用nestjs作为后端框架，nestjs是基于express的一款完美支持typescript，类java spring的node后端框架。本文主要侧重与如何上报性能数据，后端处理逻辑比较简单，不会具体介绍，因此不需要了解如何使用nestjs。本文的主要内容包含了： > * 根据Performance API获取前端性能数据 > * 何时应该上报性能数据 > * 如何上报性能数据 ------ ## 一、根据Performance API 获取前端性能数据 本文上报的前端性能数据包含两部分，一是通过Performance API获得的性能数据，二是自定义的在每个页面应该上报的数据。 首先来看通过Performance API所获取的数据,该数据也包含了两个部分，当前页面的性能相关数据以及当前页面资源加载和异步请求的相关数据。 ### (1)、Performance...
# 你真的懂switch吗？聊聊switch语句中的块级作用域 ------   最近在代码中不小心不规范的，在switch里面定义了块级变量，导致页面在某些浏览器中出错，本文讨论以下switch语句中的块级作用域。 > * switch语句中的块级作用域 > * switch语句中的块级作用域可能存在的问题 > * 规范和检测 ------ ## 一、switch语句中的块级作用域   ES6 或 TS 引入了块级作用域,通过let和const、class等可以定义块级作用域里的变量，块级作用域内的变量不存在变量提升，且存在暂时性死区。常见的if语句，for循环的循环体内都可以定义块级变量。那么switch语句中的块级作用域是什么呢？ 先给出结论： **_switch语句中的块级作用域，在整个switch语句中，而不是对于每一个case生成一个独立的块级作用域。_** 下面来举几个例子来说明这个问题： ```js let number = 1; switch(number){ case...
# Typescript代码整洁之道 ------ 最近半年陆续交接了几位同事的代码,发现虽然用了严格的eslint来规范代码的书写方式，同时项目也全量使用了Typescript,但是在review代码的过程中,还是有很多不整洁不规范的地方。良好的代码具有很好的可读性,后续维护起来也会令人愉悦,也能降低重构的概率。本文会结合Typescript,谈谈如何clean代码： > * 基础规范 > * 函数式 ------ ## 一、基础规范 ### （1）常量 常量必须命名, 在做逻辑判断的时候，也不允许直接对比没有命名的常量。 - 错误的书写 ```js switch(num){ case 1: ... case 3: ... case 7:...
# 如何优雅的通过canvas实现一个简单的文本编辑器 ------ 在最近的项目中，需要通过canvas来实现一个文本编辑器，大部分场景中，其实都不需要通过canvas来实现一个编辑器。只有那种需要利用canvas的绘制功能，实现div/css无法模拟出的文字效果，此时你需要利用canvas来实现文本编辑和渲染。此外,使用canvas实现文本编辑并不是最优的，甚至是不推荐的方案，因为会存在频繁的canvas重绘。本文介绍的是如何通过canvas来实现一个简单的文本编辑器。 > * canvas文本编辑器的需求场景 > * 如何实现一个canvas简单的文本编辑器 > * 编辑器功能优化 源码参考地址：地址为：https://github.com/forthealllight/canvasTextEditor ------ ## 一、canvas文本编辑器的需求场景 首先，还是要强调第一点：大部分场景下，你可能不需要通过canvas来实现文本编辑器。只有两种条件下，你需要使用canvas来实现文本编辑功能： - canvas画布的图案，包含文字，需要做整体的动画以及转场等特效，需要实时编辑的场景（边编辑边渲染） - css无法模拟出的一些特殊文字效果，需要canvas来补充文字渲染特效 举一个使用canvas文本编辑器的例子，[fabric.js][1]是一个简化canvas绘图的工具，提供了强大的矢量图功能，并且可以方便的在canvas上的局部区域绘制一个个不同的图案，这里局部区域称为model，不同的model之间又可以交互等等。 在[fabric.js][2]经常需要对于局部的model，做一些动画效果，如果这个model是一个文本，下面我们简称文本model，用div模拟，我们称div文本编辑。那么需要做两次映射。 ***文本model渲染结果——> div文本编辑(模拟渲染结果)——>编辑 ——> 文本modal渲染结果(反重现)*** 这么两次映射，如果比较复杂，显然是有一定的转化工作量，这种 工作量的大小并不致命，但是这种转化的文本编辑方式，无法实时的去编辑，必须编辑完成后，才能再canvas中渲染出来。...
# 在React项目中，如何优雅的优化长列表 ------   对于较长的列表，比如1000个数组的数据结构，如果想要同时渲染这1000个数据，生成相应的1000个原生dom，我们知道原生的dom元素是很复杂的，如果长列表通过生成如此多的dom元素来实现，很可能使网页失去响应。   贯穿React核心的就是"virtual dom",我们同样的可以通过用虚拟列表的方式来优雅的优化长列表 > * 原生dom渲染长列表的缺陷 > * 虚拟列表优化长列表的原理 > * 通过react-virtualized来优化长列表 > * 通过react-tiny-virtual-list来优化长列表 ------ ## 一、原生dom渲染长列表的缺陷   首先我们尝试在React项目中，未做任何优化一次性渲染1000个dom，每个dom包含一个img标签，原生dom本身是很复杂的对象，加上img标签后。渲染的效果如下图所示：   可以很明显的看到白屏的时间很长，因为在React中，不做任何优化，直接渲染这么包含1000个图片的dom节点，即使React本身用了虚拟dom，但是在首次渲染的时候，是实实在在的生成了1000个真实的dom，我们可以查看网页中的真实dom情况，如下所示：   从上图我们可以看出，是确确实实的生成了1000个真实的dom，进入页面后，需要渲染这1000个dom，因此白屏的时间很长。   此外，在直接渲染1000个dom节点的页面，触发滚动事件，也会使得内存用量增加，具体可以如下图所示： 此外同时渲染很多dom节点，也会造成一下几个问题： - 容易失帧，因为渲染很慢，所以无法维持浏览器的帧率，主观上会显得页面卡顿 - 网页失去响应，事件等无法及时被触发...
# 深入浅出svelte.js 最近有一个官网页，打算用svelte体验一下，顺便学习了一下svelte(发音：[svelt])，整体来说，svelte是比较简洁的，上手很快。不过与其说是一个前端框架，不如说是一个“dom操作编译器”。svelte的开发代码，在编译阶段会被编译成一系列的dom操作的代码，运行时的代码很少。因此svelte.js的体积很小(只保留了脏值检测更新和封装dom操作API等core代码)。本文从一下几个方面聊一聊对于svelte的认识。 * svelte初体验 * svelte的语法 * Virtual Dom和Dom * 优缺点 * svelte源码阅读 --- ## 一、svelte初体验 我们直接来看官网的例子：  实现的功能也很简单，就是两个Input的值求和，然后展示出来。用svelte编写的代码为： ```js let a = 1; let b = 2; {a}...