一、从输入url到得到html的详细过程。

1）浏览器根据DNS服务器得到域名（url）的IP地址。

2）向这个IP的机器发送http（https）请求。

3）服务器收到、处理并返回http（https）请求。

4）浏览器得到返回的内容。

—————————————————————————————————————————————————

二、浏览器渲染页面的过程（得到返回内容之后怎么渲染成页面的过程）。

1）根据HTML结构生成DOM Tree（DOM树）。

2）根据CSS生成CSSOM Tree。

（头部里有css，先把css加载，会生成一个CSSOM结构化的一个东西，解析之后浏览器就已经知道了div就要这样这样（比如样式里设置了div的宽高），css渲染完，再解析div的时候，它就可以在已知样式的情况下，一次性的把页面渲染出来。）。

为何要把css放在head中的？

加载完css之后浏览器直接知道了规则，在渲染下面的body的时候，它会把这个规则考虑进去渲染。如果把样式放到下面，在渲染body里面内容的时候并不知道有什么规则，会按照默认的方式来渲染div，渲染出来之后运行到下面会发现还有一个css，div的宽是300，高是100，就需要重新渲染一遍，页面上的变化就是刚开始是一个默认的情况，一会突然闪动变成了一个宽300高100的样子，用户体验差，性能也差（一次渲染的事情，页面渲染了两次）。所以css要放在head里面。

3）将DOM Tree和CSSOM Tree整合形成RenderTree（渲染树）。//渲染树跟DOM树结构是一样的，只是添加了样式。

4）根据RenderTree开始渲染和展示。

5）遇到《script》时，会执行并阻塞渲染，所以一般将script相关的放到body的最下面。

（比如body里先有一行div，渲染了，然后下一行是个脚本，脚本修改div的东西，然后后面的东西就等着，等处理完之后，再渲染了div，才渲染第三行的p标签。）

为何要把js放在body最下面？

1）不会阻塞body里面结构的渲染，能让页面更快出来。

2）放到下面js能拿到所有的标签。

上面这些步骤用一张图表示：

http://s16/mw690/003xds7Kzy7fwcBNErJ1f&690

注意下面两个概念

1）重排Reflow

DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称为reflow。

什么时候会触发Reflow，怎么避免Feflow

1）当你增加、删除、修改DOM节点时，会导致Reflow或Repaint（增加的时候用代码片段）

2）当你移动DOM的位置，或者搞个动画的时候，会Reflow

3）当你修改CSS样式的时候，会Reflow

4）当你Resize窗口的时候，或者滚动的时候可能会Reflow，这个要看浏览器

5）当你修改网页默认字体的时候。当网页Repaint完的时候最好不要修改默认字体，会非常耗性能。（把样式放到head里面）

2）重绘Repaint，如何减少Repaint频率

当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程称为Repaint（页面要呈现的内容画在页面上就是repaint）。

什么时候会触发Repaint

1）DOM改动（代码片段）

2）CSS改动

—————————————————————————————————————————————————

三、加载资源的形式有哪些？

1）输入url（或者百度输入慕课网，点击链接跳转页面）加载html

2）加载html中的静态资源（包括图片、视频、样式、脚本等等媒体文件）