当前位置：首页 > news >正文

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

news 2025/6/29 18:46:22

提速方法方向

延迟脚本加载

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

html <script src="your-script.js" async></script>

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

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

html <script src="your-script.js" defer></script>

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

对于 Vue.js，通常不需要在 <script> 标签上使用 async 或 defer 属性，因为 Vue.js 在加载和初始化时不会阻塞页面的加载和渲染。Vue.js 应用通常在页面加载完成后再初始化，这使得它们不会影响页面的呈现速度。

当浏览器遇到普通的 Vue.js <script> 标签时，它会按顺序下载并执行脚本。Vue.js 在脚本执行期间会注册组件、创建实例等，但这些操作通常不会阻塞页面其他内容的加载。

简而言之，对于 Vue.js 应用，不需要显式地使用 async 或 defer 属性。

CDN

内容分发网络（CDN）是一种用于提供高性能、可靠性和可扩展性的网络架构，旨在将内容（例如网页、图像、视频等）传递给最终用户。CDN 的主要目标是减少用户访问内容时的延迟，提高内容的可用性，并减轻源服务器的负载。

对于常见的库和框架（例如 jQuery、Vue.js、Bootstrap 等），您可以使用它们在 CDN 上托管的版本。这些资源通常已经在全球范围内进行了缓存，并能够更快地被用户加载。示例代码：

<!-- 使用外部托管的 jQuery --><script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script><!-- 使用外部托管的 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

雪碧图

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

懒加载

在 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 提供的一个工具，用于创建异步组件。

<template><div><!-- 按需加载 MyComponent 组件 --><MyComponent /></div>
</template><script>
import { defineAsyncComponent } from 'vue';// 创建异步组件const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue'));export default {components: {MyComponent,},
};
</script>

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

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