八股文 (一)
文章目录
- 项目地址
- 一、前端
- 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 适用前提…...

【C++ 区间位运算】3209. 子数组按位与值为 K 的数目|2050
本文涉及知识点 位运算、状态压缩、枚举子集汇总 LeetCode3209. 子数组按位与值为 K 的数目 给你一个整数数组 nums 和一个整数 k ,请你返回 nums 中有多少个子数组 满足:子数组中所有元素按位 AND 的结果为 k 。 示例 1: 输入:…...

8 比例缩放(scale.rs)
scale.rs代码是几何变换库euclid中典型的数据结构和方法的例子,用于处理二维和三维空间中的缩放变换。 一、scale.rs文件源码 //! A type-checked scaling factor between units.use crate::num::One;use crate::approxord::{max, min}; use crate::{Box2D, Box3D…...

二分 机器人的跳跃问题
二段性:找到一个值,大于此值的时候都成立,小于的时候都不成立 更新的方式只有两种,左边的mid更新不需要1;右边的mid更新需要1 //对能量进行二分,确定能量的范围 //特判防止溢出int #include<bits/stdc.h> using…...

Hive:复杂数据类型之Map函数
Map函数 是Hive里面的一种复杂数据类型, 用于存储键值对集合。Map中的键和值可以是基础类型或复合类型,这使得Map在处理需要关联存储信息的数据时非常有用。 定义map时,需声明2个属性: key 和 value , map中是 key value 组成一个元素 key-value, key必须为原始类…...

R 字符串:深入理解与高效应用
R 字符串:深入理解与高效应用 引言 在R语言中,字符串是数据处理和编程中不可或缺的一部分。无论是数据清洗、数据转换还是数据分析,字符串的处理都是基础技能。本文将深入探讨R语言中的字符串概念,包括其基本操作、常见函数以及高效应用方法。 字符串基本概念 字符串定…...

设计模式Python版 桥接模式
文章目录 前言一、桥接模式二、桥接模式示例三、桥接模式与适配器模式的联用 前言 GOF设计模式分三大类: 创建型模式:关注对象的创建过程,包括单例模式、简单工厂模式、工厂方法模式、抽象工厂模式、原型模式和建造者模式。结构型模式&…...

记5(一元逻辑回归+线性分类器+多元逻辑回归
目录 1、一元逻辑回归2、线性可分&线性不可分3、Iris数据集实现多元逻辑回归4、绘制分类图5、鸢尾花分类图6、多分类问题:(softmax回归)6.1、编码:自然顺序码、独热编码、独冷编码6.2、二/多分类问题:6.3、softmax…...

【Python】第七弹---Python基础进阶:深入字典操作与文件处理技巧
✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】【MySQL】【Python】 目录 1、字典 1.1、字典是什么 1.2、创建字典 1.3、查找 key 1.4、新增/修改元素 1.5、删除元素 1.6、遍历…...

Nginx 运维开发高频面试题详解
一、基础核心问题 原文链接:https://blog.csdn.net/weixin_51146329/article/details/142963853 1、什么是Nginx? Nginx 是一个高性能的 HTTP 和反向代理服务器,它以轻量级和高并发处理能力而闻名。Nginx 的反向代理功能允许它作为前端服务…...

下载OpenJDK
由于Oracle需要付费,并且之前我在寻找openJDK的时候,我不知道网址,并且也不知道在这个openjdk这个网址里点击哪个模块进行下载。最近我在看虚拟机相关的书籍的时候,找到了相关的网址。 注意:下面的下载都是基于可以科…...