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

八股文 (一)


文章目录

  • 项目地址
  • 一、前端
    • 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) 什么是虚拟化列表,为什么要…...

在虚拟机里运行frida-server以实现对虚拟机目标软件的监测和修改参数(一)(android Google Api 35高版本版)

frida-server下载路径 我这里选择较高版本的frida-server-16.6.6-android-x86_64 以root身份启动adb 或 直接在android studio中打开 adb root 如果使用android studio打开的话,最好选择google api的虚拟机,默认以root模式开启 跳转到下载的frida-se…...

FLTK - FLTK1.4.1 - demo - animgifimage-play

文章目录 FLTK - FLTK1.4.1 - demo - animgifimage-play概述笔记END FLTK - FLTK1.4.1 - demo - animgifimage-play 概述 看的官方demo越多,在每个新demo中能看到的新增知识点越少。这是好事。 不可能一次将细节都记住,只要知道每个官方demo能干啥&…...

2024年除夕

多少年前的除夕,一如今天这样的除夕;多少年后的除夕,也一如多少年前的除夕。 无数个这样的除夕下午,我打开电脑,望着窗外安静的小区,车声渐渐稀疏的马路,想写下一些新的感受时,多少…...

如何实现滑动删除功能

文章目录 1 概念介绍2 使用方法3 示例代码 我们在上一章回中介绍了GestureDetector Widget相关的内容,本章回中将介绍Dismissible Widget.闲话休提,让我们一起Talk Flutter吧。 1 概念介绍 我们在这里介绍的Dismissible是一个事件响应Widget,它和GestureDetector类…...

golang通过AutoMigrate方法自动创建table详解

一.AutoMigrate介绍 1.介绍 在 Go 语言中,GORM支持Migration特性,支持根据Go Struct结构自动生成对应的表结构,使用 GORM ORM 库的 AutoMigrate 方法可以自动创建数据库表,确保数据库结构与定义的模型结构一致。AutoMigrate 方法非常方便&am…...

JAVA:利用 Content Negotiation 实现多样式响应格式的技术指南

1、简述 Content Negotiation(内容协商) 是 RESTful 服务的重要特性,允许客户端和服务器根据请求的不同特性动态选择适合的响应格式。它是一种在 HTTP 协议中实现的机制,通过它,服务器能够根据客户端需求返回适合的内…...

Python 函数魔法书:基础、范例、避坑、测验与项目实战

Python 函数魔法书:基础、范例、避坑、测验与项目实战 内容简介 本系列文章是为 Python3 学习者精心设计的一套全面、实用的学习指南,旨在帮助读者从基础入门到项目实战,全面提升编程能力。文章结构由 5 个版块组成,内容层层递进…...

OpenBMC:编译

1.安装依赖 OpenBMC是基于Yocto搭建的,基于不同的OS预先需要安装的依赖包和工具,清参考: 1 System Requirements — The Yocto Project 5.1.999 documentation 2.下载代码 OpenBMC的源码位于: openbmc/openbmc: OpenBMC Distri…...

Effective Objective-C 2.0 读书笔记—— objc_msgSend

Effective Objective-C 2.0 读书笔记—— objc_msgSend 文章目录 Effective Objective-C 2.0 读书笔记—— objc_msgSend引入——静态绑定和动态绑定OC之中动态绑定的实现方法签名方法列表 其他方法objc_msgSend_stretobjc_msgSend_fpretobjc_msgSendSuper 尾调用优化总结参考文…...

使用EVE-NG-锐捷实现OSPF

一、OSPF基础知识 Open shortest Path First(OSPF)开放式最短路径优先协议 1.OSPF的关系状态 (1)邻居关系(TWO-WAY) 只发送hello包不发送LSA包(链路状态通告包) (2)邻接关系(FULL) OSPF设备与设备之间相互建立OSPF关系,初始为邻居关系(TWO-WAY)状态&#xff0…...

电商系统-用户认证(三)基于公钥解析JWT令牌

一、 基于私钥生成jwt令牌 步骤: 导入认证服务 将shangcheng_user_auth工程导入到项目中去,如下图 启动eureka,再启动认证服务 3) 认证服务中创建测试类 public class CreateJwtTest { ​ /**** 创建令牌测试*/Testpublic voi…...

【论文投稿-第八届智能制造与自动化学术会议(IMA 2025)】HTML, CSS, JavaScript:三者的联系与区别

大会官网:www.icamima.org 目录 前言 一、HTML(超文本标记语言):网页的骨架 HTML 的作用: 例子: 总结: 二、CSS(层叠样式表):网页的外观设计 CSS 的…...

Baklib赋能下的内容中台智能化推荐系统解析与展望

内容概要 在数字化时代,内容中台的智能化推荐系统正逐渐成为各类企业提升用户体验与运营效率的重要工具。该系统通过集成和分析大量用户数据及内容信息,能够实现精准的个性化推荐,为用户提供最相关的内容。 以下是内容中台智能化推荐系统的…...

2024年记 | 凛冬将至

放弃幻想,准备斗争! 考研or就业? 上大学以来,考研上名校在我的心里一直是一颗种子,2024年初,当时的想法是考研和就业两手抓。买了张宇的高数现代,想要死磕! 也记了挺多笔记... 如果…...

虚幻基础08:组件接口

能帮到你的话,就给个赞吧 😘 文章目录 作用 作用 组件接口:可以直接调用对方的组件接口,而无需转换为actor。 实现对象间的通知。 A 通知 B 做什么。...

http3网站的设置(AI不会配,得人工配)

堡塔PHP项目中配置nginx1.26.0设置http3协议 # 文件所在服务器中的路径 /www/server/nginx/conf/nginx.confuser www www; worker_processes auto; error_log /www/wwwlogs/nginx_error.log crit; pid /www/server/nginx/logs/nginx.pid; worker_rlimit_nofile 512…...

数据分析系列--②RapidMiner导入数据和存储过程

一、下载数据 点击下载AssociationAnalysisData.xlsx数据集 二、导入数据 1. 在本地计算机中创建3个文件夹 2. 从本地选择.csv或.xlsx 三、界面说明 四、存储过程 将刚刚新建的过程存储到本地 Congratulations, you are done....

使用iis服务器模拟本地资源服务器unityaddressables热更新出错记录

editor中设置了using exculexing 模拟远程加载addressable可以实现资源热更新,build后的软件却没有成功。 iis服务器中mime中需要设置bundle的文件扩展名,时editor成功,build后失败 原因没有设置hash的扩展名,设置后editor和buil…...

Ubuntu x64下交叉编译ffmpeg、sdl2到目标架构为aarch64架构的系统(生成ffmpeg、ffprobe、ffplay)

一、编译SDL2-2.0.9 (1), ./configure --prefix/home/z/Desktop/sdl2 --enable-sharedyes --enable-nasmno --enable-audiono --enable-ossno --enable-alsano --enable-alsa-sharedno --enable-pulseaudiono --enable-pulseaudio-sharedno …...

进程通讯——类型和发展

进程常用交互方法如上...

深度学习:从基础到前沿

🔥个人主页🔥:孤寂大仙V 🌈收录专栏🌈:Linux 🌹往期回顾🌹:【Linux】进程地址空间与虚拟地址空间 🔖流水不争,争的是滔滔不 一、深度学习的基础知…...

Node.js与MySQL模块结合:打造安全高效的用户信息管理系统

摘要 本文探讨使用Node.js构建前端项目并导入MySQL模块创建数据库连接对象的方法。文中讲解了共享数据库连接对象,定义SQL语句查询和更新用户信息(排除密码字段以保护隐私),以及根据用户ID更新基本信息、重置密码和更新头像的具体…...

【项目】基于Qt开发的音乐播放软件

目录 项目介绍 项目概述 界面开发 界面分析 创建工程 主界面布局设计 窗口主框架设计 界面美化 主窗口设定 添加图片资源 head处理 播放控制区处理 自定义控件 BtForm 推荐页面 自定义CommonPage 自定义ListItemBox 自定义MusicSlider 自定义VolumeTool 音…...

C语言,无法正常释放char*的空间

问题描述 #include <stdio.h> #include <stdio.h>const int STRSIZR 10;int main() {char *str (char *)malloc(STRSIZR*sizeof(char));str "string";printf("%s\n", str);free(str); } 乍一看&#xff0c;这块代码没有什么问题。直接书写…...

Promise.race

Promise.race 是 JavaScript 中 Promise 对象的一个静态方法&#xff0c;用于将多个 Promise 实例包装成一个新的 Promise 实例。这个新的 Promise 实例会在 最先完成&#xff08;无论是 fulfilled 还是 rejected&#xff09; 的 Promise 完成时完成&#xff0c;并返回该 Promi…...

@RestControllerAdvice 的作用

系列博客目录 文章目录 系列博客目录1.ControllerAdvice 有什么用主要功能 2.与 RestControllerAdvice 的区别3.苍穹外卖中的使用4.RestControllerAdvice可以指定范围吗&#xff08;1&#xff09;指定应用到某些包中的 RestController&#xff08;2&#xff09;指定应用到具有特…...

信息学奥赛一本通 1390:食物链【NOI2001】| 洛谷 P2024 [NOI2001] 食物链

【题目链接】 ybt 1390&#xff1a;食物链【NOI2001】 洛谷 P2024 [NOI2001] 食物链 【题目考点】 1. 种类并查集 2. 带权并查集 【解题思路】 解法1&#xff1a;种类并查集 已知有三类动物A、B、C。A吃B&#xff0c;B吃C&#xff0c;C吃A。 对于B类动物来说&#xff0c…...

MATLAB中fetchOutputs函数用法

目录 语法 说明 示例 在后台运行函数 fetchOutputs函数的功能是从在后台运行的函数中检索结果。 语法 [Y1,...,Ym] fetchOutputs(F) [Y1,...,Ym] fetchOutputs(F,UniformOutputfalse) 说明 [Y1, ..., Ym] fetchOutputs(F) 从 Future 数组 F 中检索出 m 个结果。 F 中…...

数据可视化的图表

1.折线图反映了一段时间内事物连续的动态变化规律,适用于描述一个变量随另一个变量变化的趋势,通常用于绘制连续数据,适合数据点较多的情况。 2.散点图是以直角坐标系中各点的密集程度和变化趋势来表示两种现象间的相关关系&#xff0c;常用于显示和比较数值。当要在不考虑时间…...