js延迟加载、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：在后台加载脚本，文档解析不中断，等脚本加载完成则停止文档的解析，先执行脚本完成，再继续解析文档
js延迟加载、js异步加载的更多相关文章
- 如何使用 require.js ，实现js文件的异步加载，避免网页失去响应，管理模块之间的依赖性，便于代码的编写和维护。
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
- 延迟加载、异步加载js
defer为true:延迟加载脚本,在文档完成解析完成开始执行,并且在DOMContentLoaded事件之前执行完成. async(HTML5新增的属性)为true:异步加载脚本,下载完毕后再执行, ...
- iScroll.js 向上滑动异步加载数据回弹问题
iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ ...
- js回调与异步加载的用法
以前还是菜鸟的时候(虽然现在依然很菜 -_-|| )对异步加载与回调函数的技术无比向往,但也一直没有使用过,这次因为页面逻辑太过复杂,一堆请求逻辑,如果还是用顺序请求,页面的速度... 领导又要挠头了 ...
- 新手教程：不写JS，在MIP页中实现异步加载数据
从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...
- Vue.js 子组件的异步加载及其生命周期控制
前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...
- js文件 与 css文件 异步加载
使用lazyload 异步加载css js 文件. 提升页面初始化的速度,减少卡顿时间 , 下面是 使用方法 与 lazyload.js 源码 (中文注释) 调用方法后. 会追加到 head 标签末尾 ...
- require.js模块化管理和加载js（按需加载）简单实例教学
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
- Javascript 异步加载详解(转)
本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...
- Javascript 异步加载详解
Javascript 异步加载详解 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy ...
随机推荐
- 洛谷P4802 [CCO 2015]路短最
题目 https://www.luogu.com.cn/problem/P4802 思路 数据范围 \(n\leq 18\),义眼丁真,鉴定为状压. 好,那我们来思考一下状态的构建.其实是很套路的东西 ...
- /etc/login.defs 创建用户的默认设置文件
/etc/login.defs 文件用于在创建用户时,对用户的一些基本属性做默认设置,例如指定用户 UID 和 GID 的范围,用户的过期时间,密码的最大长度,等等.需要注意的是,该文件的用户默认配置 ...
- js 操作（数字前端去0、文字去除空格、截取字符串、保留几位小数、数字不足位数前补0）
1.数字前端去0 var num = number.replace(/\b(0+)/gi,"") 2.文字去除空格 var str = str.replace(/(^\s*)|(\ ...
- Screw数据库文档生成神器
引入依赖 <dependency> <groupId>cn.smallbun.screw</groupId> <artifactId>screw-cor ...
- HTTP相关知识学习
五层网络模型 应用层 包括HTTP,FTP... HTTP支持客户/服务器模式 简单快速有getpost方法 灵活,可以传输任意类型 无连接,每次连接只处理一个请求,收到应答就关闭 无状态,对于事物处 ...
- 【Java】生成随机字符串
package com.runsky.utils; import java.util.Random; public class GetRandom { private static final Str ...
- POJ 1830 开关问题 异或高斯消元
题目链接 将题目转化为矩乘问题 构建一个 \(n \times n\) 的开关信息矩阵,其中第 \(i\) 列第 \(j\) 行的元素为 \(0 / 1\) 代表在改变开关 \(i\) 的情况下开关 ...
- 什么是Entity Framework(ORM)
高手掠过,仅仅是查漏补缺 Entity Framework是什么: 1,ADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapp ...
- Flink akka AskTimeoutException问题排查
最近遇到一个很奇怪的问题,Flink任务正常启动正常运行一段时间后就会报错,,错误详情如下 2019-12-11 17:20:57.757 flink [flink-scheduler-1] ERRO ...
- A - Add Odd or Subtract Even
A - Add Odd or Subtract Even 思路:其实认真观察就能发现,这个与输入的书有关系,且答案为0,1,2.先看相同,不用加减,为0,再看前小后大,因为加奇数减偶数,如果,相差奇数 ...