浏览器页面加载过程

1.从输入url到得到html的详细过程

• 浏览器根据DNS服务器得到域名的IP地址
• 向这个IP的机器发送http请求
• 服务器收到、处理并返回请求
• 浏览器得到返回的内容

2.window.onload和DOMContentLoaded的区别

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

对于第一点，首先要明白几点：

• 加载资源的形式
  1.输入url（或跳转页面）加载html，比如输入网址跳转至页面
  2.加载html的静态资源，比如<script>、<img>、<link>等加载资源
• 加载一个资源的过程
  1.浏览器根据DNS服务器得到域名的IP地址
  2.向这个IP的机器发送http(s)请求
  3.服务器收到，处理并返回http请求，比如返回图片或html代码等
  4.浏览器得到返回内容
• 浏览器渲染页面的过程
  1.根据HTML结构生产DOM Tree（只是一个DOM结构，没有样式）
  2.根据CSS生产CSSOM(CSS Object model)（只是一个样式结构）
  3.将DOM和CSSOM整合成RenderTree(渲染树)
  4.根据RenderTree开始渲染和展示
  5.遇到<script>时，会执行并阻塞渲染(遇到JS会阻塞渲染，因为JS有权利改变DOM结构，所以得规定先后顺序)

思考：为何要把css放在head中？

如果不把css放在head中，会导致多次渲染，严重影响用户体验同时会损耗性能。CSS一定要放在head中，等body里面的东西出来前就要加载完.