这是我参与 8 月更文挑战的第 14 天，活动详情查看： 8月更文挑战
加载资源的形式
- html代码
- 媒体文件，如图片、视频
- js、css
加载资源的过程
- DNS解析：域名 -> IP地址
- 浏览器根据IP地址向服务器发起http请求
- 服务器处理http请求，并返回给浏览器
渲染页面的过程
- 根据HTML代码生成 DOM Tree
- 根据CSS代码生成 CSSOM
- 将 DOM Tree和 CSSOM整合成 Render Tree
- 根据 Render Tree渲染页面
- 遇到
- 直至把 Render Tree渲染完成
css、img、js对渲染的阻塞？
- js 阻塞渲染
- css、img 不会阻塞
link为什么要放在head里面？
将link放在head里是规范的一部分。另外，link里的css会并行请求和解析，这样加载HMLT内容时，页面会被逐步渲染。如果将link放到body标签后，会造成HTML加载完成后才请求css资源，造成页面白屏。
CSSOM在DOM树生成之前就完成，然后整合成Reader Tree，避免重绘
为何建议JS放到body之后？
放在body后面是等body载入完后，依次往下执行，避免，先载入了js，缺找不到body里面的dom对象而造成js出错，而且能避免因脚本运行缓慢造成页面卡死的问题,所以一般要用window.onload来判断页面是否载入完成。
题目
从输入url到渲染出页面的整个过程
- 下载资源： 各个资源类型，下载过程
- 渲染页面： 结合 html css javascript 图片等
window.onload和DOMContentLoaded的区别
window.onload: 页面的全部资源加载完才会执行，包含图片、视频等DOMContentLoaded：DOM渲染完成即可执行，此时图片、视频还可能没有加载完
window.addEventListener('load',function(){
//页面的全部资源加载完才会执行，包含图片、视频等
})
document.addEventListener('DOMContentLoaded',function(){
//DOM渲染完成即可执行，此时图片、视频还可能没有加载完
})
