简析url到整个网页加载完毕显示在屏幕上的流程/页面渲染过程

URL到整个网页加载完毕及显示在屏幕上的整个流程。

过程：

1. 用户输入网址（（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件； ）
2. 浏览器查找域名的IP地址
3. 浏览器尝给web服务器发送一个http请求
4. 服务器发送永久重定向
5. 浏览器跟踪重定向地址
6. 服务器处理请求
7. 服务器发送HTML响应
8. 浏览器开始显示HTML
9. 浏览器发送请求，以获取嵌套在HTML中的元素。

页面渲染过程：

1.解析HTML代码，生成一颗DOM树
——在DOM树中，每一个HTML标签都有一个对应的节点（元素节点），每一个文本也有一个对应的节点（文本节点）。DOM树的根节点就是documentElement，对应的是HTML标签
2.解析css文件
——对css代码中的非法语句他会直接忽略掉
解析css的时候会按照如下顺序来定义优先级：浏览器默认设置，用户设置，外联样式，内联样式，HTML中的style（嵌在标签中的行间样式）
3.生成渲染树
——渲染树和dom树有点像，但是有区别，DOM树完全和HTML标签一一对应，而渲染树会忽略不需要渲染的元素（head,display:none元素）
渲染树中每一个节点都存储着对应的css属性
4.渲染树中的节点，当渲染树创建完成之后，浏览器就可以根据渲染树直接把页面绘制到屏幕上

相关概念：

浏览器主要会解析三个东西：
（1）HTML/SVG/XHTML,解析这三种文件会产生一个DOM Tree
（2）xss，解析css会产生css规则树
（3）JavaScript脚本，主要通过DOM API和CSSOM API来操作DOM Tree和CSS RuleTree

当浏览器获得一个html文件时，会“自上而下”加载，并在加载过程中进行解析渲染。
解析：
1. 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
2. 将CSS解析成 CSS Rule Tree 。
3. 根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。
4.有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。
5.再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

【几个概念：】
（1）Reflow（回流）：浏览器要花时间去渲染，当它发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。
（2）Repaint（重绘）：如果只是改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，重画某一部分。
Reflow要比Repaint更花费时间，也就更影响性能。所以在写代码的时候，要尽量避免过多的Reflow。

【reflow的原因：】
（1）页面初始化的时候；
（2）操作DOM时；
（3）某些元素的尺寸变了；
（4）如果 CSS 的属性发生变化了。
【减少 reflow/repaint】
　（1）不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className。
　（2）不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
　（3）为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
　（4）千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。