在改bug熬掉了一千根头发以后，鹿鹿修改的新版本终于放到服务器上发布上线了。然后去到运行环境（也就是浏览器）上检查。
于是浏览器：
1. 通过访问链接得到页面的内容；
2. 通过绘制和渲染，显示出页面的最终样子。
贝贝想知道页面到底怎么加载的，上面两句话明显满足不了她的好奇心，她寻觅又总结，于是乎↓↓
页面加载和渲染
问题：
1.从输入url到得到html的详细过程？
2.window.onload和DOMContentLoaded的区别。
知识点：
1.加载资源的形式
- 输入url（或跳转页面）加载html
https://segmentfault.com/ - 加载html中的静态资源(css、js、视频、图片)
<script src="/static/js/jquery.js"></script>
2.加载一个资源的过程【问题1】
- 浏览器根据DNS服务器得到域名的IP地址 DNS解析过程
- 向这个IP的机器发送http请求
- 服务器收到、处理并返回http请求
- 浏览器得到返回内容
3.浏览器渲染页面的过程
- 根据HTML结构生成
DOM Tree - 根据CSS生成
CSSOM - 将DOM和CSSOM整合形成
RenderTree渲染树（有样式的DOM树） - 根据
RenderTree开始渲染和展示 - 遇到
<script>时，会执行并阻塞渲染
示例：
1. 引用CSS文件
CSS文件
div {
width: 100%;
height: 100px;
font-size: 50px;
}HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test2</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div>test2</div>
</body>
</html>注意：CSS 放在 head 里而不能放在 body 里面，便于先加载 CSS 然后一次性渲染完成（而不是先默认渲染再覆盖）。
2. 引用JS文件
JS文件
document.getElementById('container').innerHTML = 'update by js'HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test3</title>
</head>
<body>
<div id="container">default</div>
<p>test</p>
<script src="index.js"></script>
</body>
</html> 注意：JS 放在 body 最下面，因为 JS 会阻塞渲染。
3. 插入图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>test</p>
<p><img src="src.png"/></p>
<p>test</p>
</body>
</html>此时，页面会先进行DOM渲染，渲染完成后（&），加载图片和视频等资源，最后加载完成（#）。
【问题2】
window.onload和DOMContentLoaded的区别。
window.addEventListener('load',function(){
//页面的全部资源加载完（#阶段）才会执行，包括图片视频等
})
document.addEventListener('DOMContentLoaded',function(){
//DOM渲染完（&阶段）即可执行，此时图片、视频还可能没有加载完
})
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。