前端优化页面加载速度的方法（持续更新）

提速方法方向

延迟脚本加载

1. 使用 async 属性：
      在这种方法中，脚本将在下载完成后立即执行，而不会阻塞其他页面资源的加载和渲染。这适用于那些不依赖于其他脚本和页面内容的脚本，例如分析脚本等。示例如下：

html    

注意：由于脚本是异步加载的，它们可能不会按照它们在 HTML 中出现的顺序执行，因此需要谨慎处理脚本之间的依赖关系。

1. 使用 defer 属性：
      使用 defer 属性的脚本会在整个文档解析完毕后、DOMContentLoaded 事件之前执行。这使得它们不会阻塞 HTML 的解析，但会在文档解析完成后按顺序执行。适用于那些需要在文档完全加载后执行的脚本，例如操作 DOM 的脚本。

html    

使用这些属性时，要确保你的脚本不会依赖于页面中尚未加载的元素，否则可能会出现错误。根据脚本的性质和页面结构，选择适合的加载方式，以实现更好的性能和用户体验。

对于 Vue.js，通常不需要在     

雪碧图

将多个小图标合并成一个雪碧图，减少请求次数；但是制作雪碧图和使用都不轻松。

懒加载

在 Vue 3 中实现组件的懒加载可以通过使用动态导入（Dynamic Import）的方式来完成。这可以帮助你在需要的时候才加载特定的组件，从而提高应用程序的性能。

以下是在 Vue 3 中实现组件懒加载的步骤：

1. 首先，确保已经正确地设置了 Vue 3 的开发环境，并且项目中使用了 Vue Router（如果需要在路由中进行懒加载）。

2. 在需要懒加载的地方，使用动态导入来加载组件。例如，在路由配置中，可以这样做：

const Foo = () => import('./components/Foo.vue');
const Bar = () => import('./components/Bar.vue');

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  // ...
];

3. 在上面的例子中，`import('./components/Foo.vue')` 这样的语法会返回一个 Promise，这个 Promise 在组件加载完成后会被解析。Vue Router 会自动处理这些 Promise 并加载对应的组件。

4. 如果你需要在组件内部也进行懒加载，可以使用 `defineAsyncComponent` 函数。这个函数是 Vue 3 提供的一个工具，用于创建异步组件。

在上面的代码中，`defineAsyncComponent` 会返回一个异步组件，它在被渲染时才会动态加载 `MyComponent.vue`。

这些就是在 Vue 3 中实现组件懒加载的基本步骤。通过懒加载，可以在需要的时候按需加载组件，提高应用程序的性能和加载速度。

细节提速

border等不用0px

border:0和border:none比肯定是要更耗时的，border:0需要渲染border，而none不需要