Mẹo nhỏ: Để tìm kiếm chính xác các bài viết của Vuihecungchocopie.vn, hãy search trên Google với cú pháp: "Từ khóa" + "vuihecungchocopie". (Ví dụ: công thức giải rubik 3x3 vuihecungchocopie). Tìm kiếm ngay
54 lượt xem

Hạn chế reflow trên trình duyệt

Bạn đang xem: Hạn chế reflow trên trình duyệt Tại Vuihecungchocopie                        

Bạn đang quan tâm đến Hạn chế reflow trên trình duyệt phải không? Nào hãy cùng Vuihecungchocopie đón xem bài viết này ngay sau đây nhé, vì nó vô cùng thú vị và hay đấy!

Các trang web động rất phổ biến với xu hướng hiện tại. Tức là người dùng có thể thao tác trên đó, thay vì chỉ nhận thông tin dòng văn bản đơn giản như trước đây.

Các nhà phát triển cũng cố gắng tạo giao diện hấp dẫn để người dùng dễ sử dụng trong thực tế. Ví dụ, thay vì liệt kê các công việc dưới dạng văn bản khô khan, một số trang tạo giao diện kéo và thả cho người dùng. Giống như họ sử dụng các công cụ trong cuộc sống thực – trello là một ví dụ điển hình.

Bạn đang xem: Reflow la gi

Tuy nhiên, để thực hiện những thay đổi này, các lập trình viên thường thực hiện nhiều thao tác đối với dom và trình duyệt phải liên tục điều chỉnh lại để thay đổi kích thước định vị lại . Hiểu chỉnh sửa lại sẽ giúp tối ưu hóa và làm trơn tru việc trình bày trang web của bạn cho người dùng.

Để hiểu chỉnh lại là gì, chúng ta sẽ làm theo ví dụ sau: Điều gì sẽ xảy ra khi bạn cố gắng thay đổi chiều cao của một phần tử.

Việc thay đổi chiều cao của element không ảnh hưởng đến cấu trúc của cây DOM. Tuy nhiên cần phải tính toán lại kích thước của nó. Hạn chế reflow trên trình duyệt

Sau khi tính toán lại chiều cao. Các quy trình tiếp theo như sơn lại được thực hiện trước khi hiển thị cho trình duyệt.

Chỉnh sửa lại là gì?

reflow là một tập hợp các thủ tục mà trình duyệt tính toán lại kích thước và vị trí của các phần tử trên một trang web.

Nhưng vì quá trình chỉnh sửa lại diễn ra đồng bộ, nên chỉnh sửa lại chưa chạy xong. Sau đó, các quy trình khác chỉ cần đợi ở đó. Do đó, cần giảm thiểu chỉnh lại dòng để quá trình hiển thị trên trang diễn ra nhanh hơn.

Trong nhiều trường hợp, chỉnh sửa lại mất quá nhiều thời gian, dẫn đến tab sự cố .

Dưới đây là một số hạn chế của chỉnh sửa lại :

  • tiêu thụ cpu
  • Cần thêm thời gian để xử lý các bản vẽ có ý nghĩa
  • Cần nhiều thời gian hơn để xử lý các bức tranh giàu nội dung
  • Dưới đây là các sự kiện khiến quá trình kích hoạt chỉnh sửa lại .

    Nhận số liệu hộp

    • elem.offsetleft, elem.offsettop, elem.offsetwidth, elem.offsetheight, elem.offsetparent
    • elem.cli Bentleyft, elem.clienttop, elem.clientwidth, elem.clientheight * elem.getclientrects (), elem.getboundsclientrect ()
    • Nội dung cuộn

      • elem.scrollby (), elem.scrollto ()
      • elem.scrollintoview (), elem.scrollintoviewifneeded ()
      • elem.scrollwidth, elem.scrollheight
      • elem.scrollleft, elem.scrolltop cũng vậy
      • Xem thêm: Tường nhà là gì? Vai trò của tường trong xây dựng ra sao?

        Đặt tiêu điểm

        • elem.focus ()
        • Nhận kích thước cửa sổ

          • window.scrollx, window.scrollly
          • window.innerheight, window.innerwidth
          • window.visualviewport.height / width / offsettop / offsetleft
          • Tài liệu

            • document.scrollingelement
            • document.elementfrompoint
            • Sự kiện chuột: đọc dữ liệu bù đắp

              • mouseevt.layerx, mouseevt.layery, mouseevt.offsetx, mouseevt.offsety
              • Biểu mẫu: Đặt Lựa chọn + Tiêu điểm

                • inputelem.focus ()
                • inputelem.select (), textareaelem.select ()
                • ….

                  Để biết thêm thông tin, hãy xem: Bố cục / quy trình bắt buộc gì

                  Như chúng tôi đã nói ở phần đầu, việc phải thay đổi các yếu tố để tạo trang web động là điều quan trọng trong thời đại ngày nay.

                  Vì vậy, hãy cố gắng hạn chế chỉnh lại càng nhiều càng tốt khi thay đổi giao diện hoặc can thiệp vào các thuộc tính của phần tử.

                  Giảm thiểu chỉnh lại trình kích hoạt khi làm rối loạn các thuộc tính của phần tử

                  3.1 Chỉnh sửa hàng loạt

                  Kỹ thuật đầu tiên ở đây là thay đổi hàng loạt các phần tử, xóa chúng khỏi dom, sau đó tiếp tục thay đổi thuộc tính , sau đó thêm chúng trở lại dom.

                  Ví dụ bên dưới

                  Nếu chúng tôi không xóa phần tử chính, chúng tôi sẽ mất 3 chỉnh lại để đặt lại độ mờ, phần đệm, chiều rộng.

                  Nhưng vì chúng tôi đã xóa chúng và sau đó tạo kiểu cho chúng, chúng tôi đã lưu quy trình chỉnh sửa lại.

                  Xem thêm: Le truong hien hoa sinh nam bao nhieu

                  Lưu ý rằng phương pháp này thực sự kích hoạt hai lần chỉnh lại, vì vậy tùy thuộc vào mức độ phức tạp của quá trình, bạn nên chọn xem bạn chỉ cần thay đổi 1 phần đệm thuộc tính (tức là chỉ cần kích hoạt chỉnh lại một lần) và sau đó xóa và thêm lại nó. Nó hoạt động mà không gặp bất kỳ sự cố nào

                  Ngoài ra, bạn nên kết hợp đọc và viết câu . Tránh đọc và ghi rời rạc .

                  3.2 Tránh tuần hoàn

                  Kiểm tra các vòng lặp trong mã của bạn để đảm bảo kích hoạt chỉnh lưu lại (như element.offsetwidth) không nằm ngoài vòng lặp bằng cách sử dụng chúng làm biến.

                  Không được tối ưu hóa

                  Tốt nhất

                  3.3 Sử dụng khả năng hiển thị thay vì hiển thị

                  Trong một số trường hợp yêu cầu các phần tử ẩn / hiện , các thuộc tính khả năng hiển thị: ẩn và hiển thị: hiển thị sẽ được sử dụng thay vì hiển thị: không có và hiển thị: khối.

                  Khi ẩn với khả năng hiển thị: hidden, phần tử vẫn chiếm không gian trong cấu trúc của cây dom. Nghĩa là, việc thay đổi kích thước phần tử sẽ không xảy ra như với màn hình.

                  Vì vậy, trong những trường hợp này, phần tử không cần phải được xóa khỏi dom. Sử dụng Chế độ hiển thị: Ẩn để tránh kích hoạt chỉnh lại

                  3.4 Tạo kiểu với csstext

                  Trong một số trường hợp, cần phải thay đổi kiểu của phần tử. Cố gắng thực hiện tất cả chúng trong một lần. csstext có thể giúp bạn điều này. Thay đổi nhiều thuộc tính trong một lần chỉnh lại trình kích hoạt.

                  Không được tối ưu hóa

                  Tốt nhất

                  Trên đây, tôi đã giới thiệu một số phương pháp để hạn chế trình kích hoạt chỉnh lại, vẫn đạt được mục đích thay đổi giao diện . Có các phương pháp khác như

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *