浏览器查找域名的IP地址
补充知识1：DNS优化
- DNS缓存
具体有浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。 - DNS负载均衡
浏览器向服务器发送HTTP请求
补充知识2：cookie & sessionStorage & localStorage
共同点：都是保存在浏览器端，且同源的（session保存在服务端）。
区别见下表。
| 特性 | cookie | sessionStorage | localStorage |
|---|---|---|---|
| 生命周期 | 由服务器生成，可设置失效时间，若在浏览器生成，默认关闭浏览器后失效 | 仅在当前会话下有效，关闭页面或浏览器后被清除 | 除非被清除，否则永久保存 |
| 数据大小 | 4k左右 | 一般为5m | 一般为5m |
| 服务端通信 | 携带在HTTP头中，保存过多数据影响性能 | 仅在客户端保存，不参与服务器通信 | 仅在客户端保存，不参与服务器通信 |
| 作用域 | 在所有同源窗口中都是共享 | 只在相同的浏览器窗口共享 | 在所有同源窗口中都是共享 |
服务器处理请求并返回HTTP报文
当服务器进行返回时，若地址需要重定向，会返回状态码301。浏览器接收到后，会重新发送新的请求到重定向的地址。
服务器接收到请求后，即返回相应的HTML响应。
补充知识3：状态码
301 vs 302
两者都是重定向。
- 301(Moved Permanently):是在告诉搜索引擎，链接地址被永久的改变了。所有链向这个网站的链接都要被重定向到新的网站地址。
- 302(Moved Temporarily):暂时的重定向，搜索引擎会抓取新的内容而保留旧的网址。
实际上，302重定向制造了重复内容，这也很好的解释了302劫持的原理。
例如，一个不道德的人在他自己的网址A做一个302重定向到你的网址B。出于某种原因，Google搜索结果所显示的仍然是网址A，但是所用的网页内容却是你的网址B上的内容，这种情况就叫做网址URL劫持。
另外状态码303(See Other)和307(Temporary Redirect)都和302相似，但303明确表示客户端应采用GET方法获取资源，且301-302时几乎所有浏览器都会把POST改为GET请求，而307会遵照浏览器标准不进行修改。
200 vs 304
- 200(OK):请求正常处理。
- 304(Not Modified):资源已找到，但未符合条件请求，返回时不包含任何响应的主体部分。
当客户第一次请求资源，服务器成功返回，这时状态码为200。所以，状态码为200的数据包往往包含用户从服务器获取的数据。
而每个资源请求完成后，通常会被缓存在客户端，并会记录资源的有效时间和修改时间。当客户再次请求该资源，客户端首先从缓存中查找该资源。如果该资源存在，并且在有效期，则不请求服务器，就不会产生对应的请求数据包。
如果不在有效期，客户端会请求服务器，重新获取。服务器会判断修改时间，如果没有修改过，就会返回状态码304，告诉客户端该资源仍然有效，客户端会直接使用缓存的资源。
针对304的响应，渗透人员可以分析对应的请求包，获取资源路径。如果该资源不限制访问，就可以直接请求获取。否则，就需要进行Cookie劫持，进行获取。
其他常用状态码
| 状态码 | 含义 | 说明 |
|---|---|---|
| 204(No Content) | 请求处理成功，但没有资源可返回 | 一般在只需要向服务器发送信息，而对客户端不需要发送新信息内容的情况下使用 |
| 206(Partial Content) | 对资源某一部分的请求 | 响应报文中包含由Content-Range指定范围的实体内容 |
| 400(Bad Request) | 请求报文中存在语法错误 | |
| 401(Unauthorized) | 需要认证 | 初次接收时会弹出认证窗口，认证成功后可访问 |
| 403(Forbidden) | 不允许访问资源 | |
| 404(Not Found) | 服务器没有请求的资源 | |
| 500(Internal Server Error) | 服务器发生错误 | |
| 503(Service Unavailable) | 服务器正忙或停机维护 | 可写入RetryAfter首部字段告诉客户端接触状态需要的时间 |
浏览器解析渲染页面
步骤
当浏览器获得一个HTML文件后，会”自上而下”加载，并在加载过程中进行解析渲染。
浏览器将HTML文档的各标记转化为DOM节点，形成一棵DOM树；
同时将外部CSS以及样式元素中的样式数据，解析成CSS Rule Tree；
根据DOM树和CSSOM(CSS对象模型)来构造Rendering Tree（呈现树）。呈现树包含多个带有视觉属性（如颜色和尺寸）的矩形，这些矩形的排列顺序就是它们将在屏幕上显示的顺序。也就是说，这时浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系；
呈现树构建完毕之后，进入布局处理阶段（Layout），计算出每个节点在屏幕中的确切位置。
绘制阶段（Painting），即遍历呈现树，将每个节点绘制出来。
两个概念
reflow回流
浏览器要花时间去渲染，当它发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。
回流主要发生在
- 页面初始化
- 操作DOM
- 元素尺寸改变
- css属性改变
repaint重绘
如果只是改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，重画某一部分。
考虑到性能，应尽量减少reflow和repaint。
一段可爱的描述
摘录自某大神博客（地址位于文章最后的参考）。
- 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
- 浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；
- 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
- 浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
- 浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
- 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
- 浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它；
- Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞（style.display=”none”）。突然少了这么一个元素，浏览器不得不重新渲染这部分代码；
- 终于等到了＜/html＞的到来，浏览器泪流满面……
- 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径；
- 浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，”大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。
意义
研究浏览器加载与渲染的过程，意义在于把握其中的细节，去更好更快地实现其过程。
对应整理了如下一些方法。
更少的HTTP请求
- 合并文件
- 雪碧图
减少DNS查询
由于DNS查找是需要时间的，而且它们通常都是只缓存一定的时间，所以应该尽可能地减少DNS查找的次数。
减少DNS查找次数，最理想的方法就是将所有的内容资源都放在同一个Domain下面，这样访问整个网站就只需要进行一次DNS查找，这样可以提高性能。
但理想总归是理想，上面的理想做法会带来另外一个问题，就是由于这些资源都在同一个域，而HTTP/1.1 中推荐客户端针对每个域只有一定数量的并行度（它的建议是2），那么就会出现下载资源时的排队现象，这样就会降低性能。
所以，折衷的做法是：建议在一个网站里面使用至少2个域，但不多于4个域来提供资源。
避免跳转
避免让浏览器发生重定向（301、302），尽量提供正确规范的跳转地址。
尽量使用GET请求
当使用XMLHttpRequest，POST会被浏览器实现为两步：首先发送头部，然后发送数据。所以使用GET最好，仅用一个TCP包发送（除非cookie太多）。
使用POST但不提交任何数据，和GET行为类似，但从语义上讲，获取数据应该用GET，提交数据到服务器用POST。
加Expires或者Cache-Control头部
- 静态组件：通过设置Expires头部来实现“永不过期”策略。
- 动态组件：用合适的Cache-Control头部来帮助浏览器进行有条件请求。
如果设置了Expires头部，当组件更新后，必须更改文件名。
用没有cookie的域名提供组件
当浏览器请求静态图片并把cookie一起发送到服务器时，cookie此时对服务器没什么用处。所以这些cookie只是增加了网络流量，可以创建一个子域名来托管所有静态组件。
另外一个好处是，某些代理可能会阻止缓存待cookie的静态组件请求。
参考
- 席飞剑 — 浏览器加载和渲染html的顺序-css渲染效率的探究
- 陈希章@中国 - 优化网站设计（九）：减少DNS查找的次数