本文共 2299 字，大约阅读时间需要 7 分钟。

从输入url到看到页面发生了什么

1.DNS解析

2.发送tcp连接

3.发送http请求

4.服务器处理请求并返回http报文

5.浏览器解析渲染界面

6.连接结束

DNS解析

1.解析过程 

DNS解析是一个递归的过程。比如，你输入www.google.com网址后，首先在本地的域名服务器中查找，没找到就去根域名服务器查找，再没有去com顶级域名服务器查找，如此类推，知道找到ip地址，把它记录在本地（.=>.com=>google.com=>www.google.com）

2.DNS优化

DNS缓存：因为DNS的解析存在N个过程，每个过程都会影响性能。使用DNS缓存可以提高性能。DNS存在多级缓存，从离浏览器的距离排序，依次为：浏览器缓存，系统缓存，路由器缓存等等。

DNS负载均衡：DNS负载均衡技术的实现原理是在DNS服务器中为同一个主机名配置多个IP地址，将客户端的访问引导到不同的机器上去，使得不同的客户端访问不同的服务器，从而达到负载均衡的目的。

发送TCP连接

发送HTTP请求 

1.GET和POST的区别

b.get只能发送普通格式的数据(URL编码格式)，post发送的格式多种多样（纯文本，二进制）

c.get传输量小（受URL长度限制），post传输量大

d.get不安全（url是可见的，浏览器会缓存），post更安全（浏览器不会缓存post提交的数据）

2.http缓存（强缓存和协商缓存）

⑤HTTP的缓存机制

缓存的重要性不言而喻，通过网络请求资源缓慢并且降低了客户端的用户体验，增添了服务端的负担。很多短期之内不会经常发生变化的资源文件没必要每次访问都想服务端进行数据请求，而缓存策略的使用就是为了改善客户端的呈现时间，降低服务端的负担。

对于HTTP的缓存机制来说，策略体现在HTTP的头部信息的字段上，而这些策略根据是否需要重新向服务器端发起请求可以分为强缓存和协商缓存两大类。

强缓存相关的HTTP header 的字段

• Expires（expires 字段规定了缓存的资源的过期时间）
• Cache-Control（缓存方式）

 协商缓存相关的HTTP header 的字段

• Last-Modified 和 If-Modified-Since(让服务器去判断是否在此时间之后资源内容发生了变化)
• Etag 和 If-None-Match(判断资源是否改变)

4.服务器处理请求并返回http报文

304 ： 资源未改变

412：服务器在验证在请求的头字段中给出先决条件时，没能满足其中的一个或多个。这个状态码允许客户端在获取资源时在请求的元信息（请求头字段数据）中设置先决条件，以此避免该请求方法被应用到其希望的内容以外的资源上。

5.浏览器解析并渲染界面

• 解析HTML形成DOM树
• 解析CSS形成CSSOM 树
• 合并DOM树和CSSOM树形成渲染树
• 浏览器开始渲染并绘制页面 这个过程涉及两个比较重要的概念回流和重绘，DOM结点都是以盒模型形式存在，需要浏览器去计算位置和宽度等，这个过程就是回流。等到页面的宽高，大小，颜色等属性确定下来后，浏览器开始绘制内容，这个过程叫做重绘。浏览器刚打开页面一定要经过这两个过程的，但是这个过程非常非常非常消耗性能，所以我们应该尽量减少页面的回流和重绘

回流

DOM结点都是以盒模型形式存在，需要浏览器去计算位置和宽度等，这个过程就是回流。 

导致回流的操作

• 页面首次渲染
• 浏览器窗口大小发生变化
• 元素尺寸或位置发生改变
• 元素内容变化（文字数量，大小或图片大小）
• 添加或者删除可见的DOM元素
• 激活css伪类（eg:hover）
• 查询某些属性或者调用某些方法（以下方法）

一些常用且会导致回流的属性和方法：

• clientWidth、clientHeight、clientTop、clientLeft
• offsetWidth、offsetHeight、offsetTop、offsetLeft
• scrollWidth、scrollHeight、scrollTop、scrollLeft
• scrollIntoView()、scrollIntoViewIfNeeded()
• getComputedStyle()
• getBoundingClientRect()
• scrollTo()

重绘

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

如何针对重绘进行优化

css

• 避免使用table布局
• 尽可能在DOM树的最末端改变class
• 避免设置多层内联样式
• 将动画效果应用到position属性为absolute或fixed的元素上。
• 避免使用CSS表达式（例如：calc()）。

javascript

• 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
• 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
• 也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
• 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
• 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。