├── README.md
├── effect.png
├── install.png
├── manifest.json
├── perfomance.png
└── src
├── dom.html
├── img
├── 16.png
└── 40.png
└── js
├── background.js
└── performance.js
/README.md:
--------------------------------------------------------------------------------
1 |
2 | performance
3 | =================
4 | [performance详解](https://github.com/fredshare/blog/issues/5)
5 |
6 | ## 查看打开网页至加载完毕各阶段时间消耗的工具
7 | performance API 耗时统计
8 |
9 | ### 使用方法
10 | #### 安装chrome插件
11 | 打开chrome在地址栏输入chrome://extensions/打开插件管理页
12 | 勾选开发者模式
13 | 点击“加载正在开发中的扩展程序”进行加载
14 | 
15 |
16 | ### 效果图
17 | 
18 |
19 | ### performance timming时段结构图参考
20 |
21 |
22 | 
23 |
24 |
25 |
--------------------------------------------------------------------------------
/effect.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fredshare/performance/ba2ea08bb38332627ad9aaaf62a675ce25cf14fe/effect.png
--------------------------------------------------------------------------------
/install.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fredshare/performance/ba2ea08bb38332627ad9aaaf62a675ce25cf14fe/install.png
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "performance",
3 | "manifest_version": 2,
4 | "version": "1.0",
5 | "description": "测速统计",
6 | "minimum_chrome_version" : "17.0.0",
7 |
8 |
9 | "background": {
10 | "scripts": ["src/js/background.js"]
11 | },
12 |
13 | "browser_action": {
14 | "default_icon": "src/img/40.png" ,
15 | "default_title": "performance"
16 | },
17 |
18 | "icons": {
19 | "16": "src/img/40.png",
20 | "48": "src/img/40.png",
21 | "128": "src/img/40.png"
22 | },
23 |
24 | "permissions": [
25 | "tabs"
26 | ,"http://*/*"
27 | , "https://*/*"
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/perfomance.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fredshare/performance/ba2ea08bb38332627ad9aaaf62a675ce25cf14fe/perfomance.png
--------------------------------------------------------------------------------
/src/dom.html:
--------------------------------------------------------------------------------
1 |
142 |
--------------------------------------------------------------------------------
/src/img/16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fredshare/performance/ba2ea08bb38332627ad9aaaf62a675ce25cf14fe/src/img/16.png
--------------------------------------------------------------------------------
/src/img/40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fredshare/performance/ba2ea08bb38332627ad9aaaf62a675ce25cf14fe/src/img/40.png
--------------------------------------------------------------------------------
/src/js/background.js:
--------------------------------------------------------------------------------
1 | chrome.browserAction.onClicked.addListener(function(tab) {
2 | chrome.tabs.executeScript(null, {file: "src/js/performance.js", runAt: "document_end"});
3 | });
4 |
--------------------------------------------------------------------------------
/src/js/performance.js:
--------------------------------------------------------------------------------
1 | /**
2 | * performance.js
3 | * author: fredshare
4 | * email: 644832017@qq.dom
5 | * Date: 2014-10-24
6 | */
7 |
8 | ;+function(host){
9 | 'use strict';
10 | var performance = host.performance,timing,dnsDuration,tcpDuration,requestDuration,domDuration,whiteTime,domreadyTime,onloadTime,panel,
11 | container = '',
12 | getDom = function(str){
13 | return document.getElementById(str);
14 | },
15 | getWidth = function(){
16 | return window.innerWidth||document.documentElement.clientWidth;
17 | },
18 | setPercent = function (id, minSec) {
19 | var el = getDom('performance-'+id);
20 | var per = Math.round(minSec/onloadTime * 100);
21 | if(per){
22 | per = per * .7;
23 | }
24 | el.querySelector('.performance-color').style.width = per + '%';
25 | el.querySelector('.performance-bar-value').innerHTML = minSec + 'ms';
26 | },
27 | initDom = function (){
28 | var c;
29 | panel = getDom('performance');
30 | if(!panel){
31 | c = document.createElement('div');
32 | c.innerHTML = container;
33 | document.body.appendChild(c);
34 | //document.querySelector('#performance').style.left = '-'+(getWidth()/2)+'px';
35 | panel = getDom('performance');
36 | }
37 | },
38 | resourceHandler = function(){
39 | if(performance){
40 | var resource = performance.getEntries(),js={
41 | num:0,
42 | duration:0
43 | },css={
44 | num:0,
45 | duration:0
46 | },img={
47 | num:0,
48 | duration:0
49 | };
50 | for (var i = 0; i < resource.length; i++) {
51 | if(resource[i].initiatorType == 'img'){
52 | img.num++;
53 | img.duration += resource[i].duration;
54 | }else if(resource[i].initiatorType == 'script'){
55 | js.num++;
56 | js.duration += resource[i].duration;
57 | }else if(resource[i].initiatorType == 'css' || resource[i].initiatorType == 'link'){
58 | css.num++;
59 | css.duration += resource[i].duration;
60 | }
61 | };
62 | return {js:js,css:css,img:img};
63 | }
64 | };
65 | setTimeout(function(){
66 | if(performance){
67 | timing = performance.timing;
68 | dnsDuration = timing.domainLookupEnd - timing.domainLookupStart;
69 | tcpDuration = timing.connectEnd - timing.connectStart;
70 | requestDuration = timing.responseEnd - timing.responseStart;
71 | domDuration = timing.domComplete - timing.domInteractive;
72 | whiteTime = timing.responseStart - timing.navigationStart;
73 | domreadyTime = timing.domContentLoadedEventEnd - timing.navigationStart;
74 | onloadTime = timing.loadEventEnd - timing.navigationStart;
75 | initDom();
76 | var resource = resourceHandler();
77 | document.querySelector('#performance-js').querySelector('.performance-color').innerHTML = resource.js.num;
78 | document.querySelector('#performance-js').querySelector('.performance-bar-value').innerHTML = (resource.js.duration/1000).toFixed(2) +'s';
79 | document.querySelector('#performance-css').querySelector('.performance-color').innerHTML = resource.css.num;
80 | document.querySelector('#performance-css').querySelector('.performance-bar-value').innerHTML = (resource.css.duration/1000).toFixed(2) +'s';
81 | document.querySelector('#performance-img').querySelector('.performance-color').innerHTML = resource.img.num;
82 | document.querySelector('#performance-img').querySelector('.performance-bar-value').innerHTML = (resource.img.duration/1000).toFixed(2) +'s';
83 | setTimeout(function () {
84 | document.querySelector('.performance').classList.add('anim');
85 | setPercent('dnsDuration', dnsDuration);
86 | setPercent('tcpDuration', tcpDuration);
87 | setPercent('requestDuration', requestDuration);
88 | setPercent('domDuration', domDuration);
89 | setPercent('whiteTime', whiteTime);
90 | setPercent('domreadyTime', domreadyTime);
91 | setPercent('onloadTime', onloadTime);
92 | getDom('performance-close').addEventListener('click', function(){
93 | panel.parentNode.parentNode.removeChild(panel.parentNode);
94 | });
95 | }, 20);
96 | }else{
97 | console.log('no performance api');
98 | }
99 | }, 500);
100 | }(this);
101 |
--------------------------------------------------------------------------------