web性能指标概念
web性能指标 First Contentful Paint (FCP)：首次内容绘制 Largest Contentful Paint (LCP)：最大内容绘制 First Input Delay (FID)：首次输入延迟 Time to Interactive (TTI)：可交互时间 Total Blocking Time (TBT)：总阻塞时间（TTI - FCP） Cumulative Layout Shift (CLS)：累积布局偏移 相关网站 Lighthouse: Lighthouse，Chrome 扩展程序运行，或作为命令行工具 web.dev: 在线测试，但是国内网页相
js拖拽文件夹上传文件(附较完整注释)
scanFiles.js 通过drop事件获取文件夹中 经测试兼容新版chrome和safari浏览器。注意：chrome 每次只能读取100个文件，所以下边代码循环读取。 // 仅支持选择一个文件夹，并且不会递归上传 async function scanFiles(e) { e.preventDefault() const { items = [], files = [] } = e.dataTransfer // 只上传第一个文件夹 const [item] = items if (!item || !item.webkitGetAsEntry) return fi
利用 js 合并多个图片 下载 zip
利用 js 合并多个图片 下载 zip 注意：图片地址要允许跨域或者在同域名 // downloadImagesZip.js import axios from 'axios' import JSZip from 'jszip' // 获取图片arraybuffer async function getFileData(url) { const { data } = await axios({ url, responseType: 'arraybuffer' }) return data } // 利用a标签下载 async func
60行代码写一个超简陋的koa
一个很简陋的koa代码，可以很轻松的了解koa的工作流程 app.js代码 const http = require('http') const { Stream } = require('stream') const qs = require('querystring') const app = { middleware: [], use(fn) { this.middleware.push(fn) }, listen(port = 3000) { const server = http.createServe
centos系统yum命令错误rpmdb open failed
# 重新生成db文件 cd /var/lib/rpm rm -f __db.* rpm --rebuilddb yum clean all # 查看是否成功 yum --help
一个简单的 git hooks（post-receive）使用流程
一、 服务器创建一个空仓库 # 进入部署目录 cd /var/www/temp # 创建空仓库 git init --bare temp.git 二、配置 git hooks（.temp.git/hooks/post-receive） #!/bin/sh set -e # 部署目录 DeployPath="/var/www/temp" # 判断是不是远端仓库 IS_BARE=$(git rev-parse --is-bare-repository) if [ -z "$IS_BARE" ]; then echo >&2 "
css轮播（scroll-snap）
css轮播（scroll-snap） 主动滚动到临界点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css轮播（scroll-snap）</title> <style> .container {
css瀑布流
css瀑布流 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css瀑布流</title> <style> * { margin: 0; padding: 0; }
小程序键盘弹起会推起页面
小程序键盘推起页面解决方案 Input标签设置adjustPosition属性false(页面页面不再被推起) 通过focus事件对象e.detail.height设置Input距离页面底部的距离
nuxt项目错误-The client-side rendered virtual DOM tree is not matching server-rendered content.
Q：nuxt项目中出现下述问题 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. 问题分析： 出现上边问题是服务端和客户端dom结构不一致。后来排查原因，浏览器自动识别手机号变成了a标签，可以加入meta禁止浏览器默认行为。 <!-- 禁止浏览器识别手机号和邮箱 --> <meta name="format-detection" content="telephone=no, email=no"/>
SSH登录服务器设置别名
一、通过ssh登录服务器 # 通过ip登录 ssh root@94.191.**** # 设置过别名通过别名登录 ssh root@test-1 二、设置别名登录 打开配置文件 # 打开配置文件 vi ~/.ssh/config 加入配置内容 # 当前文件 ~/.ssh/config # 第一台服务器 Host test1 HostName 94.191.*** Port 22 User root # 华为服务器 Host test1 HostName 121.36.*** Port 22 User root
使用js根据<H>标签获取文章目录
使用js根据<H>标签获取文章目录 使用递归重写文章侧边栏目录生成方法 js代码 // 获取H标签等级 const getLevel = item => (item.match(/<h(\d+)/) || [])[1]; // 获取H标签内容 const getText = item => item.replace(/<[^>]+>/g, ""); // 获取目录html function getTocHtml(html) { const data = (html.match(/<h[1-6](.*)?<\/h[1-6]&
通过 shell 备份 mysql 到七牛云并发送钉钉消息
一、简介 所有功能通过 shell 实现 定时备份数据库 使用 shell 上传七牛云 上传结果发送钉钉消息 设置定时任务 （1） 打开定时任务 crontab -e （2）编辑定时任务 # 每天五点开始备份数据库 0 5 * * * cd /root/backup; bash index.sh 二、shell 文件介绍 （1）index.sh 关联三个 shell，mysql->上传七牛云->上传结果发送钉钉消息，保存日志到 backup.log set -e # 日志文件 logFile="backup.log" # 上传文件 echo "开始数据库备份开始..."
js使用encodeURIComponent实现PHP的rawurlencode
js使用encodeURIComponent实现PHP的rawurlencode function rawurlencode(str = "") { const replaceList = [ { reg: /!/g, value: '%21' }, { reg: /\*/g, value: '%2A' }, { reg: /\(/g, value: '%28' }, { reg: /\)/g, value: '%29' }, { reg: /'/g, value: '%21' }, ]; let resStr = encodeURIComp
js导出excel(支持图片)
导出excel(支持图片)-test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>导出excel(支持图片)</title> </head> <body> <table style="b
