当前位置: 首页 > news >正文

八股文 (一)


文章目录

  • 项目地址
  • 一、前端
    • 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值、文件名,校验该文件是否已经上传
    前端:
  1. 常量设置切片大小
  2. 获取文件的hash值
  3. 进行切片,切片保存,含有:切片内容,切片索引,filehash,以及上传状态,并存储为一个数据
  4. 批量上传切片,并且限制并发数为6,并且使用递归上传,返回一个promise,并且更改切片的上传状态
  5. 当前成功上传的index/总长度 就可以获得文件上传进度
  6. 当所有文件上传完成,使用promise 调用后端开始合并,使用useState显示百分比
    后端:
  7. 创建文件同名的md5的临时文件夹,用来存放所有的切片
  8. 根据文件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函数名 &#xff08;&#xff09; 参数表 #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); …...

终极版已激活!绿话纯净,打开即用!!!

今天我想和大家聊聊一个非常实用的工具——视频转换大师最终版。 视频转换大师终极版&#xff0c;堪称一款全能型的视频制作神器&#xff0c;集视频转换与编辑功能于一体。它搭载的视频增强器技术&#xff0c;能够最大限度地保留原始视频质量&#xff0c;甚至还能实现质量的进…...

Vue.js 什么是 Composition API?

Vue.js 什么是 Composition API&#xff1f; 今天我们来聊聊 Vue 3 引入的一个重要特性&#xff1a;组合式 API&#xff08;Composition API&#xff09;。如果你曾在开发复杂的 Vue 组件时感到代码难以维护&#xff0c;那么组合式 API 可能正是你需要的工具。 什么是组合式 …...

MySQL高可用

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

30.Word:设计并制作新年贺卡以及标签【30】

目录 NO1.2 NO3邮件合并-信函 NO4邮件合并-标签​ NO1.2 另存为/F12&#xff1a;考生文件夹&#xff1a;Word.docx布局→页面设置对话框→页边距&#xff1a;上下左右→纸张&#xff1a;宽度/高度&#xff08;先调页边距&#x1f197;&#xff09;设计→页面颜色→填充效果→…...

Flink2支持提交StreamGraph到Flink集群

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

大模型本地化部署(Ollama + Open-WebUI)

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

C++哈希(链地址法)(二)详解

文章目录 1.开放地址法1.1key不能取模的问题1.1.1将字符串转为整型1.1.2将日期类转为整型 2.哈希函数2.1乘法散列法&#xff08;了解&#xff09;2.2全域散列法&#xff08;了解&#xff09; 3.处理哈希冲突3.1线性探测&#xff08;挨着找&#xff09;3.2二次探测&#xff08;跳…...

IME关于输入法横屏全屏显示问题-Android14

IME关于输入法横屏全屏显示问题-Android14 1、输入法全屏模式updateFullscreenMode1.1 全屏模式判断1.2 全屏模式布局设置 2、应用侧关闭输入法全屏模式2.1 调用输入法的应用设置flag2.2 继承InputMethodService.java的输入法应用覆盖onEvaluateFullscreenMode方法 InputMethod…...

网络工程师 (11)软件生命周期与开发模型

一、软件生命周期 前言 软件生命周期&#xff0c;也称为软件开发周期或软件开发生命周期&#xff0c;是指从软件项目的启动到软件不再被使用为止的整个期间。这个过程可以细分为多个阶段&#xff0c;每个阶段都有其特定的目标、任务和产出物。 1. 问题定义与需求分析 问题定义…...

【人工智能】基于Python的机器翻译系统,从RNN到Transformer的演进与实现

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 机器翻译(Machine Translation, MT)作为自然语言处理领域的重要应用之一,近年来受到了广泛的关注。在本篇文章中,我们将详细探讨如何使…...

网络工程师 (12)软件开发与测试

一、软件设计 &#xff08;一&#xff09;定义与目的 软件设计是从软件需求出发&#xff0c;设计软件的整体结构、功能模块、实现算法及编写代码的过程&#xff0c;旨在确定系统如何完成预定任务。其目标是确保目标系统能够抽象、普遍地完成预定任务&#xff0c;并为后续的软件…...

3.Spring-事务

一、隔离级别&#xff1a; 脏读&#xff1a; 一个事务访问到另外一个事务未提交的数据。 不可重复读&#xff1a; 事务内多次查询相同条件返回的结果不同。 幻读&#xff1a; 一个事务在前后两次查询同一个范围的时候&#xff0c;后一次查询看到了前一次查询没有看到的行。 二…...

Python字典详解:从入门到实践

Python字典详解&#xff1a;从入门到实践 字典&#xff08;Dictionary&#xff09;是Python中最重要且最常用的数据结构之一。本文将深入讲解字典的特性、操作方法和实际应用案例。 1. 字典简介 字典是可变的、无序的键值对集合&#xff0c;使用{}创建。每个元素由key: valu…...

91,【7】 攻防世界 web fileclude

进入靶场 <?php // 包含 flag.php 文件 include("flag.php");// 以高亮语法显示当前文件&#xff08;即包含这段代码的 PHP 文件&#xff09;的内容 // 方便查看当前代码结构和逻辑&#xff0c;常用于调试或给解题者提示代码信息 highlight_file(__FILE__);// 检…...

41【文件名的编码规则】

我们在学习的过程中&#xff0c;写出数据或读取数据时需要考虑编码类型 火山采用&#xff1a;UTF-16 易语言采用&#xff1a;GBK php采用&#xff1a;UTF-8 那么我们写出的文件名应该是何种编码的&#xff1f;比如火山程序向本地写出一个“测试.txt”&#xff0c;理论上这个“测…...

蓝桥杯备赛经验帖

蓝桥杯备赛经验帖 作者&#xff1a;blue 时间&#xff1a;2025.2.1 文章目录 蓝桥杯备赛经验帖1.为什么有这篇文章2.赛制3.比赛流程4.如何准备5.其他建议6.一些感悟 1.为什么有这篇文章 ​ 笔者近期发现&#xff0c;观看我写的两道第十五届蓝桥杯题解的人数逐渐增多&#xf…...

一文大白话讲清楚webpack基本使用——17——Tree Shaking

文章目录 一文大白话讲清楚webpack基本使用——17——Tree Shaking1. 建议按文章顺序从头看&#xff0c;一看到底&#xff0c;豁然开朗2. 啥叫Tree Shaking3. 什么是死代码&#xff0c;怎么来的3. Tree Shaking的流程3.1 标记3.2 利用Terser摇起来 4. 具体使用方式4.1 适用前提…...

从零构建:基于OpenCV与人体姿态分析的跌倒检测实战(附完整源码)

1. 为什么我们需要跌倒检测系统 想象一下家里的老人独自在客厅活动时突然摔倒的场景。这种意外在现实生活中并不罕见&#xff0c;尤其是对于行动不便的老年人群体。传统的解决方案往往依赖于佩戴式设备或紧急呼叫按钮&#xff0c;但这些方法要么需要用户主动操作&#xff0c;要…...

直接上代码吧,咱们先用Python+OpenCV搞个帧间差法的Demo。看这段核心代码

基于帧间差法进行视频目标检测处理 【是仅源码的价格】 【可写完整课程设计文档报告】 需要或需要请随时联系&#xff0c;博主常在线能秒回 1.[1]视频目标检测&#xff1a; 视频目标检测是指从视频流中自动识别和提取出运动目标的过程 视频目标检测算法通常基于以下原理和方法&…...

javaweb铁路火车接发车课程作业培训考试系统证书

目录同行可拿货,招校园代理 ,本人源头供货商铁路火车接发车课程作业培训考试系统证书的功能分析系统概述功能模块分析技术实现要点行业合规性扩展功能建议项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作同行可拿货,招校园代理 …...

ESP8266上玩转MicroPython:四角按钮控制LED的3种接线方案对比

ESP8266上玩转MicroPython&#xff1a;四角按钮控制LED的3种接线方案对比 在物联网和智能硬件开发中&#xff0c;ESP8266凭借其出色的性价比和丰富的功能接口&#xff0c;成为了创客和开发者的首选。而MicroPython的出现&#xff0c;更是让Python开发者能够轻松上手硬件编程。本…...

用噪音打破听觉恐怖谷:RTE 开发者社区发布 RealNoise™ TTS:全球首个原生合成动态声场的语音大模型

在过去的几年里&#xff0c;语音 AI 行业的内卷方向始终如一&#xff1a;更高的采样率、更低的延迟、更纯净的音质。我们不断训练模型去剔除哪怕最微小的背景杂音&#xff0c;追求实验室级别的完美信噪比&#xff08;SNR&#xff09;。 然而&#xff0c;当我们在真实的实时互动…...

针对C++开源项目的AI工具讲解。我将它们分为两大类,便于理解

以下是针对C开源项目的AI工具讲解。我将它们分为两大类&#xff0c;便于理解&#xff1a; C开发者使用AI工具来提升开源项目开发效率&#xff08;代码补全、调试、重构、文档生成等&#xff09;。用C开发的开源AI工具/框架&#xff08;这些工具本身是C开源项目&#xff0c;常用…...

Win11终极IPX协议兼容方案:IPXWrapper完整配置与优化指南

Win11终极IPX协议兼容方案&#xff1a;IPXWrapper完整配置与优化指南 【免费下载链接】ipxwrapper 项目地址: https://gitcode.com/gh_mirrors/ip/ipxwrapper 在现代Windows 11系统上重温《星际争霸》、《魔兽争霸》、《暗黑破坏神2》等经典游戏时&#xff0c;你是否遇…...

[GDOUCTF 2023]<ez_ze> SSTI 绕过数字与大括号过滤的实战技巧

1. SSTI注入基础与ez_ze题目背景 SSTI&#xff08;Server-Side Template Injection&#xff09;服务器端模板注入是Web安全中常见的漏洞类型&#xff0c;它允许攻击者通过构造恶意模板表达式在服务器端执行任意代码。在CTF竞赛中&#xff0c;这类题目往往通过过滤关键字符来增加…...

告别繁琐配置:用快马AI一键生成企业级gstack项目脚手架,效率提升300%

最近在帮公司搭建一个内部任务管理后台&#xff0c;技术选型上我们决定采用gstack&#xff08;Next.js 14 TypeScript Tailwind CSS Prisma NextAuth&#xff09;。本以为是个简单的初始化工作&#xff0c;结果光是配置各种工具和依赖就花了大半天时间。直到发现了InsCode(…...

MPU9250 I²C驱动库深度解析与嵌入式工程实践

1. MPU9250 IC驱动库技术解析与工程实践指南 MPU9250是InvenSense&#xff08;现为TDK子公司&#xff09;推出的高性能9轴运动传感器&#xff0c;集成3轴陀螺仪、3轴加速度计和3轴磁力计&#xff0c;广泛应用于无人机姿态解算、可穿戴设备运动追踪、机器人SLAM前端感知等嵌入式…...