1、从输入url到渲染出页面的整个过程
加载资源的形式
- html代码
- 媒体文件,如图片、视频等
- Javascrpt、css
加载资源的过程
- DNS解析:域名->IP地址
域名解析成IP地址 - 浏览器根据IP地址向服务发送http请求
- 服务器处理http请求,并返回给浏览器
渲染页面的过程
- 根据HTML代码生成DOMTree
- 根据css代码生成CSSOM
- 将DOM Tree和CSSOM整合形成Render Tree
- 根据Render Tree渲染页面
- 遇到< scirpt >则暂停渲染,优先加载并执行JS代码,完成再继续
- 直至把Render Tree渲染完成
2、 window.onload和DOMContentLoaded的区别
window.addEventListener("load",function(){
//页面的全部资源加载完才会执行,包括图片、视频等
})
document.addEventListener("DOMContentLoaded",function(){
//DOM渲染完即可执行,此时图片、视频还可能没有加载完
})