性能优化：首屏加载速度的优化
1：网络
当我们网络请求较多时，大量未完成的请求会阻塞渲染线程，导致首屏渲染速度下降
减少网络请求
比如使用图片懒加载，只发送用户视口可见的数据请求，这样可以大大提高请求速度，从而提高渲染速度。
使用缓存
与后端配合进行资源缓存，如长期不变的 logo 或者定量更新的资源可以采用缓存的形式来处理，这样也可以优化首屏渲染时间
使用 CDN 进行 加速
对资源进行托管，保证服务器的响应速度
2：加载资源方面
路由懒加载
使用路由懒加载的形式，进行资源处理，当我们需要用到该资源时再进行资源加载，这样可以将大量的加载时间空出来留给首屏渲染。
script 标签资源异步加载
当一些不影响系统环境的资源加载时，我们可以考虑使用 async 和 defer 加载
<script defer async></script>
webpack splitChunks 代码分割
利用 webpack 代码分割进行优化，可以将 js 进行分片，减少首次加载文件体积，以及资源异步加载
css 压缩、js 压缩、html 压缩、image 压缩、gzip 压缩
css 可以通过 minicssExtracPlugin 进行 css 压缩
js 可以通过 TerserWebpackPlugin | uglifyJsPlugin 进行资源压缩
html 可以通过 HtmlMinimizerWebpackPlugin 进行压缩
图片可以通过 ImageMinimizerWebpackPlugin 进行压缩
css 样式书写规范
css 代码 写得好更有利于 浏览器的解析，有人说 transform3d 能够硬件加速，我不这么认为，因为开启一个 transform3d 相当于是在网页上多开了一个图层，当你的图层达到一定数量的时候，性能不一定比普通的 transform translate 好
服务端渲染提高首屏
服务端渲染，后台将你需要绘制的页面结构以及数据全局准备好了，然后直接将 资源文件返回给前端，前端只需要渲染即可。
用户体验方面
-
增加骨架屏
-
增加loading动画效果
还可以通过前置和简化模块来优化网页加载速度，这里我们主要关注两个方面：资源的提前加载和模块的简化。
- 前置关键资源
-
关键CSS：将关键的CSS样式直接嵌入到HTML中，以避免阻塞渲染。通过内联关键CSS，可以确保在解析和渲染HTML时，关键样式已经可用。这样，页面的渲染速度会更快，用户会更早地看到内容。
-
字体预加载：如果网页使用了自定义字体，可以通过预加载字体文件来减少字体渲染的延迟。通过使用 标签，将字体文件提前加载，使其在需要时立即可用。
-
重要JavaScript文件的异步加载
将非关键的JavaScript文件标记为异步加载，以避免阻塞页面的渲染。只加载和执行必需的JavaScript代码，而将其他代码延迟到后续阶段加载。 -
缓存关键资源：通过适当设置缓存头部响应，将关键资源缓存到用户的浏览器中。这样，用户在后续访问网站时可以直接使用缓存的资源，减少网络请求的数量和响应时间。
- 简化模块
-
代码分割：将代码分割成较小的模块（chunks），按需加载。通过将页面的不同部分拆分为独立的模块，可以仅在需要时加载这些模块，而不是一次性加载整个应用程序的代码。这样可以减少首屏加载时需要下载的代码量，加快页面的加载速度。
-
按需加载：延迟加载非关键的模块或组件，只在用户需要时进行加载。例如，将某些交互性较低的模块或组件延迟加载，以减少初始加载时的资源消耗。
-
优化第三方库和插件：检查使用的第三方库和插件，确保只加载和使用必需的部分。有时候，第三方库可能包含大量不必要的功能和代码，可以通过按需导入或选择性地加载来减少文件大小和加载时间。
-
压缩和缩减文件大小：通过压缩和缩减文件大小来减少模块和资源的加载时间。可以使用工具如Webpack或Parcel来进行代码压缩、文件合并和优化。
通过前置关键资源和简化模块，可以减少首屏加载所需的资源量和时间，从而提高网页的加载速度。这些优化技术可根据具体的项目需求和场景进行调整和应用，以实现最佳的性能和用户体验。