Hi cả nhà,
Mình đang thực hiện bảo trì một dự án trên front-end sử dụng ReactJS. Cụ thể công việc là tối ưu hoá thời gian load trang. Sau khi chỉnh sửa một chút logic và cải thiện việc render, trang đã giảm thời gian tải từ 35s xuống 10s.
Vấn đề phát sinh ở đây, khi mình sử dụng performance.now() và tab netwrok của chrome để kiểm tra thời gian mà FE gửi, nhận và xử lý HTTP request (sử dụng fetch) thì thấy rằng nó cực kỳ khác nhau.
Trên tab network của Chrome, nó chỉ mất vài trăm milisecond, nhưng trên FE, nó mất tới 2-3s để hoàn thành gửi, nhận và xử lý request đó.
Cùng trang đó, mình test trên các browser khác nhau thì nhận được kết quả khác nhau, nổi bật nhất là Firefox, tốn ~1s. Chậm nhất là Chrome: 2-3s.
Mình tiếp tục copy code đó dán vô console của chrome thì chỉ mất có vài trăm milisecond.
Hàm fetch thì vô cùng đơn giản, chỉ xử lý vài việc đơn giản như này:
import React from 'react';
import './App.scss';
class MyClass {
// Other code....
fetchRequest(){
let requestOptions = {
method: 'GET', redirect: 'follow'
};
let t1 = performance.now();
fetch("http://127.0.0.1:5000/", requestOptions)
.then(response => {
const t2 = performance.now();
console.log("Time to response: ", (t2 - t1) / 1000);
response.text();
})
.then(result => {
const t2 = performance.now();
console.log("Time to parse text: ", (t2 - t1) / 1000);
console.log(result);
})
.catch(error => {
const t2 = performance.now();
console.log("Time to parse text: ", (t2 - t1) / 1000);
console.log('error', error);
});
}
}
function App() {
const handleClick = () => {
new MyClass().fetchRequest();
};
return (<div className="App">
<h1 onClick={()=>handleClick()}>Hello HTML Table with Custom Virtualization</h1>
</div>);
}
Kết quả trên các trình duyệt:
// Chrome
Time to request: 3.0208000000007451
App.js:86 Time to parse text: 3.0209000000003725
// Firefox:
Time to request: 1.1452343456456
App.js:86 Time to parse text: 1.1598659345
// Sử dụng Chrome console hoặc Posman: < 1 second
Mình thực sự chưa hiểu nguyên nhân ở đâu và khắc phục như thế nào. Nhờ mọi người chỉ giúp. Mình muốn hiểu tường tận hơn là áp code vô chạy nên nếu được mọi người cho mình xin thêm các tài liệu liên quan để hiểu hơn nhé.
Cảm ơn cả nhà.
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?