题目

1. 从输入url到渲染出整个页面的过程参考
2. window.onload 和 DOMContentLoaded 的区别参考

知识点

1. 加载资源的形式

• html代码
• 媒体文件，图片、视频等
• js，css

2. 加载资源的过程

• DNS 解析：域名 -> IP地址
• 浏览器根据 IP 地址向服务器发起 http 请求
• 服务器处理请求并返回给浏览器

3. 渲染页面的过程

• 根据 html 代码生成 dom 树

• 根据 css 代码生成 css dom

• 将 dom 树和 css dom 整合形成 render 树

• 根据 render 树渲染页面

• 遇到 <scrip> 则暂停渲染，优先加载并执行js代码，完成再继续

• 直至 render 树渲染完成

• 建议把css放在head中，使 dom 树和 css 树一起形成 render 树

• 建议把js放在body最后，避免页面渲染时间过长

• 图片比较大的时候不会阻塞 dom 的渲染

4. window.onload 和 DOMContentLoaded 的区别

window.addEventListener('load', function(){
    // 页面的全部资源加载完成才会执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded', function(){
    // DOM渲染完即可执行，此时图片、视频可能没有加载完
})