Jquery에서 Ajax 요청을 최적화하는 방법은 무엇입니까?
저는 jquery mobile, jquery, php 백엔드를 사용하여 모바일 앱을 구축하고 있습니다.특정 페이지에서 여러 Ajax 요청을 주고받는데 이로 인해 성능이 현저히 저하되고 메모리 누수가 발생하여 낮은 네트워크 연결에서 앱이 손상되는 문제가 있습니다.
Ajax 요청을 최적화하는 가능한 방법은 무엇입니까?
참고:- 몇 가지 Ajax 요청을 주기적으로 보냅니다(예: 1초에 한 번). 일부 Ajax는 이벤트를 기반으로 전송됩니다.
먼저 정확하게 작성된 Ajax 코드는 메모리 누수가 없습니다.따라서 실제로 누수가 발생한 경우 Ajax를 사용한 것이 아니라 잘못 작성된 코드 때문일 가능성이 높습니다.
그런 다음 여러 가지 최적화를 고려할 수 있습니다.
서버에 대한 여러 요청을 하나의 더 큰 요청으로 결합합니다.이렇게 하면 서버로의 왕복 이동이 절약되고 대역폭이 절약되며 배터리가 절약되고 성능이 향상됩니다.
매초마다 여론조사를 하지 마세요.서버를 폴링하는 빈도에 대해 보다 현명하게 생각합니다.
폴링 간격을 늘려 활동 가능성에 따라 변경하거나, "긴 폴링"으로 전환하거나, webSocket으로 전환하여 폴링 없이 서버 푸시를 수행할 수 있습니다.
과도한 메모리 소비의 원인을 분석하고 버그를 수정하거나 재설계하여 이를 줄입니다.많은 Ajax 호출이 메모리를 "누출"해야 할 이유는 없습니다.배터리 수명이 단축되지만 올바르게 코드화된 경우 메모리가 누출될 필요는 없습니다.
아, 그리고 이미 존재하는 몇 가지 대규모 소셜 웹 앱을 꺼내는 것을 주저하지 말고 디버거를 열고 네트워크 탭으로 전환하여 그들이 무엇을 하고 있는지 연구하십시오.이미 이 문제를 해결한 대규모 앱에서 배우는 것이 좋습니다.
긴 폴링이 폴링보다 낫습니다.
설정된 간격으로 폴링할 경우 서버 측에서 시간 초과를 설정하고 지정된 루프 수가 될 때까지 메시지를 반환할 때까지 기다리는 것이 좋습니다.이는 SPA에 특히 적합합니다.그러나 폴링하는 경우 빈 응답이 있을 때마다 시간 간격을 늘려야 합니다.
요청을 엔티티가 아닌 이벤트별로 그룹화
10초마다 폴링하여 새 메시지를 검색한다고 가정합니다.또한 10초마다 폴링하여 더 많은 알림을 검색할 수 있습니다.두 가지 요청을 수행하는 대신 하나의 Ajax 요청만 수행하고 하나의 big jon 응답을 반환해야 하며, 이를 사용하여 클라이언트 측의 DOM 요소를 수정합니다.
가능한 경우 서버에서 보낸 이벤트 또는 소켓 사용
소켓 또는 서버에서 보낸 이벤트는 훨씬 적은 요청을 생성하며 서버 측에서 실제로 어떤 일이 발생한 경우에만 사용자에게 알립니다.여기 좋은 비교가 있습니다.
다음은 당신이 할 수 있는 몇 가지 것들입니다.
첫째로
- 모든 메모리 누수를 제거합니다.응용 프로그램을 샌드박스에 넣고 메모리 누수를 기록할 수 있는 가장 어려운 시간을 줍니다.그들을 조사하고 코드를 수정합니다.
그리고나서
요청 수를 줄입니다.응용프로그램에서 최적의 임계값을 주의 깊게 조사하고 이러한 임계값에서만 요청을 트리거합니다.가능하면 요청을 일괄 처리하여 단일 요청에 넣으십시오.
가능할 때마다 GET 요청을 사용합니다.그들은 비교적 간단하고 빠르게 행동할 것입니다.이 단계는 작업에서 많은 요청을 트리거하는 응용 프로그램에 중요합니다.
데이터 형식을 신중하게 선택합니다.일반 텍스트, JSON 또는 XML일 수 있습니다. 응용 프로그램에 미치는 영향이 가장 적은 텍스트를 파악하고 적절히 전환하십시오.가능한 경우 데이터 압축을 사용하도록 서버를 구성합니다.
서버를 최적화합니다.을 사용하세요.
Expire또는Cache-Control서버 내용의 헤더입니다. 사용ETags가능하면.콘텐츠를 CDN에 저장해 보십시오.이렇게 하면 리소스가 사용자와 지리적으로 더 가까운 위치에 배치되고 응용 프로그램이 더 빨리 작동할 수 있습니다.
또한 대화 서버를 만들거나 서버에 빠른 메시지를 보내려면 socket.io 과 같은 webSockets를 사용해야 합니다.
jQuery AJAX 통화 최적화(최소화)에는 주로 3단계가 있습니다.
- 함수를 호출할 때 완료된 콜백 함수를 인수로 전달합니다.
- 함수에서 jqXhr 개체를 반환하고 완료된 콜백을 할당합니다.
- 대신 jQuery.jax()를 사용하는 것으로 전환하고 전체 옵션 개체를 전달합니다.
다음 링크를 참조하십시오: jQuery AJAX 호출을 최적화(최소화)하는 방법
이에 대해 Ajax 호출의 캐시 기능을 사용하면 요청 중에 모든 데이터를 먼저 가져와 캐시에 저장하고 다음 번부터는 Ajax 요청이 발생하지 않고 캐시된 데이터만 사용하여 데이터를 조작할 수 있습니다.
또한 Ajax가 통화하는 동안 요청 및 전송되는 데이터의 양을 줄여 Ajax 통화 요청 및 응답 시간을 최적화할 수 있습니다.이 작업은 Ajax 호출 중에 원하지 않는 데이터를 제거해야만 수행할 수 있습니다.
그 외에는 모든 최적화는 코드와 데이터베이스 논리에 따라 달라집니다.성능을 높이고 앱 충돌을 줄이려면 최적화된 코드와 데이터베이스 로직이 도움이 됩니다.
- Ajax 콜백으로 변수 생성 및 사용
- 새 xhr 요청 인스턴스를 생성할 때마다 이 인스턴스는 콜백이 실행될 때까지 메모리에 저장됩니다.더 나은 방법은 이전 Ajax에서 새 Ajax 요청을 생성하는 것입니다. 즉, 한 번에 하나의 xhr 요청 인스턴스만 갖게 됩니다.
데이터를 서버로 전송한 후 다음과 같이 개체 데이터를 치료합니다.
array.length = 0; 개체 = null; 이미지입니다.src = "; 파일 = null;
@jfriend00이 말했듯이 Ajax 요청은 메모리 누수 문제를 발생시키지 않습니다...
이것이 아마도 당신의 코드가 하는 일입니다!
필요한 작업을 수행하는 가장 좋은 방법은 데이터 계층 서비스에서 소켓 계층을 여는 것입니다. 따라서 도메인 모델 변경이 발생하면 폴링 대신 알림을 받을 수 있습니다.
소켓 계층을 구현하지 않으려면 성능을 높일 수 있는 방법이 많지 않다고 생각합니다.
물론 코드 개선 작업(리팩터링, ecc 등) 외에도 할 수 있는 한 가지는 "테일 관리 시스템"을 구현하는 것이라고 생각합니다.
- 약속의 작동 방식 연구(es6, jQuery, Q, bluebird)
- 모든 (Ajax) 작업(약속)을 직렬화하는 방법을 아는 간단한 자바스크립트 클래스인 큐 서비스를 만듭니다.
- 컨트롤러와 데이터 계층 액세스 서비스 간에 대기열 서비스 인터포스
- 불필요한 Ajax 요청을 방지하는 단순한 경량 캐시 시스템 구현!
언급URL : https://stackoverflow.com/questions/33142163/how-to-optimize-the-ajax-requests-in-jquery
'programing' 카테고리의 다른 글
| 자바스크립트에서 "$" 기호의 의미는 무엇입니까? (0) | 2023.08.26 |
|---|---|
| jQuery를 사용하여 쿠키를 30분 안에 만료하는 방법은 무엇입니까? (0) | 2023.08.26 |
| PowerShell을 사용하여 호스트 이름에서 IP 주소 확인 (0) | 2023.08.26 |
| 텍스트 보기에서 왼쪽 그리기 가능하도록 프로그래밍 방식으로 설정 (0) | 2023.08.26 |
| 전체 레이아웃 보기 새로 고침을 강제로 적용하는 방법은 무엇입니까? (0) | 2023.08.26 |