/ / Hiểu về gỡ lỗi và điều chỉnh trong JavaScript

Hiểu về gỡ lỗi và điều chỉnh trong JavaScript

Tối ưu hóa mã của bạn là một trong những cách hiệu quả nhất để cải thiện hiệu suất ứng dụng của bạn. Gỡ lỗi và điều chỉnh là hai kỹ thuật tối ưu hóa mã cần thiết cho JavaScript. Sử dụng cả hai kỹ thuật sẽ giúp cải thiện trải nghiệm người dùng cho ứng dụng của bạn và bạn cũng sẽ tiết kiệm cho mình kha khá tiền.


Hành vi mặc định của truy cập DOM

Trước khi đi sâu vào gỡ lỗi và điều tiết, bạn cần hiểu tại sao cả hai kỹ thuật đều quan trọng bằng cách sử dụng một số mã ví dụ.

Tạo ra một index.html tập tin và dán đoạn mã sau vào nó:

 <input type="text" />
<div>
  <b>Default:</b>
  <span id="default"></span>
</div>
<div>
  <b>Debounce:</b>
  <span id="debounce"></span>
</div>
<div>
  <b>Throttle:</b>
  <span id="throttle"></span>
</div>
<script src="script.js" />

Phần tử đầu tiên là đầu vào để thu thập thông tin. Sau đó có ba div và một nội tâm nhịp phần tử để xuất văn bản ở chế độ mặc định, gỡ lỗi và điều chỉnh. Mục đích của các yếu tố này là để chứng minh và so sánh ba kỹ thuật với nhau.

tạo script.js tệp và bắt đầu bằng cách chọn tất cả các thành phần trang:

 const input = document.querySelector('input')
const defaultText = document.getElementById('default')
const debounceText = document.getElementById('debounce')
const throttleText = document.getElementById('throttle')

Để tìm hiểu sâu về các phương thức truy cập DOM như truy vấnSelector()bạn cần hiểu duyệt DOM trong JavaScript.

Tiếp theo, thêm một trình lắng nghe sự kiện vào đầu vào. Điều này chỉ lấy bất cứ thứ gì được nhập vào biểu mẫu và chuyển nó làm nội dung bên trong của biểu mẫu đầu tiên nhịp yếu tố:

 input.addEventListener("input", e=> {
    defaultText.textContent = e.target.value
})

Khi bạn nhập nội dung nào đó vào mục nhập của mình, văn bản sẽ hiển thị trên trang như minh họa trong hình dưới đây.

Ảnh chụp màn hình của văn bản mặc định

Phương pháp in giá trị mặc định này hoạt động khi bạn chỉ làm việc cục bộ trên máy tính của mình. Quá trình này diễn ra cực kỳ nhanh chóng và sẽ không gây ra bất kỳ sự cố nào về hiệu suất cho dù kết nối mạng của bạn là gì. Điều này là do bạn chỉ đang lưu trữ cục bộ mọi thứ trên trang của mình. Sự cố phát sinh khi bạn lấy dữ liệu từ máy chủ bên ngoài.

Vấn đề khi thực hiện nhiều cuộc gọi chức năng

Hãy tưởng tượng rằng đầu vào là một hộp tự động hoàn thành. Khi bạn nhập nội dung nào đó vào hộp, nó sẽ chuyển đến máy chủ và truy vấn một loạt thông tin. Ví dụ: bạn có thể đang truy vấn cơ sở dữ liệu để truy xuất tất cả các nước đi có thuật ngữ ma trận trong đó.

Đây là vấn đề: khi bạn nhập từng ký tự, mã sẽ gửi một yêu cầu hoàn toàn mới vì đầu vào sự kiện được kích hoạt mỗi khi bạn nhập một ký tự mới.

Vì vậy, khi bạn gõ tôinó sẽ yêu cầu tất cả các phim bắt đầu bằng tôi. khi bạn làm mẹnó sẽ gửi một yêu cầu khác và trả về các phim bắt đầu bằng ma. Và như thế.

Bằng cách gõ từ ma trận, chúng tôi thực hiện sáu yêu cầu tới máy chủ của mình. Điều này không chỉ gây ra một số vấn đề về giao diện người dùng mà còn là gánh nặng lớn cho những người sử dụng mã của bạn. Điều này là do họ phải thực hiện sáu yêu cầu mạng, điều này sẽ làm chậm ứng dụng nếu họ đang kết nối chậm.

Đây là nơi mà việc gỡ lỗi và điều chỉnh phát huy tác dụng. Cả hai kỹ thuật đều giúp bạn tiết kiệm tài nguyên bằng cách thực hiện ít yêu cầu hơn. Thay vì gọi một chức năng mỗi lần, nó chỉ gọi chức năng đó sau một độ trễ đã đặt. Sự chậm trễ đó sẽ khác nhau dựa trên việc gỡ lỗi và điều chỉnh (cả hai phương pháp đều hoạt động khác nhau).

Sử dụng kỹ thuật Debounce

Thay vì gọi một hàm mỗi khi bạn nhập một ký tự vào trường nhập liệu, tính năng gỡ lỗi hoạt động bằng cách gọi hàm và đợi một khoảng thời gian xác định (ví dụ: một giây).

Nếu không có gì thay đổi trong khung thời gian đó, thì nó sẽ gọi hàm. Nhưng nếu trong một giây đó, bạn nhập một ký tự khác, nó sẽ nhận thấy sự thay đổi và đặt lại bộ hẹn giờ về thời gian trễ đã chỉ định (một giây).

Về cơ bản, việc gỡ lỗi sẽ đợi trong một khoảng thời gian (do bạn đặt) và nếu không có gì thay đổi trong thời gian đó, nó sẽ gọi hàm. Nhưng nếu có thay đổi, thì bộ đếm thời gian sẽ được đặt lại. Kỹ thuật gỡ lỗi có thể được hiểu rõ hơn với sự trợ giúp của một số mã.

Bên dưới trình lắng nghe sự kiện đầu tiên, hãy tạo một hàm có tên ra mắt. Bạn sẽ chuyển một chức năng gọi lại để gỡ lỗi, cũng như độ trễ mặc định là một giây.

 function debounce(cb, delay = 1000) {
    return (...args) => {
        setTimeout(() => {
            cb(...args)
        }, delay)
    }
}

Về cơ bản, bạn đang buộc chức năng đợi một giây trước khi chạy chức năng gọi lại. Tiếp theo, chuyển chức năng gỡ lỗi cho cập nhậtDebounceText. Cung cấp cho nó một chức năng gọi lại lấy một văn bản làm đối số và cập nhật gỡ lỗi phần tử với nội dung văn bản.

 const updateDebounceText = debounce((text) => {
    debounceText.textContent = text
})

Gọi lại là một hàm ẩn danh, là một cách đặc biệt để viết các hàm trong JavaScript. Cuối cùng, hãy gọi cho cập nhậtDebounceText chức năng bên trong trình lắng nghe sự kiện, để nó truy cập văn bản đầu vào và in nó trên trang:

 input.addEventListener("input", e=> {
    defaultText.textContent = e.target.value
    updateDebounceText(e.target.value)
})

Lưu tệp và truy cập trình duyệt của bạn. Khi bạn nhập thông tin vào biểu mẫu, bạn sẽ nhận thấy độ trễ một giây cho đến khi văn bản xuất hiện bên cạnh gỡ lỗi.

Ảnh chụp màn hình văn bản gỡ lỗi-1

Đây không chính xác là cách thức hoạt động của kỹ thuật gỡ lỗi. Bạn chỉ đang trì hoãn mọi thứ trong một giây ở đây.

Thay vào đó, bạn muốn đảm bảo rằng tất cả các lệnh gọi hàm đó cho từng ký tự không chạy cho đến khi bạn nhập xong mọi thứ. Bạn làm điều này bằng cách xóa thời gian chờ bất cứ khi nào bạn gọi hàm. Đây là mã sửa đổi cho điều đó:

 function debounce(cb, delay = 1000) {
  let timeout
    return (...args) => {
      clearTimeout(timeout)
      timeout = setTimeout(() => {
        cb(...args)
      }, delay)
    }
}

Vì vậy, mỗi khi đầu vào của bạn thay đổi, bạn gọi cập nhậtDebounceText chức năng xóa thời gian chờ ban đầu của bạn và bắt đầu bộ đếm thời gian một giây mới. Do đó, hàm này sẽ đợi cho đến khi có độ trễ ít nhất một giây trước khi chạy lại lệnh gọi lại.

Hình ảnh bên dưới chụp trang ngay sau khi nhập ký tự cuối cùng trong biểu mẫu:

Ảnh chụp màn hình của lần ra mắt thực sự

Trong trường hợp này, nó cập nhật tất cả đầu vào cùng một lúc. Điều này là do mỗi khi chúng tôi nhập một ký tự mới, bộ đếm thời gian sẽ đặt lại, đó là lý do tại sao ký tự đó không được thêm vào trang.

Gỡ lỗi thực sự hữu ích trong những tình huống này khi bạn muốn gửi thông tin sau một khoảng thời gian trễ nhất định thay vì mỗi lần cập nhật.

Hiểu về kỹ thuật bướm ga

Van tiết lưu hơi khác một chút so với kỹ thuật gỡ lỗi. Tương tự như việc gỡ lỗi, điều tiết sẽ trì hoãn cuộc gọi chức năng của bạn. Nhưng thay vì đợi cho đến khi mọi thứ hoàn thành, nó liên tục gửi một yêu cầu mới với lô thông tin mới nhất.

Vì vậy, nếu độ trễ của bạn là bốn giây, thì chức năng tiết lưu sẽ gửi lô ký tự đầu tiên, đợi trong bốn giây, sau đó gửi lô ký tự mới mà bạn đã nhập trong thời gian trễ.

Kỹ thuật điều tiết rất hữu ích khi một số thứ đang thay đổi và bạn chỉ muốn gửi bản cập nhật mới nhất. Một trường hợp sử dụng ví dụ sẽ là khi thay đổi kích thước cửa sổ hoặc cuộn cửa sổ. Bạn muốn tìm ra vị trí của người dùng, nhưng bạn không muốn gọi phương thức này hàng trăm nghìn lần.

Kỹ thuật tiết lưu sẽ giới hạn lượng điện năng mà CPU sẽ cần. Đây là chức năng bướm ga:

 function throttle(cb, delay = 1000) {
    let shouldWait = false
    return(...args) => {
        if (shouldWait) return
        cb(...args)
        shouldWait = true
        setTimeout(() => {
            shouldWait = false
        }, delay)
    }
}

Lần đầu tiên bạn gọi bướm ga(), nó sẽ ngay lập tức gọi hàm gọi lại của bạn. Và sau đó mỗi lần bạn gọi nó, nó sẽ không làm gì cho đến khi độ trễ của bạn kết thúc. Sau khi hoàn thành, bạn đặt lại Nên chờ ĐẾN SAI (chạy mã và lặp lại quy trình).

Gọi chức năng bướm ga và chuyển vào cuộc gọi lại:

 const updateThrottleText = throttle((text) => {
    throttleText.textContent = text
})

Tiếp theo, gọi hàm trong trình xử lý sự kiện:

 input.addEventListener("input", e=> {
    defaultText.textContent = e.target.value
    updateDebounceText(e.target.value)
    updateThrottleText(e.target.value)
})

Bây giờ nếu bạn nhập vào đầu vào, các ký tự sẽ được cập nhật hàng loạt trong khoảng thời gian một giây. Hình ảnh sau đây chụp trang ngay trước khi xuất loạt ký tự thứ hai (ix).

Ảnh chụp màn hình ga

Tìm hiểu thêm về Tối ưu hóa JavaScript

Mã được tối ưu hóa là điều cần thiết để tăng tốc độ và hiệu suất tổng thể của ứng dụng. JavaScript tự nhiên là một ngôn ngữ nhanh, nhưng thực hành mã hóa kém có thể cản trở hiệu suất của ứng dụng của bạn. Đây là lý do tại sao bạn cần phải làm quen với các kỹ thuật tối ưu hóa khác nhau cho mã JavaScriot nếu bạn muốn trở thành một phần trăm nhà phát triển hàng đầu.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *