您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JS 的6种加载方式

时间:2023-03-02 12:02:45  来源:今日头条  作者:前端餐厅

1. 正常模式

<script src="index.js"></script>

这种情况下 JS 会阻塞 dom 渲染,浏览器必须等待 index.js 加载和执行完成后才能去做其它事情

2. async 模式

<script async src="index.js"></script>

async 模式下,它的加载是异步的,JS 不会阻塞 DOM 的渲染,async 加载是无顺序的,当它加载结束,JS 会立即执行 使用场景:若该 JS 资源与 DOM 元素没有依赖关系,也不会产生其他资源所需要的数据时,可以使用async 模式,比如埋点统计

3. defer 模式

<script defer src="index.js"></script>
  • defer 模式下,JS 的加载也是异步的,defer 资源会在 DOMContentLoaded 执行之前,并且 defer 是有顺序的加载
  • 如果有多个设置了 defer 的 script 标签存在,则会按照引入的前后顺序执行,即便是后面的 script 资源先返回 所以 defer 可以用来控制 JS 文件的执行顺序,比如 element-ui.js 和 vue.js,因为 element-ui.js 依赖于 vue,所以必须先引入 vue.js,再引入 element-ui.js
<script defer src="vue.js"></script>
<script defer src="element-ui.js"></script>
复制代码

defer 使用场景:一般情况下都可以使用 defer,特别是需要控制资源加载顺序时

4. module 模式

<script type="module">import { a } from './a.js'</script>
复制代码

在主流的现代浏览器中,script 标签的属性可以加上 type="module",浏览器会对其内部的 import 引用发起 HTTP 请求,获取模块内容。这时 script 的行为会像是 defer 一样,在后台下载,并且等待 DOM 解析 Vite 就是利用浏览器支持原生的 es module 模块,开发时跳过打包的过程,提升编译效率

5. preload

<link rel="preload" as="script" href="index.js">

link 标签的 preload 属性:用于提前加载一些需要的依赖,这些资源会优先加载(如下图红框)

 

 

 

vue2 项目打包生成的 index.html 文件,会自动给首页所需要的资源,全部添加 preload,实现关键资源的提前加载

 

 

 

preload 特点:

  • preload 加载的资源是在浏览器渲染机制之前进行处理的,并且不会阻塞 onload 事件;
  • preload 加载的 JS 脚本其加载和执行的过程是分离的,即 preload 会预加载相应的脚本代码,待到需要时自行调用;

6. prefetch

<link rel="prefetch" as="script" href="index.js">

prefetch 是利用浏览器的空闲时间,加载页面将来可能用到的资源的一种机制;通常可以用于加载其他页面(非首页)所需要的资源,以便加快后续页面的打开速度

 

 

 

prefetch 特点:

  • pretch 加载的资源可以获取非当前页面所需要的资源,并且将其放入缓存至少5分钟(无论资源是否可以缓存)
  • 当页面跳转时,未完成的 prefetch 请求不会被中断

总结

  • async、defer 是 script 标签的专属属性,对于网页中的其他资源,可以通过 link 的 preload、prefetch 属性来预加载
  • 如今现代框架已经将 preload、prefetch 添加到打包流程中了,通过灵活的配置,去使用这些预加载功能,同时我们也可以审时度势地向 script 标签添加 async、defer 属性去处理资源,这样可以显著提升性能


Tags:JS   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
当我们在项目中使用 React 构建界面时,主要使用的就是 React 包。它提供了开发者需要的所有API。如React.Component、React.createElement、React.useState等等,所以它也是大...【详细内容】
2023-03-20  Tags: JS  点击:(7)  评论:(0)  加入收藏
本文是一份分步指南,涵盖了 Vue.js 测试基础知识,并为读者解释了如何测试基于 Vue.js 的网站和移动应用程序。“当 Vue 的用户数量达到一定数量时,它就变成了一个社区。突然间,...【详细内容】
2023-03-16  Tags: JS  点击:(13)  评论:(0)  加入收藏
大家好,我是前端西瓜哥。本文讲解如何使用浏览器提供的工具进行 JS 代码的断点调试。debugger在代码中需要打断点的地方,加上 debugger,表示一个断点。浏览器代码执行到该位置...【详细内容】
2023-03-07  Tags: JS  点击:(15)  评论:(0)  加入收藏
架构设计说明该篇文章,介绍并记录在大前端混合架构开发中的重要细节和流程。通过在安卓原生工程中集成两大主流混合框架React Native、Flutter,以及ReactJs[Vue],集成三类模块m...【详细内容】
2023-03-06  Tags: JS  点击:(11)  评论:(0)  加入收藏
内容管理系统 (「CMS」) 使没有强大技术背景的人也能够轻松发布内容。我们可以使用 「CMS」 来管理我们的内容和交付。市面上有不同类型的 「CMS」,它们执行不同的目的并具有...【详细内容】
2023-03-03  Tags: JS  点击:(25)  评论:(0)  加入收藏
本文为来自 字节跳动-国际化电商-S 项目团队 成员的文章,已授权 ELab 发布。一个 TCP 连接的案例​TCP 服务端​const net = require(&#39;net&#39;);const server = new net...【详细内容】
2023-03-03  Tags: JS  点击:(14)  评论:(0)  加入收藏
1. 正常模式<script src="index.js"></script>这种情况下 JS 会阻塞 dom 渲染,浏览器必须等待 index.js 加载和执行完成后才能去做其它事情2. async 模式<script async src="...【详细内容】
2023-03-02  Tags: JS  点击:(0)  评论:(0)  加入收藏
管理工具对于我们来说就非常的有必要,今天要介绍的这款工具从名字就能看出来它对于自己是多的自信,它就是 JSON Hero。对于前后端信息交互来说,目前 JSON 格式几乎成为了大家约...【详细内容】
2023-02-09  Tags: JS  点击:(32)  评论:(0)  加入收藏
当我们可以通过使用库轻松实现相同的结果时,为什么还要编写自定义功能?开开发人员最好的朋友和救星就是这些第三方库。我相信一个好的项目会利用一些可用的最佳库。 Vue.js 是...【详细内容】
2023-02-08  Tags: JS  点击:(35)  评论:(0)  加入收藏
第 1 步:创建您的初始node.js 应用程序并安装以下包,因为我们将在我们的项目中使用它npm i express,jsonwebtoken,passport,passport-google-oauth20,dotenv第 2 步:在 google...【详细内容】
2023-02-07  Tags: JS  点击:(39)  评论:(0)  加入收藏
▌简易百科推荐
每种语言都有其独特性,使用最广泛的编程语言 JavaScript 也不例外。 今天这篇文章将讨论一些 JavaScript 通用优化技巧,这些技巧将帮助您编写更好的代码,希望你能从今天这篇文...【详细内容】
2023-03-20  web前端开发  微信公众号  Tags:JavaScript   点击:(12)  评论:(0)  加入收藏
介绍TypeScript 是一种广泛使用的开源编程语言,非常适合现代化开发。借助它先进的类型系统,TypeScript 允许开发者编写更加强健、可维护和可扩展的代码。但是,要真正发挥 TypeS...【详细内容】
2023-03-16  大迁世界  微信公众号  Tags:TypeScript   点击:(15)  评论:(0)  加入收藏
Rspack是一个基于Rust的JavaScript捆绑器,其特点包括高性能、webpack互操作性、灵活配置等。Rspack由字节跳动的Web Infra团队开发,该团队负责字节跳动的产品(如TikTok、豆瓣、...【详细内容】
2023-03-14  爱吃加菲猫的千层面  今日头条  Tags:Rspack   点击:(15)  评论:(0)  加入收藏
在计算机编程中,框架是程序员构建软件的基础。类似的,JavaScript框架为程序员提供了方便的基础。它提供了一组预先编写的代码,这样程序员就不需要从头开始了。因此,他们可以将框...【详细内容】
2023-03-08  粤嵌教育    Tags:框架   点击:(18)  评论:(0)  加入收藏
本文为来自 字节跳动-国际化电商-S 项目团队 成员的文章,已授权 ELab 发布。一个 TCP 连接的案例​TCP 服务端​const net = require(&#39;net&#39;);const server = new net...【详细内容】
2023-03-03  ELab.yangjialong  ELab团队  Tags:Node.js   点击:(14)  评论:(0)  加入收藏
1. 正常模式<script src="index.js"></script>这种情况下 JS 会阻塞 dom 渲染,浏览器必须等待 index.js 加载和执行完成后才能去做其它事情2. async 模式<script async src="...【详细内容】
2023-03-02  前端餐厅  今日头条  Tags:JS   点击:(0)  评论:(0)  加入收藏
本文,将分享几种JS代码反调试技巧,目标是:实现防止他人调试、动态分析自己的代码。检测调试,方法一:用console.log检测代码:var c = new RegExp ("1");c.toString = function () {...【详细内容】
2023-02-24  river106  今日头条  Tags:JavaScript   点击:(13)  评论:(0)  加入收藏
Web实现在线预览PDF文件,可通过jQuery.media实现,首先引入jQuery和jQuery.media库:<script type="text/javascript" src="jquery.min.js"></script><script type="text/javascr...【详细内容】
2023-02-24  river106  今日头条  Tags:jQuery   点击:(35)  评论:(0)  加入收藏
JavaScript 是一种多功能且功能强大的编程语言,可用于前端和后端 Web 开发。无论你是一个完全的初学者还是已经有一些编程经验,这里有一个路线图可以帮助你轻松有效地学习 Jav...【详细内容】
2023-02-21  启辰8  今日头条  Tags:JavaScript   点击:(37)  评论:(0)  加入收藏
随着技术的日新月异,为开发人员提供了令人难以置信的新工具和API。但据了解,在100 多个 API中,只有5%被开发人员积极使用。让我们来看看一些有用的Web API,它们可以帮助您将网站...【详细内容】
2023-02-20  科技狠活与软件技术  51CTO  Tags:JavaScript   点击:(30)  评论:(0)  加入收藏
站内最新
站内热门
站内头条