性能优化初探
为什么要性能优化
57%的用户更在乎网页3秒内是否加载完成
52%的在线用户认为网页打开速度影响到他们对网页的忠诚度
每慢一秒造成页面PV降低11%，用户满意度也随之降低16%
近半数移动用户因为在10秒内任未打开页面从而放弃
什么是PV
pv即页面浏览量或点击量，是衡量一个网站或网页用户访问量依据。具体的说，PV值就是所有访问者在24小时（0点到24点）内看了某个网站多少个网页或某个网页多少次。PV是指页面刷新的次数，每一次页面刷新，就算做一次PV流量。度量方法就是浏览器发出了对网站服务器的请求（Request），网络服务器接到这个请求后，会将该请求对应的一个网页（Page）发送给浏览器，从而产生了一个PV。
性能优化学徒工
雅虎军规
- 浏览器正常情况下并发请求
5个左右。 - GZIP正常情况下100KB左右压缩后
30KB。 - 使用CDN，CDN不会携带多余的cookie，使用多个CDN，解决浏览器对同一个域名的并发。
- Http2多路复用Keep-Alives
参考雅虎军规
缓存策略
详见http缓存
网站协议
铜鼓哦升级http协议
HTTP2多路复用
浏览器请求//xx.cn/a.js--> 解析域名--> HTTP连接 --> 服务器处理文件 --> 返回数据 --> 浏览器解析、渲染文件
Keep-Alive解决的核心问题就在此，一定时间内，同一域名多次请求数据，只建立一次HTTP请求连接，其他请求可复用第一次建立的连接通道，以达到提高请求效率的问题，一定时间是可配置的
HTTP1.1还是存在效率问题
- 串行的文件传输
- 连接数过多
HTTP/2对同一域名下所有请求都是基于流的，也就是说同一域名下不管访问多少文件，也只建立一路连接。同样Apache的最大连接数为 300，因为有了这个新特性，最大的并发就可以提升到300，比原来提升了60倍
小字为先
通过分析工具，"哪里大"，对那一块进行压缩优化调优，尽量小，一般单个文件压缩后为30KB最佳。
渲染中优化
渲染阻塞问题
页面指标
衡量网站性能的各种指标，详见性能指标
插件分析
公国Chrome插件，我们可以很轻松的分析网站性能，根据它建议作出对应的优化Chrome性能分析工具
白屏原因
主要分为
- css、js文件加载阻塞
- js文件解析、运行
- dom生成
- cssom生成
优化调试
- 骨架屏
- 组件预加载
- 配合PWA缓存
优化技巧
预渲染
如果觉得SSR或者同构方案成本太大，可以考虑使用预渲染,使用比较简单react-snap
windowing
在遇到大量的列表渲染时，可以使用窗口化技术，在一定的区域内只显示一定的DOM元素，提高列表性能，比较成熟的有React-virtualized，这里推荐使用react-window，配合Autosize。
使用骨架屏
骨架屏可以理解为是当数据还未加载进来前，页面空白，使用骨架屏进行预先的占位，使得加载过程主观上变得流畅，这里推荐使用react-placeholder，如使用ant-design或者ant-design-pro表单库自身有或者支持骨架屏组件或结构。
总结
使用如上优化技巧，足以提高页面性能。