前端性能优化漫谈----用户

前端性能优化的方式方法很多，个人而言将其分为两部分：
1. 其一是如何让用户更快的看见 （用户篇）
2. 其二是如何让代码更好的维护 （后续的 代码篇）

为了解决用户如果更快的得到页面的响应，我们有必要理清一个思路就是从用户键入网址到浏览器页面渲染这个过程中，都经历过什么。

• 域名转换为ip地址（DNS-域名解析服务）
• 通过互联网找到ip地址对应的服务器（路由寻址）
• 与服务器建立连接（TCP的三次握手）
• 进行数据传输（数据传输）
• 客户端对页面进行渲染（浏览器渲染机制）

所有我们需要知道的是，在上面这些过程中，我们能进行优化的步骤有什么？
对路由寻址以及建立连接的过程博主也不知道能不能优化，以及该如何优化。

1. DNS优化

DNS的优化会是什么？

首先DNS会缓存解析结果。

---

优化方案
1. 也就是说对同域名发起的多次请求，只会有第一次的域名解析查询用时相对较长。由此我们可以知道，页面请求尽可能的采用同域名地址，以减少DNS解析时间。
2. 在使用webview时，尽可能使请求地址与app的域名地址相同，也是可以减少webview打开时的loading时间的

---

2. TCP握手优化

减少TCP握手优化，实际上就是减少客户端向服务器发起的请求。常用的手段有

---

优化方案
- js，css压缩
- img的合并（雪碧图）

---

3. 数据传输

---

数据传输就涉及到网络带宽等一系列的知识，这里我们浅显的来理解一下在互联网中，数据是如何进行传输的。

数据以数据包的形式在互联网中进行传输

我们可以把数据包比如成公路上行驶的货车，而带宽就成了公路，端口就是收费站。

• 公路越宽，相同车流量通过该公路时间约少
• 缩减公路长度，相同车流量通过该公路时间约少
• 车流量越少，通过相同公路的时间越少
• 收费站越多，单位时间能上路的车流量越多

无论是从中国国情的网络环境还是更优的方法来看，对此优化是很有必要的。

---

优化方案
1.更宽的公路，当数据交互时，可理解为双向车道。我们保证不了用户的带宽怎么样，即客服端请求服务器的请求用时多长，至少要保障服务器对客服端请求响应的车道够宽。（理想状态当然是服务器带宽越宽越好，不过有预算的限制）

2.更少的车流总量，则是对代码冗余的优化，尽可能的减少代码体积

• html，js，css的压缩（去掉不必要的空格，注释，丑化也有一定的压缩功能）
• 减少js代码的冗余

3.增加多个服务器来增加进入公路的入口。每个服务器的端口对数据的吞吐是有限的，同时只能并行进行一定数量的请求处理。可参见各种电商网站的会添加很多的图片服务器。（和1的原理类似，同样也是受到预算的限制）

4.缩减公路长度，使用CDN。使用户从最近的一个CDN节点来请求数据，减少传输长度以达到缩减时间的优化

---

4. 浏览器渲染优化

当我们解决了以上三点使其达到我们尽可能的优化，我们还能做什么。既然我们已经固定我们的资源只能在某个时间中下载完成，我们可以想到一个例子——田忌赛马。
先了解浏览器渲染机制是从上往下，遇见script标签就下载内容等待数据返回然后解析js，完成在进行dom树渲染。

---

优化方案
正如我们都知道的一个方案，将script标签放在页面底部，保证dom树优先渲染完成，给用户及时的反馈，然后在加载js，让用户可交互。

---

5. 其他的优化方案

在以上方案的基础上，针对用户观感会对以上的某写方案进行一定的取舍。

• 比如按需加载就是在代码合并的理念上进行的另一种优化，保证首屏渲染，从而舍弃一部分的连接请求时长，减少用户观感体验时长。

• 比如图片预加载就是增加一个请求连接，从而使用户获得更好的页面观赏体验。

• 比如某些对页面加载load处理之类的js放在页面头部，舍弃一部分dom树渲染时间，从而获取用户等待页面加载更好用户交互体验。