前端性能优化——javascript
优化处理：
讲javascript脚本文件放到body标记的后面
减少页面当中所包含的script标记的数量
课堂练习：
脚本优化处理
使用原生JavaScript完成操作过程。
document.querySelector document.querySelectorAll
classList以及类的操作API
Element.classList - Web API 接口参考 | MDN
高性能的网络请求
Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。fetch api是基于promise的设计，它是为了取代传统xhr的不合理的写法而生的。
传统网络请求：
fetch网络请求：
fetch() - Web API 接口参考 | MDN
formidable - npm
创建后端
koa2 -e koa-server
cd koa-server
npm install
npm install koa-cors
npm install formidable
进入到koa-server/app.js
添加：const cors = require("koa-cors")
app.use(cors())
index.js
const router = require('koa-router')()
const {formidable} = require('formidable')router.get('/', async (ctx, next) => {ctx.body = {status: 'koa2'}
})router.post('/add',(ctx,next)=>{let body=ctx.request.bodyconsole.log(body)// console.log(ctx.request.body.name)ctx.body ={status: 'success'}
})router.post('/upload',async(ctx,next)=>{let form=formidable({uploadDir:__dirname,keepExtensions:true})await new Promise((resolve,reject)=>{form.parse(ctx.req,(err,fields,files)=>{if(err){reject(err)return}console.log(fields)console.log(files)ctx.set('Content-type','application/json')ctx.status=200ctx.state={fields,files}ctx.body=JSON.stringify(ctx.state,null,2)resolve()})})})router.get('/string', async (ctx, next) => {ctx.body = 'koa2 string'
})router.get('/json', async (ctx, next) => {ctx.body = {title: 'koa2 json'}
})module.exports = router
前端页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="file" id="file" />
</body>
<script>fetch('http://localhost:3000/',{method: 'GET',// body:JSON.stringify({}) get请求不需要bodymode: 'cors'})// 服务端返回的数据格式 json() text() blob().then(res => res.json())// 服务端接受数据.then(data => {console.log(data)})fetch('http://localhost:3000/add',{method: 'POST',body:JSON.stringify({name:'张三'}),mode: 'cors'}).then(res => res.json()).then(data => {console.log(data)})const file = document.querySelector('#file');file.onchange = function () {// console.log(file.files)let uploadFile = file.files[0];let formData = new FormData();formData.append('file',uploadFile);fetch('http://localhost:3000/upload',{method: 'POST',body:formData,mode: 'cors'}).then(res => res.json()).then(data => {console.log(data)})}
</script>
</html>高性能的动画处理
Window：requestAnimationFrame() 方法 - Web API 接口参考 | MDN
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="file" id="file" />
</body>
<script>fetch('http://localhost:3000/',{method: 'GET',// body:JSON.stringify({}) get请求不需要bodymode: 'cors'})// 服务端返回的数据格式 json() text() blob().then(res => res.json())// 服务端接受数据.then(data => {console.log(data)})fetch('http://localhost:3000/add',{method: 'POST',body:JSON.stringify({name:'张三'}),mode: 'cors'}).then(res => res.json()).then(data => {console.log(data)})const file = document.querySelector('#file');file.onchange = function () {// console.log(file.files)let uploadFile = file.files[0];let formData = new FormData();formData.append('file',uploadFile);fetch('http://localhost:3000/upload',{method: 'POST',body:formData,mode: 'cors'}).then(res => res.json()).then(data => {console.log(data)})}
</script>
</html>视频演示
fetch请求和高性能动画处理
js语言层级优化(减少页面中的dom操作)
对比前，有很多的dom操作，并且直接写在循环里面了
优化：把它们转存一下
相关文章：
前端性能优化——javascript
优化处理： 讲javascript脚本文件放到body标记的后面 减少页面当中所包含的script标记的数量 课堂练习： 脚本优化处理 使用原生JavaScript完成操作过程。 document.querySelector document.querySelectorAll classList以及类的操作API Element.class…...
Docker容器化技术（使用Docker搭建论坛）
第一步：删除容器镜像文件 [rootlocalhost ~]# docker rm -f docker ps -aq b09ee6438986 e0fe8ebf3ba1第二步：使用docker拉取数据库 [rootlocalhost ~]# docker run -d --name db mysql:5.7 02a4e5bfffdc81cb6403985fe4cd6acb0c5fab0b19edf9f5b8274783…...
C# ListView 控件使用
1.基本设置 listView1.Columns.Add("序号", 60); //向 listView1控件中添加1列 同时设置列名称和宽度listView1.Columns.Add("温度", 100); //下同listView1.Columns.Add("偏移", 100);listView1.Columns.Add("分割", 50);listView1…...
【string一些函数用法的补充】
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 string类对象的修改操作 我们来看 c_str 返回c格式的字符串的操作： 我们来看 rfind 和 substr 的操作： string类非成员函数 我们来看 r…...
【Go】令牌桶限流算法
1. 限流 限流，顾名思义，限制用户请求流量，避免大规模并发导致系统宕机。 2. 令牌桶算法 令牌管理员以恒定的速率向令牌桶里放置一个令牌。如果桶满，就丢弃令牌。 请求到达时，都要先去令牌桶里取一个令牌，…...
go的slice学习
并发访问slice 线上出现一粒多协程并发append全局slice的情况，导致内存不断翻倍，因此对slice的使用需要重新考虑。 并发读写的情况下， 可以利用锁、channel等避免竞态 问题 func TestDemo32(t *testing.T) {var wg sync.WaitGroupvar n 1…...
软件设计师17--磁盘管理
软件设计师17--磁盘管理 考点1：存储管理 - 磁盘管理调度算法磁盘调度 - FCFS磁盘调度 - SSTF例题： 考点1：存储管理 - 磁盘管理 存取时间寻道时间等待时间，训导时间是指磁头移动到磁道所需的时间；等待时间为等待读写的扇…...
学点Java打小工——Day2Day3一点作业
1 猜数字（10次机会） 随机生成[1,1000]的一个数，输入你猜的数程序会给出反馈，直到猜对或次数用尽(10次)。 //猜数字 10次机会Testpublic void guessNumber() {Random random new Random();// [0, 1000) 1// [1, 1000]int num ra…...
【话题】2024年AI辅助研发趋势，有那些应用领域
大家好，我是全栈小5，欢迎阅读文章！ 此篇是【话题达人】系列文章，这一次的话题是《2024年AI辅助研发趋势》 目录 背景概念实践医药领域汽车设计领域展望未来文章推荐 背景 随着人工智能技术的持续发展与突破，2024年AI辅…...
蓝桥杯——数组切分
数组切分 题目分析 这里要搞清楚一个点就是满足区间内数字是连续数字的区间有什么样的特点，既然数字连续重新排列后的数字为n,n1,n2,n3,n4,…nlen，则最大数字和最小数字之差恰好是区间长度减1，即nlen-nlen，同样因为下标也是连续…...
【机器学习】进阶学习：详细解析Sklearn中的MinMaxScaler---原理、应用、源码与注意事项
【机器学习】进阶学习：详细解析Sklearn中的MinMaxScaler—原理、应用、源码与注意事项 这篇文章的质量分达到了97分，虽然满分是100分，但已经相当接近完美了。请您耐心阅读，我相信您一定能从中获得不少宝贵的收获和启发~ …...
数据库是什么？数据库连接、管理与分析工具推荐
一、数据库是什么？ 数据库是一种结构化的数据存储系统，用于有效地组织、存储和管理大量的数据。它是一个集中化的数据存储库，通常由一个或多个数据表组成，每个数据表包含多个行和列，用于存储特定类型的数据。数据表中…...
【C#算法实现】可见的山峰对数量
文章目录 前言一、题目要求二、算法设计及代码实现2.1 算法思想2.2 代码实现 前言 本文是【程序员代码面试指南（第二版）学习笔记】C#版算法实现系列之一，用C#实现了《程序员代码面试指南》（第二版）栈和队列中的可见的…...
Selenium 隐藏浏览器指纹特征的几种方式
文章转载于：https://mp.weixin.qq.com/s/sXRXwMDqekUHfU2SnL-PYg 我们使用 Selenium 对网页进行爬虫时，如果不做任何处理直接进行爬取，会导致很多特征是暴露的 对一些做了反爬的网站，做了特征检测，用来阻止一些恶意爬虫…...
k8s发布nacos-server,nodeport配置注意事项
k8s发布nacos-server注册不上问题 问题描述：分析过程： 问题描述： k8s发布nacos-server做服务公用使用，nodeport暴漏服务给客户端注册， nacos:端口 8848：30601 9848：30701 分析过程：…...
伪分布式Spark集群搭建
一、软件环境 软 件 版 本 安 装 包 VMware虚拟机 16 VMware-workstation-full-16.2.2-19200509.exe SSH连接工具 FinalShell Linux OS CentOS7.5 CentOS-7.5-x86_64-DVD-1804.iso JDK 1.8 jdk-8u161-linux-x64.tar.gz Spark 3.2.1 spark-3.2.1-bin-…...
Android 监听卫星导航系统状态及卫星测量数据变化
源码 package com.android.circlescalebar;import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.core.app.ActivityCompat; import androidx.core.content.ContextCompat; import android.Manifest; import android.conte…...
鸿蒙培训开发：就业市场的新热点~
金三银四在即，随着春节假期结束，各行各业纷纷复工复产，2024年的春季招聘市场也迎来了火爆的局面。最近发布的《2024年春招市场行情周报（第一期）》显示，尽管整体就业市场仍处于人才饱和状态，但华…...
【C++】string的底层剖析以及模拟实现
一、字符串类的认识 C语言中，字符串是以\0结尾的一些字符的集合，为了操作方便，C标准库中提供了一些str系列的库函数， 但是这些库函数与字符串是分离开的，不太符合OOP的思想，而且底层空间需要用户自己管理&a…...
Unity的PICO项目基础环境搭建笔记（调试与构建应用篇）
文章目录 前言一、为设备开启开发者模式1、开启PICO VR一体机。前往设置>通用>关于本机>软件版本号2、一直点击 软件版本号 ，直到出现 开发者 选项3、进入 开发者模式，打开 USB调试，选择 文件传输 二、实时预览应用场景1、下载PC端的…...
论文党速看！2026实测靠谱的一键生成论文工具|实测必入避坑版
2026 年学术写作工具已高度分化，千笔AI与ThouPen为全流程首选，豆包、DeepSeek 为专项强手；避坑关键：拒绝假文献、严控 AIGC 率、优先国内适配、免费试用先行。 一、TOP3 全流程首选（亲测不踩雷） 1. 千笔AI&…...
RAG增强检索在AIGC工作流中的实战：从文档解析到向量召回全流程
系列导读 你现在看到的是《从0到1构建AIGC工作流自动化平台：架构、实践与运维全指南》的第 3/10 篇，当前这篇会重点解决：让读者掌握RAG从理论到代码的完整落地流程，并学会在工作流中优雅复用。 上一篇回顾：第 2 篇《搭建你的第一个AIGC工作流：基于LangChain实现多步链式…...
卖包装薄膜怎么找客户？下游工厂在哪里
卖包装薄膜找客户，本质是找用膜的下游工厂，核心难点是把这些真实在产、真实消耗薄膜的下游厂的名单和联系人系统拿到手——报价单发不出去、拜访找不到门，问题往往出在名单环节而不是产品本身。 包装薄膜的下游客户到底是谁 包装薄膜品类多样…...
初次使用Taotoken，从注册到成功发起第一次API调用的全过程
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 初次使用Taotoken，从注册到成功发起第一次API调用的全过程 对于初次接触大模型API的开发者而言，从注册平台…...
突破下载瓶颈：百度网盘Mac版SVIP加速完全指南
突破下载瓶颈：百度网盘Mac版SVIP加速完全指南 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 你是否曾因百度网盘Mac版的龟速下载而焦躁&am…...
如何快速实现Windows硬件ID伪装：EASY-HWID-SPOOFER终极指南
如何快速实现Windows硬件ID伪装：EASY-HWID-SPOOFER终极指南 【免费下载链接】EASY-HWID-SPOOFER 基于内核模式的硬件信息欺骗工具 项目地址: https://gitcode.com/gh_mirrors/ea/EASY-HWID-SPOOFER 在当今数字隐私日益重要的时代，硬件指纹追踪已成…...
Appium 2.10.1环境搭建实战：JDK21+Android SDK34全链路排障指南
1. 这不是“装个软件”——Appium最新版环境搭建的真实水深 很多人点开“Appium环境搭建”教程，以为就是下载几个安装包、点几下下一步，顶多配个PATH变量就完事了。我去年带三个新人做自动化测试时，也这么想。结果光是让一台干净的Windows 1…...
如何用roop-unleashed三分钟制作专业级AI换脸视频：零门槛人脸替换终极指南
如何用roop-unleashed三分钟制作专业级AI换脸视频：零门槛人脸替换终极指南 【免费下载链接】roop-unleashed Evolved Fork of roop with Web Server and lots of additions 项目地址: https://gitcode.com/gh_mirrors/ro/roop-unleashed 还在为复杂的AI换脸工…...
LSLib终极指南：轻松解锁《神界原罪》和《博德之门3》MOD制作之门
LSLib终极指南：轻松解锁《神界原罪》和《博德之门3》MOD制作之门 【免费下载链接】lslib Tools for manipulating Divinity Original Sin and Baldurs Gate 3 files 项目地址: https://gitcode.com/gh_mirrors/ls/lslib LSLib是一款专门为《神界原罪》系列和…...
低查重AI教材写作利器，一键生成丰富内容，让教材编写不再发愁！
关于AI工具在教材编写中的应用探讨 在编写教材时，如何才能更好地满足各类需求？不同年级的学生在认知能力上有着很大的不同，内容过于深奥或肤浅都不合适；教学场景也各有差异，例如课堂教学与自主学习，教材的…...