优化实践本文属于四福课堂VirtualDOMtoAST玩转前端性能原理分析及代码实战课程官博：fed123.com我们对各个方面进行了全面的分析和总结评估页面性能和用户体验指标参数。那么如何优化呢？OpenSignal官方提供了2018年2月全球4G网络覆盖和通信速率统计分布图如下。在当前的移动互联网浪潮下，我们必须利用好用户终端设备的每一个字节的流量。当然，页面性能和体验的优化不是一蹴而就的。需要不断的研究和跟踪，才能发现和解决问题。但是当我们开始编写业务代码时，我们可以做得更好，做到极致。因此，我们主要将实际的优化分为加载渲染环节优化和程序代码优化两部分。加载和渲染链接优化从访问url到页面渲染，整个链接都可以进行优化。幸运的是，W3C推荐的NavigationTiming标准中定义的核心页面性能数据包括从最后一次页面销毁到跳转到当前页面加载完成所花费的时间。在canIuse上发现兼容性也很好：使用这个接口可以很方便的帮助我们排查链接问题。该API在NavigationTiming标准中引入，主要包括两个接口：PerformanceTiming和PerformanceNavigation。这两个接口由浏览器实现和维护。浏览器在创建页面时，会将接口定义的相关数据挂载到窗口中。.performance.timing和window.performance.navigation这两个属性。我们可以打开一个网页看一下：对比一下两张图片，我们就可以轻松排查页面的加载链接问题。打开带有静态资源链接的页面，第一步是请求页面的html，其中涉及到TTFB的综合指标。同时，如果有必要，我们还可以统计DNS时间和TCP时间。DNS时间：主要是根据请求的域名查询到对应主机IP的时间。这个跟DNS服务器有关，也可能跟本地缓存有关。如果这样很慢，可以找服务商解决问题。TCP时间：tcp是承接http协议的下层协议。主要是路由到主机ip，建立tcp链接的时候。这个时间反映了服务器与用户客户端之间的链路是否畅通，网络是否畅通。请求HTML后，解析html代码，从上到下，按照自然顺序，解析内联CSS代码或加载外链CSS脚本，解析内联Javascript脚本，或加载外链Javascript脚本。由于浏览器是单线程的，这些CSS和Javascript脚本很可能会导致页面卡顿。参考浏览器线程理解和microtask和macrotask。LoadingCDN是一个内容分发网络，主要用于缓存静态资源。CDN服务商一般在全国部署服务，带宽大，这样在访问CDN资源时，可以有较短的路由路径，而且带宽比较大，访问比较快。建议将html、CSS、JS、font、img等资源放在CDN。如果没有CDN，它们也可以放在OSS存储服务上。总之比自己服务器的硬盘快多了。至少服务提供商会在不同的地区进行分发。部署如果你没有钱购买CDN服务，那么尽量少加载外部CSS和JS代码。请注意，可以将dns-prefetch添加到html标头以减少DNS解析时间。未在首屏显示的资源不应立即加载。在onload之后加载页面，或者在首屏渲染完成后加载压缩后的CSS、JS、font、img，尽量减少体积，同时在服务端开启gzip，考虑资源组合请求，减少http量要求。浏览器一般都有并发限制，比如chrome一次6个并发http请求，不同的浏览器内核可能不一样。
