-
Notifications
You must be signed in to change notification settings - Fork 0
/
long-tasks.html
121 lines (101 loc) · 4.95 KB
/
long-tasks.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Long Tasks Test Page</title>
<!-- prettier-ignore -->
<script>
LUX=(function(){var a=("undefined"!==typeof(LUX)&&"undefined"!==typeof(LUX.gaMarks)?LUX.gaMarks:[]);var d=("undefined"!==typeof(LUX)&&"undefined"!==typeof(LUX.gaMeasures)?LUX.gaMeasures:[]);var j="LUX_start";var k=window.performance;var l=("undefined"!==typeof(LUX)&&LUX.ns?LUX.ns:(Date.now?Date.now():+(new Date())));if(k&&k.timing&&k.timing.navigationStart){l=k.timing.navigationStart}function f(){if(k&&k.now){return k.now()}var o=Date.now?Date.now():+(new Date());return o-l}function b(n){if(k){if(k.mark){return k.mark(n)}else{if(k.webkitMark){return k.webkitMark(n)}}}a.push({name:n,entryType:"mark",startTime:f(),duration:0});return}function m(p,t,n){if("undefined"===typeof(t)&&h(j)){t=j}if(k){if(k.measure){if(t){if(n){return k.measure(p,t,n)}else{return k.measure(p,t)}}else{return k.measure(p)}}else{if(k.webkitMeasure){return k.webkitMeasure(p,t,n)}}}var r=0,o=f();if(t){var s=h(t);if(s){r=s.startTime}else{if(k&&k.timing&&k.timing[t]){r=k.timing[t]-k.timing.navigationStart}else{return}}}if(n){var q=h(n);if(q){o=q.startTime}else{if(k&&k.timing&&k.timing[n]){o=k.timing[n]-k.timing.navigationStart}else{return}}}d.push({name:p,entryType:"measure",startTime:r,duration:(o-r)});return}function h(n){return c(n,g())}function c(p,o){for(i=o.length-1;i>=0;i--){var n=o[i];if(p===n.name){return n}}return undefined}function g(){if(k){if(k.getEntriesByType){return k.getEntriesByType("mark")}else{if(k.webkitGetEntriesByType){return k.webkitGetEntriesByType("mark")}}}return a}return{mark:b,measure:m,gaMarks:a,gaMeasures:d}})();LUX.ns=(Date.now?Date.now():+(new Date()));LUX.ac=[];LUX.cmd=function(a){LUX.ac.push(a)};LUX.init=function(){LUX.cmd(["init"])};LUX.send=function(){LUX.cmd(["send"])};LUX.addData=function(a,b){LUX.cmd(["addData",a,b])};LUX_ae=[];window.addEventListener("error",function(a){LUX_ae.push(a)});LUX_al=[];if("function"===typeof(PerformanceObserver)&&"function"===typeof(PerformanceLongTaskTiming)){var LongTaskObserver=new PerformanceObserver(function(c){var b=c.getEntries();for(var a=0;a<b.length;a++){var d=b[a];LUX_al.push(d)}});try{LongTaskObserver.observe({type:["longtask"]})}catch(e){}};
LUX.auto = false
const pauseStart = Date.now()
while (Date.now() - pauseStart < 2000) {
// ...
}
</script>
<script src="https://cdn.speedcurve.com/js/lux.js?id=10001" async defer crossorigin="anonymous"></script>
</head>
<body>
<div id="app"></div>
<script>
window.done = false;
</script>
<script src="babel.js"></script>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
progress: 0,
};
}
render() {
const foo = "foo";
return (
<div>
<h1>JS CPU Time Canary</h1>
<p>
Calculating primes... {this.state.progress} / {this.props.n}
</p>
{this.status()}
</div>
);
}
status() {
if (this.state.progress === this.props.n) {
return <h2>Done!</h2>;
}
}
componentDidMount() {
const max = this.props.n;
const chunks = 5;
const chunkSize = max / chunks;
const processChunk = (chunkNum) => {
if (chunkNum <= chunks) {
const max = chunkNum * chunkSize;
const start = max - chunkSize;
return this.calculatePrimes(start, max)
.then(() => this.setState({ progress: max }))
.then(() => {
return new Promise((resolve) => {
setTimeout(() => resolve(processChunk(chunkNum + 1)), 100);
});
});
} else {
window.done = true;
return Promise.resolve(true);
}
};
setTimeout(() => processChunk(1), 100);
}
calculatePrimes(start, max) {
return new Promise((resolve) => {
const sieve = [];
for (let i = Math.max(start, 2); i <= max; ++i) {
if (!sieve[i]) {
for (let j = i << 1; j <= max; j += i) {
sieve[j] = true;
}
}
}
resolve(true);
});
}
}
ReactDOM.render(<App n={10000000} />, document.getElementById("app"));
</script>
<script>
const checker = setInterval(() => {
if (window.done) {
clearTimeout(checker);
const pauseStart = Date.now();
while (Date.now() - pauseStart < 2000) {
// ...
}
LUX.send();
}
}, 500);
</script>
</body>
</html>