script 标签中 defer 和 async 的区别?

简介: js

script 标签中 defer 和 async 的区别?

HTML渲染过程

1、渲染引擎在解析html的时候,遇到script是会暂停解析过程;
2、接着通过网络线程加载文件,完成后再切换js引擎执行代码;
3、然后再切换回渲染引擎继续解析html渲染页面。

所以首次渲染的时候如果并不依赖这个script,就会延长了页面的渲染时间,为了减少首次渲染的时间损耗,可以通过给script标签加三个属性来实现。
  • async:请求文件但不阻塞渲染引擎,文件加载完成再阻塞渲染引擎先执行完js;
  • defer:请求文件但不阻塞渲染引擎,等解析完html再执行js;
  • type="module":让浏览器按ES6标准将文件当成模板解析,效果和defer一样,也可以配合async在请求完成后立即执行

小结:

    defer 按顺序下载,DomContentLoad前执行,async 不按顺序下载,下载完就执行
目录
相关文章
|
前端开发 JavaScript API
React 之 Suspense
React 之 Suspense
653 0
|
Web App开发 前端开发 JavaScript
React 之 requestIdleCallback 来了解一下
React 之 requestIdleCallback 来了解一下
1908 0
|
前端开发 API UED
React 懒加载图片 Lazy Image
懒加载是一种优化技术,通过延迟加载不在视口内的图片,减少初始页面加载时间,提升用户体验。本文从基础概念入手,逐步探讨 React 中实现图片懒加载的常见问题、易错点及解决方案,并通过代码案例详细解释。
745 3
|
SQL NoSQL Unix
MongoDB聚合操作总结
这篇文章总结了MongoDB中聚合操作的作用、方法、常见聚合表达式以及聚合管道的概念和常用操作符,以及SQL与MongoDB聚合操作的对应关系。
1419 2
MongoDB聚合操作总结
|
存储 缓存 资源调度
你真的知道 NPM、Yarn 与 PNPM 这三个前端包管理器之间的区别吗?
【6月更文挑战第9天】NPM、Yarn和PNPM是主流前端包管理器,各有特色。NPM生态庞大,易用但速度慢;Yarn速度快,依赖管理稳定;PNPM性能优异,节省磁盘空间。Yarn和PNPM在速度和确定性上胜出,NPM因广泛使用和丰富资源领先。开发者可根据项目需求和喜好选择,三者共同推动前端开发进步。
744 8
|
JavaScript 前端开发 搜索推荐
Vue 的服务器端渲染(SSR)和客户端渲染(CSR)在渲染过程、性能、用户体验等方面都存在显著的区别
【5月更文挑战第8天】Vue 的 SSR 和 CSR 在渲染上有明显差异。SSR 服务器端生成 HTML 返回给浏览器,提供更快首屏加载和更好的 SEO,但增加服务器负担。CSR 客户端渲染,首次加载可能较慢,但交互更流畅,开发更简单。两者各有优劣,需根据项目需求权衡选择。
441 2
|
API
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
4810 0
|
前端开发 JavaScript
使用 JavaScript 获取 URL 参数的详细指南
【2月更文挑战第26天】
16519 2
使用 JavaScript 获取 URL 参数的详细指南