前言 在浏览器向服务器请求资源的时候，许多静态的资源是长时间不会更改的。如果重复的发起请求，不断从服务器获取长时间不会改变的资源，不仅会浪费宽带，增加服务器的压力，甚至影响到用户的体验。通过 http 缓存就能设置资源缓存。缓存后能减少资源的请求、减少响应的时间。 http缓存： 客户端向服务器发起请求时，会根据HTTP响应头的字段加载缓存的资源。…

数组是Javascript最常见的概念之一，它为我们提供了处理数据的许多可能性，熟悉数组的一些常用操作是很有必要的。 数组去重 from()叠加new Set()方法 字符串或数值型数组的去重可以直接使用from方法。 var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus'…

安装依赖 npm install @babel/plugin-proposal-optional-chaining -S @babel/plugin-proposal-nullish-coalescing-operator -S 在babel.config.js中 的 plugins中添加 "@babel/plugin-proposal-optio…

前言 对于一些重复性比较高的业务场景，减轻业务使用系统过程中的繁琐操作，也同时降低出错概率，谷歌的自动化操作插件因此给我们提供了一些便利，来实现Web的自动化操作。本文就给大家介绍一下谷歌的插件：automa。 Automa介绍 Automa 是一款 Chrome 插件，它能针对 Chrome 浏览器完成一系列自动化操作，并且可以执行重复性任务、网…

关于取值的吐槽 取值在程序中非常常见，比如从对象obj中取值。 const obj = { a:1, b:2, c:3, d:4, e:5, } 吐槽： const a = obj.a; const b = obj.b; const c = obj.c; const d = obj.d; const e = obj.e; 或者 const f = …

目前工作中接手的几个项目都是 B端 PC 项目，业务逻辑都比较复杂，并且代码历史较久，在日常的维护中经常会遇到想摊手的技术问题，发现问题、解决问题、避免再次出现同样的问题，既是项目可持续维护的因素之一，也是个人工作经验积累的一个过程 具体、连贯的变量名 在前后端分离的现代化 web开发流程下，相比于以往，前端承担了更多的业务逻辑，尽管存在着 Typ…

开发遇到的问题 目前我们前端开发需要关注的点和开发过程中遇到的痛点 首屏加载速度慢 利用路由的懒加载实现组件的按需加载，这样配置后只有当路由被访问时才会加载对应的组件，而不是在加载首⻚的时候就直接加载。 禁用线上生成的map文件，项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的 代码报错。。 启用Nginx的g…

背景 前些日子推动组内前端项目自研上云，造了一个轮子上传文件至CDN（没错造了一下轮子），整个逻辑很简单，就是递归遍历文件加上传，但是在路径拼接这个过程踩了一个小坑。 原因 日常习惯了Mac OS，很少接触 win，近日组内同学使用win突然发现上传的路径分隔符变成了，并且上传至COS后按目标路径无法正常访问。 针对这个问题，去 COS上查了一下，…

react原生动态添加多个className会报错： import style from './style.css' 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames({ 'foo-bar': true }); // => 'foo-bar' classNa…

在介绍一下这两个hooks的作用之前，我们先来回顾一下react中的性能优化。在hooks诞生之前，如果组件包含内部state，我们都是基于class的形式来创建组件。当时我们也知道，react中，性能的优化点在于： 调用setState，就会触发组件的重新渲染，无论前后的state是否不同 父组件更新，子组件也会自动的更新 基于上面的两点，我们通…