❬前端❭ 优化实战（性能、安全、架构、算法、面试）

架构设计文档 1.架构概览 本项目提供高性能的地图渲染和数据可视化能力，旨在简化地理信息可视化的开发流程。本架构设计专注于高性能、流畅交互和强大的可视化能力，帮助开发者更高效地实现地理信息展示与分析。

无论是前端还是后端开发，JavaScript 都被广泛应用。作为一名优秀的开发者，深入了解 JavaScript 的垃圾回收机制至关重要，这不仅能提高代码性能，还能有效避免内存泄漏，从而显著提升应用的

指数退避算法是一种在网络通信中常用的重试策略。它主要用于解决网络传输中的拥塞问题，通过动态调整重试时间间隔，有效地减少了网络重试带来的负荷和冲突 指数退避算法 算法原理 每次重试失败后，将重试延迟时间

使用标准的 MVT 瓦片服务作为数据源，通过创建矢量瓦片图层，实现地图百万数据高效可视化渲染。这样浏览器既不会卡死，也不会在拖动地图的时候出现卡顿 瓦片服务将根据提供的 z、x 和 y 参数来提供相应

随着前端技术发展的强大，越来越复杂的交互和业务都可以由前端来实现，那么前端就需要面对越来越庞大的数据体。对于这些不变的庞大数据体，就需要通过 IndexDB 来进行存储，从而提升页面渲染速度，减轻服务

使用标准的 MVT 瓦片服务作为数据源，通过高德的 AMap.MapboxVectorTileLayer 插件创建矢量瓦片图层，实现千百万数据秒级上图，这样浏览器不会卡死，地图拖动也不会卡顿 矢量切片

客户反馈无法同时下载 30 个短视频文件的 Zip 压缩包到本地，经排查发现下载文件的总大小超过了 2G，不仅在文件的下载过程中造成了浏览器的卡顿，还在压缩文件时出现缓存区错误 对下载文件的异步任务限

由于业务需要，用户要通过移动端上传图片，并且前端要对上传图片进行压缩，然后再上传到服务器，这样可以 减少移动端上行流量，减少用户上传等待时长，优化用户体验

包管理工具 npm 和 yarn 都是很优秀的，但也存在一些潜在的问题。当相互依赖包的数量达到一定的量级时，不仅会占用大量的磁盘空间，还会大大影响包的拉取速度。 所以需要更优秀的 pnpm 包管理工具

在开发公共包的时候，每次修改包内容后都需要发包，然后运行项目安装最新公共包来进行调试和测试。 鉴于这种方式过于繁琐且不方便，可以使用 npm link 创建 软链接 来提升开发效率 软链接概览 软链接

在实际的开发中，经常需要基于不同的技术栈去写重复的功能，不仅影响开发效率还增加后期的维护成本 理想方案：只需编写且维护一套代码，就可以同时运行在各类前端技术栈中

继承性 是 CSS 非常重要的一个特性，如果一个属性具备继承性，那么在该元素上设置后，它的后代元素都可以继承这个属性 如果后代元素自己有设置该属性，那么优先使用后代元素自己的属性，不管继承过来的属性权

CSS 盒子模型 是视觉设计中被经常用到的一种思维模型，其由实际内容、内边距、边框、外边框四个部分组成

使用纯 CSS 属性来替代 JS 实现一些复杂的视觉效果，相比 JS 而言，CSS 使用起来简单方便，也不需要考虑加载的问题。现今的 CSS 不断的强大，可以代替实现很多之前 JS 实现的功能，且在性

在开发 web 应用时，发现 windows 系统经常推荐用户使用 125% 或 150% 的缩放比例，这样会导致视图页面也被进行缩放，从而严重影响用户体验 适配方案 方案思路 缩放比例发生变化后，视

数字格式化在日常开发中是特别普遍的需求。即在特定的业务场景对服务端响应数据中的数字进行一定的格式化处理，以增强其阅读性

获取到文件对象后，由于业务需要，通常需要对文件进行一系列的操作。根据文件大小的不同，会引发各种性能相关的问题，为了提升用户体验和响应速度，针对不同的问题来制定相对应的优化方案

设计场景 视图中包含多个大区块，每个区块都占据了整个视口的宽度，区块的背景也各不相同 内容是定宽的，即使在不同的分辨率下的宽度不一样，那也是通过媒体查询来改变的这个固定的宽度值；在某些情况下，不同区块

RESTful API 是一种 API 设计规范，规定了如何编写数据接口以及报文的格式、状态码等信息

响应式页面为了适应不同的终端设备而产生，体验较好，可以自动识别屏幕宽度以改变布局形式。但 不是所有的应用都适合做成响应式 对于一些大型复杂的应用，使用 移动端H5页面 和 PC端应用 协同使用，可以提