performanced的作用
Web Performance 接口允许网页中的 JavaScript 代码可以通过具体的函数(由 window 对象的 performance 属性提供)测量当前网页页面或者 web应用的性能。它能提供高精度的时间戳,可以更加精准的计算脚本运行的时间。
浏览器兼容性(pc和移动端的主流浏览器都支持)
API
1、performance.timing(页面整体的时间参数)
performance对象的timing属性指向一个对象,它包含了各种与浏览器性能有关的时间数据,提供浏览器处理网页各个阶段的耗时。我们在chrome中输入performance.timing就可以看到下面的数据:
performance.timing的所有属性都是只读属性:
根据上面这些属性,可以计算出网页加载各个阶段的耗时,对我们比较有用的页面性能数据大概包括如下几个:
2、performance.getEntries()
在chrome中输入performance.getEntries()可以得到静态资源的数组列表:
这个接口是获取所有资源文件的方法,该API还提供了另外两个接口:
performance.getEntriesByName(name) 根据资源的name获取相应的数据(如上图中的name)
performance.getEntriesByType(entryType) 根据资源的name获取相应的数据(如上图中的entryType)
3、performance.navigation
在chrome中输入performance.navigation:
这个对象有两个属性:
performance.navigation.type(该属性返回一个整数值,表示网页的加载来源,可能有以下4种情况):
0:网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载,相当于常数performance.navigation.TYPE_NAVIGATE。
1:网页通过“重新加载”按钮或者location.reload()方法加载,相当于常数performance.navigation.TYPE_RELOAD。
2:网页通过“前进”或“后退”按钮加载,相当于常数performance.navigation.TYPE_BACK_FORWARD。
255:任何其他来源的加载,相当于常数performance.navigation.TYPE_RESERVED。
performance.navigation.redirectCount:表示网页经过重定向的次数。
4、performance.memory
memory: {
usedJSHeapSize: 16100000, // JS 对象(包括V8引擎内部对象)占用的内存,一定小于 totalJSHeapSize,否则可能出现内存泄漏
totalJSHeapSize: 35100000, // 可使用的内存
jsHeapSizeLimit: 793000000 // 内存大小限制
},
5、performance.now()
performance.now方法返回当前网页自从performance.timing.navigationStart到当前时间之间的微秒数。
6、performance.mark()
mark方法用于为相应的视点做标记。对应的方法有 performance.clearMarks()。
相关资料
1 https://developer.mozilla.org/zh-CN/docs/Web/API/Performance
2 http://javascript.ruanyifeng.com/bom/performance.html#toc5