八股文 (一)
文章目录
- 项目地址
- 一、前端
- 1.1 大文件上传,预览
- 1.2 首页性能优化
- 1.2 流量染色,灰度发布
- 1.3 Websock心跳机制,大数据实时数据优化
- 1.4 Gpu 加速 fps优化
- 1.5 echarts包大小优化和组件封装
- 1.6 前端监控系统
- 1.7 超大虚拟列表卡顿
- 1. 实现
- 2. 相关问题
- (1) 什么是虚拟化列表,为什么要使用它?
- (2) 如何计算每一行的高度和可见行数的?
- (3) 如何保证滚动事件的性能的?当用户快速滚动时
- (4) 如何处理边界情况,比如滚动到顶部或底部?
- 1.8 图片懒加载,懒加载占位符,canvas对上传图片压缩
- 1.9 监控工具
- 1.10 代码体积
- 1.11 拖拽式报表,动态报表
- 1.12 团队基建
- 1.13 首屏性能优化
- 二、后端
- 2.1 大数据导出
- 2.2 分布式事务,事务
- 2.3 数据库主从 一致
- 2.4 间隙锁,分布式锁,乐观锁
项目地址
- 教程作者:
- 教程地址:
- 代码仓库地址:
- 所用到的框架和插件:
dbt
airflow
一、前端
1.1 大文件上传,预览
- 前端:①切文件;②判定切片是否完成上传完成;③断点、错误续传,记录已上传的切片位置,
- 后端:①收切片、存切片;②合并切片;③文件是否存在校验,服务端根据文件Hash值、文件名,校验该文件是否已经上传
前端:
- 常量设置切片大小
- 获取文件的hash值
- 进行切片,切片保存,含有:切片内容,切片索引,filehash,以及上传状态,并存储为一个数据
- 批量上传切片,并且限制并发数为6,并且使用递归上传,返回一个promise,并且更改切片的上传状态
- 当前成功上传的index/总长度 就可以获得文件上传进度
- 当所有文件上传完成,使用promise 调用后端开始合并,使用useState显示百分比
后端: - 创建文件同名的md5的临时文件夹,用来存放所有的切片
- 根据文件hash值和文件名,以及chunkindex进行合并,使用.net 的FileStream
1.2 首页性能优化
react性能优化的核心:减少rerender(重新渲染)
UI = render(state)
1.
1.2 流量染色,灰度发布
1.3 Websock心跳机制,大数据实时数据优化
1.4 Gpu 加速 fps优化
1.5 echarts包大小优化和组件封装
1.6 前端监控系统
- 异常:JS异常,接口异常,白屏异常,资源异常
- 性能数据:FC, FCP, DOM READY, DNS等&#x
相关文章:
八股文 (一)
文章目录 项目地址一、前端1.1 大文件上传,预览1.2 首页性能优化1.2 流量染色,灰度发布1.3 Websock心跳机制,大数据实时数据优化1.4 Gpu 加速 fps优化1.5 echarts包大小优化和组件封装1.6 前端监控系统1.7 超大虚拟列表卡顿1. 实现2. 相关问题(1) 什么是虚拟化列表,为什么要…...
TVM调度原语完全指南:从入门到微架构级优化
调度原语 在TVM的抽象体系中,调度(Schedule)是对计算过程的时空重塑。每一个原语都是改变计算次序、数据流向或并行策略的手术刀。其核心作用可归纳为: 优化目标 max ( 计算密度 内存延迟 指令开销 ) \text{优化目标} \max…...

c语言进阶(简单的函数 数组 指针 预处理 文件 结构体)
c语言补充 格式 void函数头 {} 中的是函数体 sum函数名 () 参数表 #include <stdio.h>void sum(int begin, int end) {int i;int sum 0;for (i begin ; i < end ; i) {sum i;}printf("%d到%d的和是%d\n", begin, end, sum); …...

终极版已激活!绿话纯净,打开即用!!!
今天我想和大家聊聊一个非常实用的工具——视频转换大师最终版。 视频转换大师终极版,堪称一款全能型的视频制作神器,集视频转换与编辑功能于一体。它搭载的视频增强器技术,能够最大限度地保留原始视频质量,甚至还能实现质量的进…...
Vue.js 什么是 Composition API?
Vue.js 什么是 Composition API? 今天我们来聊聊 Vue 3 引入的一个重要特性:组合式 API(Composition API)。如果你曾在开发复杂的 Vue 组件时感到代码难以维护,那么组合式 API 可能正是你需要的工具。 什么是组合式 …...

MySQL高可用
一、mysql路由 1.利用路由器的连接路由特性,用户可以编写应用程序来连接到路由器,并令路由器使用响应的路由策略来处理连接来使其连接到正确的mysql数据库服务器 2.mysql route的部署方式 需要在所有数据库主机之外再打开一台主机mysql-router 配置mysql…...

30.Word:设计并制作新年贺卡以及标签【30】
目录 NO1.2 NO3邮件合并-信函 NO4邮件合并-标签 NO1.2 另存为/F12:考生文件夹:Word.docx布局→页面设置对话框→页边距:上下左右→纸张:宽度/高度(先调页边距🆗)设计→页面颜色→填充效果→…...

Flink2支持提交StreamGraph到Flink集群
最近研究Flink源码的时候,发现Flink已经支持提交StreamGraph到集群了,替换掉了原来的提交JobGraph。 新增ExecutionPlan接口,将JobGraph和StreamGraph作为实现。 Flink集群Dispatcher也进行了修改,从JobGraph改成了接口Executio…...

大模型本地化部署(Ollama + Open-WebUI)
文章目录 环境准备下载Ollama模型下载下载Open-WebUI 本地化部署的Web图形化界面本地模型联网查询安装 Docker安装 SearXNG本地模型联网查询 环境准备 下载Ollama 下载地址:Ollama网址 安装完成后,命令行里执行命令 ollama -v查看是否安装成功。安装成…...

C++哈希(链地址法)(二)详解
文章目录 1.开放地址法1.1key不能取模的问题1.1.1将字符串转为整型1.1.2将日期类转为整型 2.哈希函数2.1乘法散列法(了解)2.2全域散列法(了解) 3.处理哈希冲突3.1线性探测(挨着找)3.2二次探测(跳…...
IME关于输入法横屏全屏显示问题-Android14
IME关于输入法横屏全屏显示问题-Android14 1、输入法全屏模式updateFullscreenMode1.1 全屏模式判断1.2 全屏模式布局设置 2、应用侧关闭输入法全屏模式2.1 调用输入法的应用设置flag2.2 继承InputMethodService.java的输入法应用覆盖onEvaluateFullscreenMode方法 InputMethod…...

网络工程师 (11)软件生命周期与开发模型
一、软件生命周期 前言 软件生命周期,也称为软件开发周期或软件开发生命周期,是指从软件项目的启动到软件不再被使用为止的整个期间。这个过程可以细分为多个阶段,每个阶段都有其特定的目标、任务和产出物。 1. 问题定义与需求分析 问题定义…...
【人工智能】基于Python的机器翻译系统,从RNN到Transformer的演进与实现
《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 机器翻译(Machine Translation, MT)作为自然语言处理领域的重要应用之一,近年来受到了广泛的关注。在本篇文章中,我们将详细探讨如何使…...

网络工程师 (12)软件开发与测试
一、软件设计 (一)定义与目的 软件设计是从软件需求出发,设计软件的整体结构、功能模块、实现算法及编写代码的过程,旨在确定系统如何完成预定任务。其目标是确保目标系统能够抽象、普遍地完成预定任务,并为后续的软件…...

3.Spring-事务
一、隔离级别: 脏读: 一个事务访问到另外一个事务未提交的数据。 不可重复读: 事务内多次查询相同条件返回的结果不同。 幻读: 一个事务在前后两次查询同一个范围的时候,后一次查询看到了前一次查询没有看到的行。 二…...
Python字典详解:从入门到实践
Python字典详解:从入门到实践 字典(Dictionary)是Python中最重要且最常用的数据结构之一。本文将深入讲解字典的特性、操作方法和实际应用案例。 1. 字典简介 字典是可变的、无序的键值对集合,使用{}创建。每个元素由key: valu…...

91,【7】 攻防世界 web fileclude
进入靶场 <?php // 包含 flag.php 文件 include("flag.php");// 以高亮语法显示当前文件(即包含这段代码的 PHP 文件)的内容 // 方便查看当前代码结构和逻辑,常用于调试或给解题者提示代码信息 highlight_file(__FILE__);// 检…...

41【文件名的编码规则】
我们在学习的过程中,写出数据或读取数据时需要考虑编码类型 火山采用:UTF-16 易语言采用:GBK php采用:UTF-8 那么我们写出的文件名应该是何种编码的?比如火山程序向本地写出一个“测试.txt”,理论上这个“测…...
蓝桥杯备赛经验帖
蓝桥杯备赛经验帖 作者:blue 时间:2025.2.1 文章目录 蓝桥杯备赛经验帖1.为什么有这篇文章2.赛制3.比赛流程4.如何准备5.其他建议6.一些感悟 1.为什么有这篇文章 笔者近期发现,观看我写的两道第十五届蓝桥杯题解的人数逐渐增多…...

一文大白话讲清楚webpack基本使用——17——Tree Shaking
文章目录 一文大白话讲清楚webpack基本使用——17——Tree Shaking1. 建议按文章顺序从头看,一看到底,豁然开朗2. 啥叫Tree Shaking3. 什么是死代码,怎么来的3. Tree Shaking的流程3.1 标记3.2 利用Terser摇起来 4. 具体使用方式4.1 适用前提…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
Python爬虫实战:研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式(Singleton Pattern&#…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...

《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码: https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...