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异步加载

最新文章

热门文章