8000 FrontEnd 4.2/1: Finished · JayAyAre/PyScript-vs-JavaScript@95361e6 · GitHub
[go: up one dir, main page]
Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 95361e6

Browse files
JayAyAreJayAyAre
committed
FrontEnd 4.2/1: Finished
1 parent ac421a2 commit 95361e6

File tree

16 files changed

+386
-220
lines changed

16 files changed

+386
-220
lines changed

‎Astro-TFG/public/scripts/4.1-calculos-matematicos/prueba-1/version-1/javascript/main.js

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,19 @@ function multiplyMatrices(size) {
3838

3939
window.runJSBenchmark = function () {
4040
clearCell("javascript-output");
41-
document.getElementById("javascript-output").textContent = ""
42-
multiplyMatrices(300);
41+
window.showExecutionLoader();
42+
43+
requestAnimationFrame(() => {
44+
setTimeout(() => {
45+
document.getElementById("javascript-output").textContent = ""
46+
multiplyMatrices(300);
47+
let memoryDiv = document.createElement("div");
48+
memoryDiv.textContent = getMemoryUsageJS();
49+
document.getElementById("javascript-output").appendChild(memoryDiv);
50+
window.hideExecutionLoader();
51+
}, 0);
52+
});
4353

44-
let memoryDiv = document.createElement("div");
45-
memoryDiv.textContent = getMemoryUsageJS();
46-
document.getElementById("javascript-output").appendChild(memoryDiv);
4754
}
4855

4956
function getMemoryUsageJS() {

‎Astro-TFG/public/scripts/4.1-calculos-matematicos/prueba-1/version-2/javascript/main.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,13 @@ async function multiplyMatrices(size) {
3131

3232
window.runJSBenchmark = async function () {
3333
clearCell("javascript-output");
34+
window.showExecutionLoader();
3435

3536
await multiplyMatrices(500);
3637
await multiplyMatrices(1000);
3738
await multiplyMatrices(2000);
39+
40+
window.hideExecutionLoader();
3841
}
3942

4043
function getMemoryUsageJS() {

‎Astro-TFG/public/scripts/4.1-calculos-matematicos/prueba-2/version-1/javascript/main.js

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,21 @@ function primes_to_n(size) {
4444
document.getElementById("javascript-output").appendChild(resultDiv);
4545
}
4646

47-
window.runJSBenchmark = async function () {
47+
window.runJSBenchmark = function () {
4848
clearCell("javascript-output");
49-
document.getElementById("javascript-output").textContent = ""
50-
primes_to_n(1_000_000);
51-
let memoryDiv = document.createElement("div");
52-
memoryDiv.textContent = getMemoryUsageJS();
53-
document.getElementById("javascript-output").appendChild(memoryDiv);
49+
window.showExecutionLoader();
50+
51+
requestAnimationFrame(() => {
52+
setTimeout(() => {
53+
document.getElementById("javascript-output").textContent = ""
54+
primes_to_n(1_000_000);
55+
let memoryDiv = document.createElement("div");
56+
memoryDiv.textContent = getMemoryUsageJS();
57+
document.getElementById("javascript-output").appendChild(memoryDiv);
58+
window.hideExecutionLoader();
59+
}, 0);
60+
});
61+
5462
}
5563

5664
function getMemoryUsageJS() {

‎Astro-TFG/public/scripts/4.1-calculos-matematicos/prueba-2/version-2/javascript/main.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,13 @@ function benchmarkPrimesJS(repetitions, n) {
4848
`;
4949
}
5050

51-
window.runJSBenchmark = async function () {
51+
window.runJSBenchmark = function () {
5252
document.getElementById("javascript-output").textContent = "";
53-
benchmarkPrimesJS(1000, 10_000);
53+
window.showExecutionLoader();
54+
requestAnimationFrame(() => {
55+
setTimeout(() => {
56+
benchmarkPrimesJS(1000, 10_000);
57+
window.hideExecutionLoader();
58+
}, 0);
59+
});
5460
}

‎Astro-TFG/public/scripts/4.1-calculos-matematicos/prueba-3/version-1/javascript/main.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,15 @@ function n_digits_pi(repetitions, digits) {
5454
outputDiv.appendChild(avgMemoryDiv);
5555
}
5656

57-
window.runJSBenchmark = async function () {
57+
window.runJSBenchmark = function () {
5858
clearCell("javascript-output");
59-
n_digits_pi(1_000, 1_000);
59+
window.showExecutionLoader();
60+
requestAnimationFrame(() => {
61+
setTimeout(() => {
62+
n_digits_pi(1_000, 1_000);
63+
window.hideExecutionLoader();
64+
}, 0);
65+
});
6066
}
6167

6268
function clearCell(elementId) {

‎Astro-TFG/public/scripts/4.1-calculos-matematicos/prueba-3/version-2/javascript/main.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,17 @@ async function n_digits_pi(repetitions, digits) {
7878
`;
7979
}
8080

81-
window.runJSBenchmark = async function () {
81+
window.runJSBenchmark = function () {
8282
clearCell("javascript-output");
83-
n_digits_pi(10, 10_000);
83+
window.showExecutionLoader();
84+
85+
requestAnimationFrame(() => {
86+
setTimeout(() => {
87+
n_digits_pi(10, 10_000);
88+
window.hideExecutionLoader();
89+
}, 0);
90+
});
91+
8492
}
8593

8694
function clearCell(elementId) {

‎Astro-TFG/public/scripts/4.2-procesamiento-datos/prueba-1/version-1/javascript/main.js

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,15 @@ function doOperations(size) {
5656

5757
const measureMemory = () => {
5858
const current = performance.memory.usedJSHeapSize / (1024 * 1024);
59-
max_memory = Math.abs(Math.max(max_memory, current));
59+
max_memory = Math.max(max_memory, current);
6060
return current;
6161
};
6262

6363
let start_op = performance.now();
6464
createDataStructure(my_list, size);
6565
metrics['create'] = {
66-
'time': performance.now() - start_op,
67-
'memory': measureMemory()
66+
time: performance.now() - start_op,
67+
memory: measureMemory()
6868
};
6969

7070
const operations = [
@@ -77,43 +77,47 @@ function doOperations(size) {
7777

7878
for (const [op_name, op_func, args] of operations) {
7979
start_op = performance.now();
80-
8180
if (window.gc) window.gc();
8281

83-
8482
const mem_before = measureMemory();
8583
op_func(...args);
8684
const mem_after = measureMemory();
8785

8886
metrics[op_name] = {
89-
'time': performance.now() - start_op,
90-
'memory': Math.abs(mem_after - mem_before)
87+
time: performance.now() - start_op,
88+
memory: Math.abs(mem_after - mem_before)
9189
};
9290
}
9391

9492
metrics['output'] = {
95-
'total_time': performance.now() - start_total,
96-
'memory_peak': max_memory
93+
total_time: performance.now() - start_total,
94+
memory_peak: max_memory
9795
};
9896

97+
const outputElement = document.getElementById("javascript-output");
98+
if (!outputElement) return;
99+
outputElement.innerHTML = "";
100+
99101
for (const [op, data] of Object.entries(metrics)) {
100-
if (op !== 'output') {
101-
let element = document.getElementById(`javascript-${op}`);
102-
if (element) {
103-
element.innerHTML = `${op.toUpperCase()} - Time: ${data.time.toFixed(2)} ms | RAM: ${data.memory.toFixed(2)} MB`;
104-
}
105-
}
102+
if (op === 'output') continue;
103+
const line = `${op.toUpperCase()} - Time av. : ${data.time.toFixed(2)} ms | RAM: ${data.memory.toFixed(2)} MB`;
104+
outputElement.innerHTML += line + "<br>";
106105
}
107106

108-
const outputElement = document.getElementById("javascript-output");
109-
if (outputElement) {
110-
outputElement.innerHTML =
111-
`TOTAL - Time: ${metrics['output'].total_time.toFixed(2)} ms | ` +
112-
`RAM Peak: ${metrics['output'].memory_peak.toFixed(2)} MB`;
113-
}
107+
outputElement.innerHTML += "<br>";
108+
const tot = metrics['output'];
109+
const totalLine = `TOTAL - Time: ${tot.total_time.toFixed(2)} ms | RAM Peak: ${tot.memory_peak.toFixed(2)} MB`;
110+
outputElement.innerHTML += totalLine;
114111
}
115112

116-
function runJSBenchmark() {
117-
clearCell("javascript");
118-
doOperations(10_000_000);
119-
}
113+
window.runJSBenchmark = function () {
114+
clearCell("javascript-output");
115+
window.showExecutionLoader();
116+
117+
requestAnimationFrame(() => {
118+
setTimeout(() => {
119+
doOperations(10_000_000);
120+
window.hideExecutionLoader();
121+
}, 0);
122+
});
123+
};

‎Astro-TFG/public/scripts/4.2-procesamiento-datos/prueba-1/version-1/python/main.py

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,14 @@ def sort_data_structure(my_list):
2525

2626

2727
def search_in_data_structure(my_list, value):
28-
for i in range(len(my_list)):
29-
if my_list[i] == value:
28+
for item in my_list:
29+
if item == value:
3030
return True
3131
return False
3232

3333

3434
def filter_data_structure(my_list, threshold):
35-
filtered = []
36-
for i in range(len(my_list)):
37-
if my_list[i] > threshold:
38-
filtered.append(my_list[i])
39-
return filtered
35+
return [x for x in my_list if x > threshold]
4036

4137

4238
def delete_from_data_structure(my_list, value):
@@ -53,57 +49,63 @@ def do_operations(size):
5349
metrics = {}
5450
start_total = time.time()
5551

52+
# CREATE
5653
tracemalloc.start()
5754
start_op = time.time()
5855
create_data_structure(my_list, size)
59-
current_mem = tracemalloc.get_traced_memory()
60-
metrics['create'] = {
56+
current_mem = tracemalloc.get_traced_memory()[1] / (1024 * 1024)
57+
metrics['CREATE'] = {
6158
'time': (time.time() - start_op) * 1000,
62-
'memory': current_mem[1] / (1024 * 1024)
59+
'memory': current_mem
6360
}
6461
tracemalloc.stop()
6562

6663
operations = [
67-
('transform', transform_data_structure, (my_list,)),
68-
('sort', sort_data_structure, (my_list,)),
69-
('search', search_in_data_structure, (my_list, random.choice(my_list))),
70-
('filter', filter_data_structure, (my_list, 500)),
71-
('delete', delete_from_data_structure, (my_list, random.choice(my_list)))
64+
('TRANSFORM', transform_data_structure, (my_list,)),
65+
('SORT', sort_data_structure, (my_list,)),
66+
('SEARCH', search_in_data_structure, (my_list, random.choice(my_list))),
67+
('FILTER', filter_data_structure, (my_list, 500)),
68+
('DELETE', delete_from_data_structure, (my_list, random.choice(my_list)))
7269
]
7370

74-
for op_name, op_func, args in operations:
71+
for name, func, args in operations:
7572
tracemalloc.start()
7673
start_op = time.time()
7774
gc.collect()
78-
op_func(*args)
79-
current_mem = tracemalloc.get_traced_memory()
80-
metrics[op_name] = {
81-
'time': float((time.time() - start_op) * 1000),
82-
'memory': abs(current_mem[1] / (1024 * 1024))
75+
func(*args)
76+
current_mem = tracemalloc.get_traced_memory()[1] / (1024 * 1024)
77+
metrics[name] = {
78+
'time': (time.time() - start_op) * 1000,
79+
'memory': abs(current_mem)
8380
}
8481
tracemalloc.stop()
8582

8683
end_total = time.time()
87-
88-
metrics['output'] = {
89-
'total_time': float((end_total - start_total) * 1000),
90-
'memory_peak': max([op['memory'] for op in metrics.values() if 'memory' in op])
84+
metrics['TOTAL'] = {
85+
'time': (end_total - start_total) * 1000,
86+
'memory': max(m['memory'] for m in metrics.values())
9187
}
9288

89+
display("", target="pyscript-output")
90+
output_element = js.document.getElementById("pyscript-output")
91+
9392
for op, data in metrics.items():
94-
if op != 'output':
95-
display(
96-
f"{op.upper()} - Time: {data['time']:.2f} ms | RAM: {data['memory']:.2f} MB",
97-
target=f"pyscript-{op}"
98-
)
93+
if op == 'TOTAL':
94+
continue
95+
line = f"{op.upper()} - Time av. : {data['time']:.2f} ms | RAM: {data['memory']:.2f} MB"
96+
display(line, target="pyscript-output")
9997

100-
display(
101-
f"TOTAL - Time: {metrics['output']['total_time']:.2f} ms | "
102-
f"RAM Peak: {metrics['output']['memory_peak']:.2f} MB",
103-
target="pyscript-output"
104-
)
98+
output_element.innerHTML += f"""
99+
<br>
100+
"""
101+
line = f"TOTAL - Time: {metrics['TOTAL']['time']:.2f} ms | RAM Peak: {metrics['TOTAL']['memory']:.2f} MB"
102+
display(line, target="pyscript-output")
103+
js.window.hideExecutionLoader()
105104

106105

107106
def run_py_benchmark(event):
108-
js.clearCell('pyscript')
107+
js.clearCell('pyscript-output')
109108
do_operations(10_000_000)
109+
110+
111+
js.window.run_py_benchmark = run_py_benchmark

‎Astro-TFG/public/scripts/4.2-procesamiento-datos/prueba-1/version-2/javascript/main.js

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ function transform_data_structure(arr) {
66
const result = new Float64Array(arr.length);
77
for (let i = 0; i < arr.length; i++) {
88
const num = arr[i];
9-
result[i] = (num**2 + Math.log(num + 1)) / Math.sqrt(num + 1);
9+
result[i] = (num ** 2 + Math.log(num + 1)) / Math.sqrt(num + 1);
1010
}
1111
return result;
1212
}
@@ -83,24 +83,31 @@ function do_operations(size) {
8383
'memory_peak': max_memory
8484
};
8585

86+
const outputElement = document.getElementById("javascript-output");
87+
if (!outputElement) return;
88+
outputElement.innerHTML = "";
89+
90+
8691
for (const [op, data] of Object.entries(metrics)) {
87-
if (op !== 'output') {
88-
let element = document.getElementById(`javascript-${op}`);
89-
if (element) {
90-
element.innerHTML = `${op.toUpperCase()} - Time: ${data.time.toFixed(2)} ms | RAM: ${data.memory.toFixed(2)} MB`;
91-
}
92-
}
92+
if (op === 'output') continue;
93+
const line = `${op.toUpperCase()} - Time av. : ${data.time.toFixed(2)} ms | RAM: ${data.memory.toFixed(2)} MB`;
94+
outputElement.innerHTML += line + "<br>";
9395
}
9496

95-
const outputElement = document.getElementById("javascript-output");
96-
if (outputElement) {
97-
outputElement.innerHTML =
98-
`TOTAL - Time: ${metrics['output'].total_time.toFixed(2)} ms | ` +
99-
`RAM Peak: ${metrics['output'].memory_peak.toFixed(2)} MB`;
100-
}
97+
outputElement.innerHTML += "<br>";
98+
const tot = metrics['output'];
99+
const totalLine = `TOTAL - Time: ${tot.total_time.toFixed(2)} ms | RAM Peak: ${tot.memory_peak.toFixed(2)} MB`;
100+
outputElement.innerHTML += totalLine;
101101
}
102102

103-
function runJSBenchmark() {
104-
clearCell("javascript");
105-
do_operations(10_000_000);
106-
}
103+
window.runJSBenchmark = function () {
104+
clearCell("javascript-output");
105+
window.showExecutionLoader();
106+
107+
requestAnimationFrame(() => {
108+
setTimeout(() => {
109+
do_operations(10_000_000);
110+
window.hideExecutionLoader();
111+
}, 0);
112+
});
113+
};

0 commit comments

Comments
 (0)
0