首页 > 其他分享 >JS加载

JS加载

时间:2024-09-13 20:25:57浏览次数:1  
标签:body defer 页面 JS 解析 加载

同步加载

  • 阻塞模式,提高安全性
    过多JS加载会影响页面效率
    默认情况下,JS是同步加载,及优先加载外部JS,只有当JS文件加载完成,don和css才开始加载
<script src = 'index.js' ></script>

异步加载

  • 非阻塞加载
    • 动态创建script
    • defer 延迟加载JS,等到HTML的DOM完全解析之后
    • async HTML的文档解析和脚本的获取同时进行
<script src = 'index.js' defer></script> -defer
<script src = 'index.js' async></script> -async

理解优化

  1. 浏览器解析html的DOM是从上到下的,JS默认为同步加载
  2. 先被解析head的JS资源, 在body没有解析完之前会被绑定监听

即:head的JS资源在页面加载前,body的JS资源在页面加载后逐一获取JS
如:JS替换页面全局变量时, 需要将JS在body获取, 或者在head进行defer
PS:网页播放器一般放在body最底部,网页播放器与内容相干甚少,直接按需求defer/async

标签:body,defer,页面,JS,解析,加载
From: https://www.cnblogs.com/nagisb/p/18412822

相关文章

  • 『功能项目』项目优化 - 框架加载资源【41】
    我们打开上一篇40播放动画时禁止点击移动的项目,本章要做的事情是搭建一个资源加载框架,让UI界面,人物模型以及场景都存放在资源文件夹中在运行时加载出来首先在资源商店加载资源将怪物模型放置场景中将普通管线模型切换成URP重命名为Boss01放在资源文件夹里新建Boss01......
  • 面试-JS基础知识-作用域和闭包
    问题this的不同应用场景手写bind函数实际开发中闭包的应用场景,举例说明创建10个<a>标签,点击的时候弹出来对应的序号作用域:某个变量的合法使用范围全局函数块级**自由变量上面图的最里面的红框————aa1a2都是自由变量,因为都没有被定义。会一层一层往上找。......
  • 解决 Node.js 项目中的 Yarn 安装错误
    在开发Node.js项目时,我们经常需要依赖于各种包来增强项目功能。Yarn是一个流行的包管理工具,由Facebook推出,旨在提供更快、更安全、更可靠的依赖管理。然而,如果你在尝试运行项目时遇到了关于Yarn未安装的错误,这可能会阻碍你的开发流程。本文将指导你如何通过简单的步......
  • UMIJS3剖析
    UMIJS3剖析约定式路由umijs是可扩展的企业级前端应用框架。Umi以路由为基础的,并以此进行功能扩展。然后配以生命周期完善的插件体系,支持各种功能扩展和业务需求约定式路由umi初始化项目mkdirhs-umi3npminit-ycnpmiumi-D运行项目pages\index.jssrc\pages\in......
  • UmiJS3基础
    UmiJS3基础https://umijs.org/UmiJSUmiJS是一个类Next.JS的react开发框架。他基于一个约定,即pages目录下的文件即路由,而文件则导出react组件然后打通从源码到产物的每个阶段,并配以完善的插件体系,让我们能把umi的产物部署到各种场景里。安装umi源码create......
  • ThreeJS Shader的效果样例光影墙、扩散面(四)
    一、实现一个光影墙1. 根据自定义坐标点,输出一个光影墙/***添加光影墙*/functionaddLightWall(){constgeometry=newTHREE.BufferGeometry();constvertices=newFloat32Array([5,0,2,3,0,5,-2,0,5,-4,0,2,-4,......
  • 2024Mysql And Redis基础与进阶操作系列(7)作者——LJS[含MySQL 聚合、数学、字符创、日
    目录MySQL函数1.聚合函数 格式补充 示例将所有员工的名字合并成一行指定分隔符合并指定排序方式和分隔符2.数学函数(即用即查,重在融会贯通与运用)3.字符串函数(即用即查,重在融会贯通与运用)4.日期函数(即用即查,重在融会贯通与运用)5.控制流函数(即用即查,重在融会贯通与运用)if逻辑判......
  • 2024Mysql And Redis基础与进阶操作系列(1)作者——LJS[含MySQL的下载、安装、配置详解
    目录1.数据库与数据库管理系统1.1数据库的相关概念1.2数据库与数据库管理系统的关系 1.3 常见的数据库简介Oracle1. 核心功能2. 架构和组件3. 数据存储和管理4. 高可用性和性能优化5. 安全性6. 版本和产品7. 工具和接口 SQLServer1. 核心功能2. 架构和组件3. 数据......
  • JS中的 解构、可扩展运算符(...)
    一、解构([x,x,x]=[1,2,3])解构,英文名叫Destructuring。核心就是[A,B,C]=[1,2,3]这种形式。其核心思想就是把数组/对象的每个元素解构出来。虽然这话说的很抽象,但举个例子你就明白了。1.1数组解构const[a,b,c]=[1,2,3]console.log(a)//1console.log(b)/......
  • 基于Node.js+vue职位智能匹配系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展和互联网应用的普及,人才招聘市场迎来了前所未有的变革。传统的人才招聘方式往往效率低下,信息不对称,导致求职者难以快速找到合适的工......