页面渲染性能的优化

页面渲染性能的优化衡量指标
window.performance是w3c提供的用来测量网页和Web应用程序的性能api。其中performance timing提供了延时相关的性能信息，可以高精度测量网站性能 。

白屏时间=页面开始展示的时间点(PerformanceTiming.domLoading)-开始请求时间点(PerformanceTiming.navigationStart)
首屏时间=首屏内容渲染结束时间点(视业务具体情况而定)-开始请求时间点(PerformanceTiming.navigationStart)
可交互时间=用户可以正常进行事件输入时间点（PerformanceTIming.domInteractive）-开始请求时间点(PerformanceTiming.navigationStart)。
页面渲染性能的优化策略
1. 防止阻塞渲染：
css 放在首部，提前加载 ；js文件放在底部，防止阻塞解析 ；一些不改变dom和css的js 使用 defer 和 async 属性告诉浏览器可以异步加载，不阻塞解析 。

2. 减少重绘和回流：
重绘和回流在实际开发中是很难避免的，我们能做的就是尽量减少这种行为的发生。

js尽量少访问dom节点和css 属性
尽可能的为产生动画的 HTML 元素使用 fixed 或 absolute 的 position ，那么修改他们的 CSS 是不会 Reflow 的。
img标签要设置高宽，以减少重绘重排
把DOM离线后修改，如将一个dom脱离文档流，比如display：none ，再修改属性，这里只发生一次回流。
尽量用 transform 来做形变和位移，不会造成回流
3. 提高代码质量：
1）html：
dom的层级尽量不要太深，否则会增加dom树构建的时间，js访问深层的dom也会造成更大的负担。
meta标签里需要定义文档的编码，便于浏览器解析
2）css：
减少 CSS 嵌套层级和选择适当的选择器
对于首屏的关键css 可以使用style标签内联
3）js：
减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画
访问dom节点时需要对dom节点转存，防止循环中重复访问dom节点造成性能损耗。
慎用 定时器 和 计时器， 使用完后需要销毁。
用于复杂计算的js代码可以放在worker进程中运行。
静态资源:
1）拼接、合并、压缩、制作雪碧图：
由于HTTP的限制，在建立一个tcp请求时需要一些耗时，所以，我们对资源进行合并、压缩，其目的是减少http请求数和减小包体积，加快传输速度 。

2）CDN资源分发：
将一些静态资源文件托管在第三方CDN服务中，一方面可以减少服务器的压力，另一方面，CDN的优势在于，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，保证资源的加载速度和稳定性。

3）缓存：
缓存的范围很广，比如协议层的DNS解析缓存、代理服务器缓存，到客户端的浏览器本地缓存，再到服务端的缓存。一个网络链路的每个环节都有被缓存的空间。缓存的目的是简化资源的请求路径，比如某些静态资源在客户端已经缓存了，再次请求这个资源，只需要使用本地的缓存，而无需走网络请求去服务端获取。

4）分片：
将资源分布到不同的主机上，可以建立更多的tcp请求，降低请求耗时，从而提升网页速度。

5）升级协议：
可以升级我们的网络协议，比如使用HTTP2，quic 之类的，代替之前的http1.1，从协议层优化资源的加载。

业务数据：
1）首屏直出：
为了提升用户体验，我们认为首屏的渲染速度是极为重要的，用户进来页面，首页可见区域的加载可以由服务端渲染，保证了首屏加载速度，而不可见的部分则可以异步加载，甚至做到子路由页面的预加载。业界已经有很多同构直出的方案，比如vue的nuxt ， react的beidou等。

2）接口合并：
前端经常有这样的场景，完成一个功能需要先请求第一个接口获得数据，然后再根据数据请求第二个接口获取第二个数据，然后第三、第四…前端通常需要通过promise或者回调，一层一层的then下去，这样显然是很消耗性能的 。

标签：首屏,缓存,请求,渲染,dom,js,加载,优化,页面
来源： https://www.cnblogs.com/xiaoxiao95/p/16354679.html