前端图片懒加载和预加载
懒加载和预加载懒加载和预加载是前端优化网页性能的重要手段之一。不止可以用于图片，其他资源（例如：css/js 文件，音/视频等）也可以使用。本文只讨论图片的预加载和懒加载，只有在合理的需求场景中合理的运用这两项技术，才能够有效地减少页面加载时间，提高用户体验。
什么是懒加载懒加载又称延迟加载，是指页面滚动到某个位置时再加载该位置下的图片。对于那些不在用户视野内的图片，可以先不进行加载，避免对网页性能造成不必要的影响。它的优点在于能够减少页面加载的初始时间，常用于一个页面包含大量图片的场景，特别是当页面需要滚动查看内容时，例如电商平台的商品页。
图片懒加载的实现方法 🥊实现懒加载通常是把 img 标签的 src 属性先用一个较小的占位图片代替，用一个自定义属性来存储真实的图片地址。当图片进入可视区域时再将图片的真实地址赋给 src 属性即可。下面是一个简单的代码示例 👇：
12345678910111213141516171819202122232425<body> <img src="占位图片地址" data-src="真实图片地址 ...
70道JavaScript常见面试题
1. undefined 和 null 有什么区别？在了解 undefined 和 null 的区别前，我们先来看一下他们的相似之处：
它们同属于 JavaScript 的 7种 原始数据类型。
1let primitiveTypes = ['string', 'number', 'bigint', 'symbol', 'null', 'undefined', 'boolean'];
在对它们使用 Boolean(value) 或 !!value 转为布尔值时，都会被转为 false。
12345console.log(!!null); // falseconsole.log(!!undefined); // falseconsole.log(Boolean(null)); // falseconsole.log(Boolean(undefined)); // false
然后来看它们的不同之处：
undefined 是未分配值的变量的默认 ...
git rebase 用法详解与工作原理(转载)
以前对 git rebase -i 的用法一直是一知半解，一次在需要合并多个提交时刚好用到，一顿操作差点把提交都搞丢了，幸好后面顺利找回，因此记录一下学习 rebase 命令的过程。
理解 Rebase 命令git rebase 命令的文档描述是 Reapply commits on top of another base tip，从字面上理解是「在另一个基端之上重新应用提交」，这个定义听起来有点抽象，换个角度可以理解为「将分支的基础从一个提交改成另一个提交，使其看起来就像是从另一个提交中创建了分支一样」，如下图：
假设我们从 Master 的提交 A 创建了 Feature 分支进行新的功能开发，这时 A 就是 Feature 的基端。接着 Matser 新增了两个提交 B 和 C， Feature 新增了两个提交 D 和 E。现在我们出于某种原因，比如新功能的开发依赖 B、C 提交，需要将 Master 的两个新提交整合到 Feature 分支，为了保持提交历史的整洁，我们可以切换到 Feature 分支执行 rebase 操作：
1git rebase master
reba ...
GitHub+jsDelivr+PicGo搭建免费图床
前言因为嫌麻烦且不想花钱🥱，所以选择使用 GitHub + jsDelivr + PicGo 搭建图床……
下面是步骤，很简单🎈
新建 Github 仓库打开 https://github.com，登录后新建仓库用于存放图片
仓库创建好之后，打开 https://github.com/settings/tokens，生成一个token用于PicGo操作你的仓库
然后点击页面最底部的绿色 Generate token 按钮，就能看到生成的token了。
注意：这个token只显示一次！把这个token复制一下，等下要用。
配置 PicGoPicGo下载地址: https://github.com/Molunerfinn/PicGo/releases
下载安装后打开进行配置;
点击图床设置 -> Github
仓库名格式为 github用户名/仓库名
分支一般选择主分支即可
粘贴刚刚生成的 token
设定自定义域名, 因为GitHub国内访问受限, 所以需要使用 jsDelivr 加速访问,
自定义域名设置为: https://cdn.jsdelivr.n ...
css-grid 网格布局
容器属性
display: grid - 指定一个容器使用网格布局
grid-template-columns - 指定每一列的列宽
grid-template-rows - 指定每一行的行高
grid-template - 以上两个属性的简写
row-gap - 设置行与行的间隔（行间距）
column-gap - 设置列与列的间隔（列间距）
gap - 以上两个属性的简写形式 gap: <row-gap> <column-gap>
grid-template-areas - 定义区域
grid-auto-flow - 项目放置顺序；默认值是 row 表示先行后列， column表示先列后行
justify-items - 单元格内容的水平位置
align-items - 单元格内容的垂直位置
place-items - 以上两个属性的简写形式 place-items: <align-items> <justify-items>
justify-content - 整个内 ...
Git学习使用笔记
本文记录我学习和使用 git 的笔记，记录学习和使用 git 时遇到的问题和技巧。(持续更新…)
分支操作
拉取远程指定分支 $ git clone -b branch_name git@github.com:xxx
查看所有分支 $ git branch -a
切换到指定的远程分支 $ git switch -c branch_name origin/branch-name
删除远程指定分支 $ git push origin -d [branch_name]
git stash 储藏当前工作区
git stash命令用于将当前未提交（工作区和暂存区）的改动储藏起来，等处理完其它工作之后再恢复。
1234567891011121314151617181920212223242526# 查看当前工作区$ git statusOn branch devChanges not staged for commit: (use "git add <file>..." to update what will be committed) (use ...
ts实用类型
TypeSciprt 提供了几种实用类型，方便常见的类型转换。这些类型在全局可用。
原文链接：https://www.typescriptlang.org/docs/handbook/utility-types.html
Awaited<Type>模拟 async function 中的 await 或 Promises 的 .then() 方法等操作，确切来说，就是递归展开Promises 。
12345678910111213type A = Awaited<Promise<string>> // type A = stringtype B = Awaited<Promise<Promise<number>>> // type B = numbertype C = Awaited<boolean | Promise<number>> // type C = boolean | numberfunction fn1(): Promise<string> { r ...
css切角效果
问题
如上图👆这种，切掉一个矩形的一个或多个角的设计效果，前端在切图时会经常遇到这样的场景，如何使用css轻易实现这种效果？
解决方案
使用css的渐变就能实现这种效果。假设我们需要一个右下角被切掉的效果，我们只需要一个从右下角到左上角（-45deg）的线性渐变，从透明色开始渐变，然后在相同的位置设置另一个色值就能实现。（假设切角深度为35px）：
1background: linear-gradient(-45deg, transparent 35px, #C02A79 0);
现在，我们来把它变成一个向右箭头的样子，只需要再为它加一层渐变：
123background: linear-gradient(-135deg, transparent 35px, #C02A79 0) top, linear-gradient(-45deg, transparent 35px, #C02A79 0) bottom;
如果你运行了上面的代码你就会发现，结果是这个样子的😱。
这是因为我们使用了两层渐变，默认情况下，两层渐变都会填满整个元素，会相互覆盖，而且两层渐 ...
开始使用git管理您的代码
安装git
git 安装地址： https://git-scm.com/downloads
安装完成后，在桌面右键菜单找到“Git Bash”，点击蹦出一个类似命令行窗口的东西，就说明Git安装成功！
确认安装成功后，还需要最后一步设置，在命令行输入：
12$ git config --global user.name "Your Name"$ git config --global user.email "email@example.com"
说明：git config –list 命令可以查看当前Git环境所有配置
注册GitHub及创建远程仓库
注册GitHub： https://github.com
注册并登录成功之后，进到GitHub主页，在页面右上方用户菜单上选择 “+”->New repository 创建一个新的仓库。
给仓库取一个名字，点击创建仓库按钮 你将成功创建一个仓库。
创建本地仓库
在你自己的电脑合适的地方创建一个目录，进到这个目录，打开 Git Bash 通过 git init 命令把这个 ...
彻底弄懂 js 中事件冒泡和捕获🎈
事件触发经历的三个阶段
首先我们要弄清楚当一个dom事件被触发时，它不仅仅是单纯地在自身对象上触发一次，而是经历了三个不同的阶段：👇
捕获阶段：事件对象从 window 开始依次向下传递，直到目标的父级元素，从外向内捕获事件对象；
目标阶段：到达目标事件位置，触发事件；
冒泡阶段：从目标的父级开始依次向上传递，直到 window 停止，从内向外冒泡事件对象。
下面是 w3c解释事件流 的图：
冒泡和捕获
当我们注册一个事件时，事件默认使用冒泡事件流，不使用捕获事件流。
123addEventListener(type, listener);addEventListener(type, listener, useCapture);addEventListener(type, listener, options);
event： 必须。字符串，指定 事件类型。listener： 必须。一个实现了 EventListener 接口的对象，或者是一个事件处理函数。useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。（默认 false）
options： 可选，一 ...