首页 > 其他分享 >js延迟加载、js异步加载

js延迟加载、js异步加载

时间:2022-11-03 19:56:17浏览次数:56  
标签:脚本 异步 DOM js 文档 解析 加载

1.js延迟加载
(1)js延迟加载是js性能优化的一种方式
(2)作用:为了提高网页的加载速度
(3)原理:等网页加载完成之后再加载js文件
··需要优化的原因:HTML元素是按照其在页面中出现的次序调用的,如果需要使用JavaScript来操作DOM元素,
比如:获取DOM对象;修改DOM元素的结构
结果JavaScript加载在其需要操作的DOM元素之前,则会引起代码出错,原因是HTML结构没有加载完成,需要操作的DOM元素无法获取,得到的是空对象
(4)js延迟加载有6种方式:
1.defer属性(只支持IE,不建议使用)
2.async属性
··H5为<script>标签新添的属性,执行的原理是异步加载
··存在的问题:无法控制脚本的执行顺序;在load事件前执行;可能在DOMContentLoader事件触发前/后执行
··应用场景:当前页面的脚本之间彼此独立,且不依赖当前页面的其他脚本
3.动态创建DOM方法
4.使用jQuery的getScript方法、
··getScript()是通过HTTP GET请求 载入并执行js文件
··getScript(url,success(response,status))
·url:请求地址
·success:成功的回调函数;response:请求的数据结果;status:返回的状态码
5.setTimeout方法
6.让js文件最后加载

2.js异步加载、js同步加载
(1)js异步加载
··非阻塞加载,在浏览器下载并执行js文件的同时,继续对后续页面的处理
(2)js同步加载
··阻塞加载,直接将<script>放进<head>里,同步加载是安全的
··阻塞加载会阻止浏览器继续解析,直到当前的加载完成,为了优化页面阻塞,最常用的方法是将<script>放到body的结束标签前

3.DOMContentLoaded 和 load 的区别
(1)当HTML文档解析完成就会触发DOMContentLoaded,而当所有资源解析完成才会触发load事件
··存在defer / async 的情况:
·存在defer的情况:等DOM构建完成后执行脚本,而JavaScript脚本需要等待CSSOM解析完成才执行,
所以等DOM、CSSOM、脚本执行完成,DOMContentLoaded才会被触发
·存在async的情况:等HTML文档解析完,DOMContentLoaded就会被触发,不需要等脚本、CSSOM加载等等
(2)如何衡量一个网页的加载速度?
··当网页从空白到出现内容的时间,这个时间就是HTML文档加载、解析后,DOMContentLoaded事件被触发的过程

4.浏览器渲染的原理
(1)浏览器向服务器请求到了HTML文档,然后开始解析,生成DOM(文档对象模型),到这里为止,HTML文档被加载、解析完成,
如果有css则生成CSSOM(css对象模型),然后DOM和CSSOM生成渲染树,有了渲染树就知道了所有节点的样式,
然后根据节点和样式计算它们在浏览器的大小和位置,然后就是绘制到浏览器
(2)其中存在一个问题:JavaScript可以阻塞DOM的生成
··如果在HTML中插入一个脚本,浏览器是默认先执行脚本再继续往下解析HTML,而JavaScript是可以查询任意对象的样式,
所以需要CSSOM生成才可以执行JavaScript
··其中存在同步脚本和异步脚本的区别:
·同步脚本:停止解析,先执行脚本再继续往下解析
·异步脚本:H5中<script>定义了defer 和 async 属性
defer:在后台加载脚本,文档解析不中断,等文档解析完成再执行脚本;defer的执行顺序与编写位置有关
async:在后台加载脚本,文档解析不中断,等脚本加载完成则停止文档的解析,先执行脚本完成,再继续解析文档

标签:脚本,异步,DOM,js,文档,解析,加载
From: https://www.cnblogs.com/DEYI-L/p/16855634.html

相关文章

  • js数组操作——对象数组根据某个相同的字段分组
    先说点废话最近在实际业务中,需要编写一个方法根据数组中每一个对象的一个相同字段,来将该字段值相等的对象重新编入一个数组,返回一个嵌套的数组对象,特地来做个总结。当然......
  • JS防抖与节流
    1.概念上的区别防抖:多次执行只有最后一次生效,必要参数[handle,time]节流:一段时间内只能执行一次,必要参数[handle,time]2.实现一下防抖:1functiondebounce......
  • ThreeJS 创建水面报错 /textures/water/Water_1_M_Normal.jpg 404 解决方法
    threeJS创建水面报错 /textures/water/Water_1_M_Normal.jpg404根据路径找不到水面相关图片,原因是npm包中未包含图片,并且图片路径指向当前开发环境的src目录下,解决......
  • Next.js dynamic router All In One
    Next.jsdynamicrouterAllInOnedynamicroutesdemos单层动态路由/pages/post/[pid].jsimport{useRouter}from'next/router'constPost=()=>{co......
  • 居然有单个首字母混淆的JS加密
    老规矩,直接上加密的源代码functiong(A,B,C){varP=L;C(e[A[P(0x1db)]]);}functionh(A,B,C){varQ=L;if(A['key']==Q(0x1eb)&&A[Q(0x1ee)]......
  • vue.js中实现阻止事件冒泡
    当父子元素中都有点击事件的时候,为了让触发子元素中的事件时,不去触发父元素中的事件,可以在子元素事件中添加stop来阻止事件冒泡。 .stop是阻止冒泡行为,不让当前元素的事......
  • js中的闭包
    什么是闭包呢?严格来说要满足四个条件:1.有函数的嵌套2.内部函数引用外部作用域的变量参数3.返回值是函数4.创建一个对象函数,让其长期驻留1functionfa(){2......
  • js中的匿名函数
    什么是匿名函数?顾名思义,就是没有名字的函数例如:function(){console.log(123);}在vscode中会直接提示 Identifierexpected.错误。如果尝试输出的话,在浏览器也会......
  • Python json模块
    一、JSON介绍JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式,易于人阅读和编写。二、常用方法方法描述json.loads()将JSON字符串转化为Python......
  • app直播源代码,Extjs Grid自动换行
    app直播源代码,ExtjsGrid自动换行定义列的时候加个renderer,例 Js代码      {      header:'序号',      dataIndex:'ind',    ......