前端性能监测API及插件-Navigation Timing、pagespeed

目录

一、Navigation Timing API

参数介绍

使用示例

兼容性

二、谷歌浏览器插件 PageSpeed

简介

使用

优化原则及标准

附录：雅虎军规

---

作为一名开发人员，无论是前端还是后端开发，无论是服务端还是客户端，都会涉及到性能问题，除了依靠测试人员提供的性能数据外，每个开发人员也应该有几个常规的性能参考工具。工欲善其事，必先利其器，一个好的工具可以大大提升优化效率，今天就介绍两款优化工具。

一、Navigation Timing API

W3C Web Performance Working Group 引入了 Navigation Timing API 可以帮我们精准获取从请求url到页面呈现过程中各阶段的影响时间，并且提供了各优化阶段的节点。Navigation Timing API 提供了可用于衡量一个网站性能的数据，该API使你可以衡量之前难以获取的数据，如卸载前一个页面的时间，在域名解析上的时间，在执行load事件处理器上花费的总时间等。

参数介绍

W3C原文链接：https://www.w3.org/TR/navigation-timing/

Navigation Timing提供了详情精准的数据，通过这些数据我们可以获得DNS解析时间，TCP建立链接时间，首页白屏、dom加载时间及页面事件load时间。performance.timing参数如下图，通过各阶段的开始、结束时间，我们可以轻松获取到各阶段的执行时间，并提供优化方向

使用示例

let timing = performance.timing;

console.log('DNS解析时间:', timing.domainLookupEnd - timing.domainLookupStart, 
'\nTCP建立时间:', timing.connectEnd - timing.connectStart, 
'\n首屏时间:', timing.responseStart - timing.navigationStart,
'\ndom渲染完成时间:', timing.domContentLoadedEventEnd-timing.navigationStart, 
'\n页面onload时间:', timing.loadEventEnd-timing.navigationStart,
'\ndomload时间:',timing.domComplete-timing.domLoading,
'\n事件绑定时间:',timing.loadEventEnd-timing.loadEventStart);

输出结果：

 

兼容性

目前Navigation Timing已经普及，绝大部分主流浏览器都已经支持

二、谷歌浏览器插件 PageSpeed

PageSpeed Insights是一款可以分析网页速度瓶颈，让网页设计人员开发出速度更快的网站的谷歌浏览器插件

简介

PageSpeed Insights是一款谷歌公司开发的网页速度分析插件，在Chrome中安装了PageSpeed Insights插件以后，用户在网站开发完成以后，就可以使用PageSpeed Insights插件来监控当前网站的运行速度，PageSpeed Insights插件在监控完成以后，还会给出一些网页速度优化的建议，用户可以参考其中的提示，在网站的开发或服务器开发方面更改产品的性能或增强服务器质量等方式来缩短网站的打开速度

使用

只需要在谷歌浏览器中安装PageSpeed Insights插件，并在Chrome的扩展器中启动网页速度分析的功能，就可以使用了，注意PageSpeed Insights插件只能分析当前网站的打开速度，并给出相应的优化建议，而不能直接帮助用户改善网站的打开速度，这些操作需要用户按照PageSpeed Insights的提示去优化网站程序或服务器

打开网站，按F12，选择PageSpeed，点击 开始分析，分析完成后，结果如下

根据可优化的程度会给出红、绿、灰三种颜色提示，每条提示，可展开查看详细建议。

红色：可优化空间大，绿色：尚可进一步优化，灰色：已无需进一步优化

优化原则及标准

可参考雅虎军规

附录：雅虎军规

雅虎军规是雅虎的开发人员在总结了网站的不合理部分后，提出的优化网站性能提高的一套方法规则，最初有14条，称为雅虎军规14条，现在已扩展为35条。至今仍是前端开发的标准指南。这里只简要列出目录，详情可参考其它在线资源，也参考以下博主文章，https://zhuanlan.zhihu.com/p/37076600  https://www.cnblogs.com/xianyulaodi/p/5755079.html

雅虎军规14条：

1.尽可能的减少http请求数

2.使用CDN（内容分发网络）

3.添加Expire/Cache-Control头

4.启用Gzip压缩

5.将css放在页面最上面

6.将script放在页面最下面

7.避免在CSS中使用Expressions

8.把js和css文件放到外部文件中

9.减少DNS查询

10.压缩JavaScript和Css

11.避免重定向

12.移除重复的脚步

13.配置实体标签（ETag）

14.使用Ajax缓存

雅虎军规扩展35条

1. 尽可能的减少http请求数
2. 减少DNS查找
3. 避免重定向
4. 让Ajax可缓存
5. 延迟加载组件

6. 预加载组件

7. 减少DOM元素的数量

8. 跨域分离组件

9. 尽量少用iframe

10. 杜绝404

11. 避免使用CSS表达式

12. 选择<link>舍弃@import

13. 避免使用滤镜

14. 把样式表放在顶部

15. 尽量减少DOM访问

16. 用智能的事件处理器

17. 用智能的事件处理器

18. 把脚本放在底部

19. 把JavaScript和CSS放到外面

20. 压缩JavaScript和CSS

21. 优化图片

22. 优化CSS Sprite

23. 不要用HTML缩放图片

24. 用小的可缓存的favicon.ico（P.S. 收藏夹图标）

25. 给Cookie减肥

26. 把组件放在不含cookie的域下

27. 保证所有组件都小于25K

28. 把组件打包到一个复合文档里

29. Gzip组件

30. 避免图片src属性为空

31. 配置ETags

32. 对Ajax用GET请求

33. 尽早清空缓冲区

34. 使用CDN（内容分发网络）

35. 添上Expires或者Cache-Control HTTP头