移动web首屏优化（二）

1、前端性能包括以下几方面：

a)、加载性能

b)、渲染速度

c)、用户交互响应速度

d)、动画流畅性

e)、DOM操作无闪动

2、首屏时间性能优化

场景一：用微信实现一个场景，定位，加载或请求，操作路径受到限制的

场景二：红包活动落地

3、首屏时间为页面内容基本可展示完全，影响首屏时间的因素：

a)、网络耗时远大于浏览器耗时

1)、DNS解析    

2)、建立TCP连接   

3)、HTTP Request 

4)、HTTP Response

b)、RTT

RTT = Round-trip time 一个回路时间，就是一个请求发出到请求结果返回的时间

4、网络耗时的测定

a)、HTML5提供了网络测速的方法

b)、Navigation Timing获得主页相关的性能数据

c)、Resource Timing 获得主页相关资源的性能数据

5、首屏优化方法：

a)、减少请求数，因为空请求也会耗时500ms；

b)、减小传输体积，初次请求数据控制在14K之内最好；

c)、尽可能的利用缓存；

d)、缩短关键路径；

e)、合理安排请求顺序；

6、DNS预解析

a)、DNS缓存

DNS查询过程需消耗200ms，在此期间浏览器是保持空白的，若DNS查询很多次，则网页性能会受到影响；

不同浏览器对DNS的缓存时间是不同的，IE对DNS记录的缓存时间为30min，Firefox和Chrome缓存时间为1min,

b)、减少DNS查询次数

减少DNS查询次数需要减少赖在不同domain的请求数量，例如尽量将外部对象下载到本地服务器上

7、域名收敛（查资料）

域名收敛：将静态资源放在一个域名下，减少DNS解析的开销。

域名收敛多用于移动端，提高性能，因为DNS解析是从后向前迭代解析，如果域名过多，性能会下降，增加DNS的解析开销。

缩短域名，将域名存储在一个地方，通过反向代理进行

8、链路复用 （资料查询）

a)、TCP3次握手

b)、keep-alive提升的部分

c)、Server内存消耗，预先扩容

d)、实际提升效果

9、组件化开发

a)、按需/异步加载

b)、异步渲染

c)、服务端渲染

1）、Ajax模式下，数据与页面资源串行

2)、网络路径的增长，提升了网络异常的影响

3)、使用Node.js进行服务端渲染

4)、组件前后端同构