从输入url到渲染页面的整个过程

加载资源的形式

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

1.加载资源的过程

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

2.渲染页面的过程

根据HTML生成DOM Tree
根据css代码生成CSSOM(CSS对象模型)
将DOM Tree和CSSOM整合形成Render Tree
浏览器根据 Render Tree 渲染页面
如果遇到<script>则暂停渲染，优先加载并执行JS代码，完成再继续
直至把 Render Tree渲染完成

为何把css放在head中？

在渲染DOM节点前把CSS规则加载完，防止重复渲染

为何建议把js放在body最后？

Render Tree 渲染页面时，如果遇到<script>则暂停渲染， 优先加载并执行JS代码， 完成再继续
放在中间阻塞dom渲染

window.onload和DOMContentLoaded的区别

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