TIP:
- 在页面中,dom加载和css加载是异步的,内联的css是同步的。
- 页面中js加载和dom加载是同步的,但也不是绝对的
页面的生命周期:
DomContentLoaded:dom加载完毕,但是外部资源可能没有加载完毕,如样式表、图片等资源。
load:浏览器所有资源加载完毕
beforeunload/unload:用户离开页面时触发
一般写demo的时候,一般写的内容是:
window.onload=function(){}
可能会把我们初始化的资源都写在onload中,但是在正常项目中,这样写的效率不高。因为DomContentLoaded中已经加载完dom了,这个时候就可以直接操作dom了。
document.addEventListener("DOMContentLoaded",ready);
function ready(){
console.log('ready')
}
defer | 并行加载,页面渲染完之后再执行 | 对src引入的外部js有效,对内联的js有效 | 有多个带有async的js文件时,这几个执行文件的顺序不清楚 | 只有ie支持 |
async | 并行加载,加载完成后就立即执行 | 对src引入的外部js有效,对内联的js无效 | 当有多个带有defer的js文件时,会根据我们在页面中书写的顺序执行 |