前端性能优化方案(五篇)

前端性能优化方案篇一

上面的脚本计算了 head 中的第一个 js脚本执行后加载页面所需的时间，但它没有给出任何关于从服务器获取页面所需的时间，或是页面初始化生命周期的信息。

由此我们可以计算旧文档的卸载、重定向、应用缓存、dns lookup、tcp 握手、http 请求处理、http 响应处理、dom 处理、document加载完成等页面性能打点。具体可以参考navigation-timing w3c的规范 和 几个页面关键指标是如何计算的

从上图中我们可以看出document processing是 navigation timing 独有的，后面我们也会介绍resource timing。整体而言 level 2 标准更加的全面，把web performance timing分成了各个 performance metric，看起来一目了然，然而各个主流浏览器还存在兼容性问题。

介绍完这两个performance navigation timing api，我们顺便再来看一下其余几个主要的performance timing api：resource timing api 、 paint timing api 和 long task timing api，以及如何使用performanceobserver异步获取性能数据。

performanceobse