网页加载渲染过程

运行环境即浏览器（server端有nodejs）
下载网页代码，渲染出页面，期间会执行若凡js
要保证代码在浏览器中:稳定且高效

网页加载过程
1、DNS解析：域名->IP地址
2、浏览器根据IP地址向服务器发起http请求
3、服务器处理http请求，并返回给浏览器

网页渲染过程 
1、根据HTML生成DOM结构
2、根据css生成CSSOM结构
3、将DOM结构和CSSOM整合形成Render Tree
4、根据Render Tree渲染页面
5、遇到<script>则暂停渲染（因为js线程和渲染线程是共用一个线程的，为什么是一个线程因为js有可能修改DOM结构，干脆就等js执行完了，再渲染）优先加载并执行js代码，完成再继续
6、直至渲染完成

为何建议css放在head中
为何建议js 放在body最后

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