前端--性能优化【上篇】--网络优化与页面渲染优化

一、网络优化

1、DNS预解析

link标签的rel属性设置dns-prefetch，提前获取域名对应的IP地址

2、CDN（网络分发系统）

用户与服务器的物理距离对响应时间也有影响。

内容分发网络（CDN）是一组分散在不同地理位置的 web 服务器，用来给用户更高效地发送内容。典型地，选择用来发送内容的服务器是基于网络距离的衡量标准的。

3、html离线缓存

优点：提高页面加载速度和用户体验
在启用HTML 离线缓存后，浏览器会始终从缓存中读取文件，因此每次更新页面时，需要更新描述文件中的版本号以确保浏览器能够获取新的文件内容

4、强协商缓存

浏览器内部保存有url的相关信息，在网络层面上会减轻服务器的压力，快速得到数据，解析到IP地址

5、多域名

浏览器内部都有票对同域名限制并发下载数

6、避免图片src为空

假如src为空的话，浏览器仍会发起一次HTTP请求，白白加载一次资源，导致加载时间变长，影响首屏加载时间

二、页面渲染优化

1、时间切片

用于页面渲染和任务处理的技术，旨在提高应用程序的响应性和用户体验。它将长时间运行的任务分解成小的时间片段，这些任务在多个帧之间分散执行，以确保主线程不会长时间被阻塞，从而保持页面的流畅性

使用浏览器的

requestIdleCallback

API或第三方库（如React的

react-suspense

）来实现。它允许开发人员将任务分解为小块，并在空闲时间执行，以避免主线程被占用。

时间切片常用于：

• 大规模数据的渲染
• 复杂的计算或数据处理
• 异步请求的处理
• 动画和交互的流畅性维护

可以解决以下四种问题：

1. 降低主线程压力：长时间运行的任务，如大型计算或复杂的数据处理，会占用主线程，导致页面失去响应性。
2. 提高用户体验：通过将任务拆分成小块，时间切片可以确保用户界面在执行任务的同时保持流畅，不会出现卡顿或阻塞。
3. 优化任务并发：时间切片可以更好地管理并发任务，确保任务不会相互干扰。
4. 降低电池消耗：通过将任务分散到多个时间片段，时间切片可以减少CPU的使用，延长移动设备的电池寿命。

2、虚拟列表

虚拟列表通常运行在前端的UI层，主要用于提高前端渲染性能。虚拟滚动技术只渲染可见区域内的数据，而不是全部数据，从而提高性能。这可以通过使用虚拟滚动库

（如

react-window

、

vue-virtual-scroller

）来实现

些库会在前端应用的UI层处理数据的显示，通过动态渲染DOM元素来提高性能。

3、分页+异步

分页异步加载通常涉及到前端应用与后端服务器之间的通信。在这种情况下，前端应用通常会发出分页请求，然后后端服务器根据请求来提供相应的数据页。这种分页请求通常是异步的，通常使用AJAX、Fetch或类似的机制。分页异步加载会涉及到前端应用的业务逻辑层，以便发送请求和处理响应。前端应用通常会将从服务器获取的数据渲染到虚拟列表或其他UI组件中。

在请求头中添加page字段，来向后端获取具体需要的页码内容

虚拟列表通常在前端的UI层运行，用于提高前端渲染性能，而分页异步加载涉及前端应用的业务逻辑层和与后端服务器的通信，用于获取分页数据。两者可以结合使用，以在前端显示大量数据并实现分页加载。