页面加载和渲染过程

1. 加载资源的形式

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

2. 加载过程

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

3. 渲染过程

• 根据HTML代码生成DOM Tree
• 根据CSS代码生成CSSOM
• 将DOM Tree和CSSOM整合形成Render Tree
• 浏览器根据Render Tree渲染页面
• 遇到script标签则暂停渲染，优先加载并执行JS代码，完成再继续
• 直至把Render Tree渲染完成

4. window.onload 和 DOMContentLoaded

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