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)、组件前后端同构