前端工程师需要关注的页面加载过程

1、从输入url到渲染出页面的整个过程
加载资源的形式

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

加载资源的过程

1. DNS解析：域名->IP地址
   域名解析成IP地址
2. 浏览器根据IP地址向服务发送http请求
3. 服务器处理http请求，并返回给浏览器

渲染页面的过程

1. 根据HTML代码生成DOMTree
2. 根据css代码生成CSSOM
3. 将DOM Tree和CSSOM整合形成Render Tree
4. 根据Render Tree渲染页面
5. 遇到< scirpt >则暂停渲染，优先加载并执行JS代码，完成再继续
6. 直至把Render Tree渲染完成

2、 window.onload和DOMContentLoaded的区别

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