Script中defer和async分析

defer和async

1. <script src="script.js"></script>
   没有defer或async,浏览器遇到该标签会立即读取并执行该script标签.

2. <script defer src="script.js"></script>
   defer,解析html的过程中,遇到script标签,读取下载它,同时,html的解析仍在进行,当所有html元素解析完成之后,最后执行js.

3. <script defer src="script.js"></script>
   async,解析html过程中,异步读取script.js,读取完script文件后立即执行js,之后再解析后续html

使用async和defer后.执行js,会暂停dom的解析.读取js不会.

1. defer和async在读取时相对于html的解析都是异步的

2. defer是html解析完毕之后执行

3. defer按照加载顺序执行脚本

4. async乱序的,加载完就执行,谁先加载完就先执行(js代码)

DOM文档加载步骤

1. 解析html结构

2. 加载外部脚本和样式表

3. 解析并执行脚本代码

4. DOM树构建完成 //(ready— DOMContentLoaded )

5. 加载html和css中引用的外部资源文件

6. 页面加载完成(load)

   对页面的优化是css文件越早加载越好,js文件越完越好,在body底部上.

   • DOM树构建完成

  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

  for(var i=0; i<1000000000; i++){} 
  // 这个同步脚本将延迟DOM的解析。
  // 所以DOMContentLoaded事件稍后将启动。

  //这里的DOMContentLoaded和jqeruy的$(document).ready()效果一样

jquery中$(document).ready()与window.onload的区别

执行时间不同

1. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

2. window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

编写个数不同

1. $(document).ready()可以同时编写多个,并且都可以得到执行

2. window.onload不能同时编写多个,如果有多个window.onload方法,只会执行最后一个

简化写法

1. window.onload没有简化写法

2. $(document).ready(function(){})可以简写成$(function(){});

window.onload的jquery写法是$(window).load(function(){…})