【运行环境】加载资源的形式

相关资源：性能优化原则

1 加载资源的形式

html代码
媒体文件，如图片，视频等
javasccript css

2 加载资源的过程

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

3 渲染页面的过程

根据HTML 代码生成DOM Tree
根据CSS 代码生成CSSOM
将DOM Tree和CSSOM 整合形成render Tree
● 根据Render Tree渲染页面
● 遇到 script则暂停渲染，优先加载并执行JS 代码，完成再继续
● 直到Render tree 渲染完成

window.onload 和 DOMContentLoaded的区别

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