性能优化：首屏加载速度的优化

当我们网络请求较多时，大量未完成的请求会阻塞渲染线程，导致首屏渲染速度下降

比如使用图片懒加载，只发送用户视口可见的数据请求，这样可以大大提高请求速度，从而提高渲染速度。

与后端配合进行资源缓存，如长期不变的 logo 或者定量更新的资源可以采用缓存的形式来处理，这样也可以优化首屏渲染时间

对资源进行托管，保证服务器的响应速度

使用路由懒加载的形式，进行资源处理，当我们需要用到该资源时再进行资源加载，这样可以将大量的加载时间空出来留给首屏渲染。

当一些不影响系统环境的资源加载时，我们可以考虑使用 async 和 defer 加载

xml 复制代码

<script defer async></script>

利用 webpack 代码分割进行优化，可以将 js 进行分片，减少首次加载文件体积，以及资源异步加载

css 可以通过 minicssExtracPlugin 进行 css 压缩

js 可以通过 TerserWebpackPlugin | uglifyJsPlugin 进行资源压缩

html 可以通过 HtmlMinimizerWebpackPlugin 进行压缩

图片可以通过 ImageMinimizerWebpackPlugin 进行压缩

css 代码写得好更有利于浏览器的解析，有人说 transform3d 能够硬件加速，我不这么认为，因为开启一个 transform3d 相当于是在网页上多开了一个图层，当你的图层达到一定数量的时候，性能不一定比普通的 transform translate 好

服务端渲染，后台将你需要绘制的页面结构以及数据全局准备好了，然后直接将资源文件返回给前端，前端只需要渲染即可。

还可以通过前置和简化模块来优化网页加载速度，这里我们主要关注两个方面：资源的提前加载和模块的简化。

关键CSS：将关键的CSS样式直接嵌入到HTML中，以避免阻塞渲染。通过内联关键CSS，可以确保在解析和渲染HTML时，关键样式已经可用。这样，页面的渲染速度会更快，用户会更早地看到内容。
字体预加载：如果网页使用了自定义字体，可以通过预加载字体文件来减少字体渲染的延迟。通过使用标签，将字体文件提前加载，使其在需要时立即可用。
重要JavaScript文件的异步加载

将非关键的JavaScript文件标记为异步加载，以避免阻塞页面的渲染。只加载和执行必需的JavaScript代码，而将其他代码延迟到后续阶段加载。
缓存关键资源：通过适当设置缓存头部响应，将关键资源缓存到用户的浏览器中。这样，用户在后续访问网站时可以直接使用缓存的资源，减少网络请求的数量和响应时间。

代码分割：将代码分割成较小的模块（chunks），按需加载。通过将页面的不同部分拆分为独立的模块，可以仅在需要时加载这些模块，而不是一次性加载整个应用程序的代码。这样可以减少首屏加载时需要下载的代码量，加快页面的加载速度。
按需加载：延迟加载非关键的模块或组件，只在用户需要时进行加载。例如，将某些交互性较低的模块或组件延迟加载，以减少初始加载时的资源消耗。
优化第三方库和插件：检查使用的第三方库和插件，确保只加载和使用必需的部分。有时候，第三方库可能包含大量不必要的功能和代码，可以通过按需导入或选择性地加载来减少文件大小和加载时间。
压缩和缩减文件大小：通过压缩和缩减文件大小来减少模块和资源的加载时间。可以使用工具如Webpack或Parcel来进行代码压缩、文件合并和优化。

通过前置关键资源和简化模块，可以减少首屏加载所需的资源量和时间，从而提高网页的加载速度。这些优化技术可根据具体的项目需求和场景进行调整和应用，以实现最佳的性能和用户体验。