。

这适用于那些不依赖于其他脚本和页面内容的脚本#xff0c;例如分析脚本等。

示例如下#xff1a;

html

在这种方法中脚本将在下载完成后立即执行而不会阻塞其他页面资源的加载和渲染。

这适用于那些不依赖于其他脚本和页面内容的脚本例如分析脚本等。

示例如下

html

属性的脚本会在整个文档解析完毕后、DOMContentLoaded

HTML

的解析但会在文档解析完成后按顺序执行。

适用于那些需要在文档完全加载后执行的脚本例如操作

DOM

使用这些属性时要确保你的脚本不会依赖于页面中尚未加载的元素否则可能会出现错误。

根据脚本的性质和页面结构选择适合的加载方式以实现更好的性能和用户体验。

script

应用通常在页面加载完成后再初始化这使得它们不会影响页面的呈现速度。

Vue.js

在脚本执行期间会注册组件、创建实例等但这些操作通常不会阻塞页面其他内容的加载。

简而言之对于

内容分发网络CDN是一种用于提供高性能、可靠性和可扩展性的网络架构旨在将内容例如网页、图像、视频等传递给最终用户。

CDN

的主要目标是减少用户访问内容时的延迟提高内容的可用性并减轻源服务器的负载。

CDN

上托管的版本。

这些资源通常已经在全球范围内进行了缓存并能够更快地被用户加载。

示例代码

​!--

srchttps://cdn.jsdelivr.net/npm/jquery3.6.0/dist/jquery.min.js/script!--

Vue.js

srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script

雪碧图

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

懒加载

Import的方式来完成。

这可以帮助你在需要的时候才加载特定的组件从而提高应用程序的性能。

Vue

在需要懒加载的地方使用动态导入来加载组件。

例如在路由配置中可以这样做

const

import(./components/Bar.vue);const

routes

在上面的例子中import(./components/Foo.vue)

Promise这个

import(./MyComponent.vue));export

default

中实现组件懒加载的基本步骤。

通过懒加载可以在需要的时候按需加载组件提高应用程序的性能和加载速度。

细节提速

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