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 và đị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ó. 
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
- elem.offsetleft, elem.offsettop, elem.offsetwidth, elem.offsetheight, elem.offsetparent
- elem.cli Bentleyft, elem.clienttop, elem.clientwidth, elem.clientheight * elem.getclientrects (), elem.getboundsclientrect ()
- elem.scrollby (), elem.scrollto ()
- elem.scrollintoview (), elem.scrollintoviewifneeded ()
- elem.scrollwidth, elem.scrollheight
- elem.scrollleft, elem.scrolltop cũng vậy
- elem.focus ()
- window.scrollx, window.scrollly
- window.innerheight, window.innerwidth
- window.visualviewport.height / width / offsettop / offsetleft
- document.scrollingelement
- document.elementfrompoint
- mouseevt.layerx, mouseevt.layery, mouseevt.offsetx, mouseevt.offsety
- inputelem.focus ()
- inputelem.select (), textareaelem.select ()
- Giảm thiểu các quy tắc CSS và xóa chúng khi không cần thiết.
- Giảm độ sâu của cây DOM để tránh một loạt các thay đổi trong các nút con do các thay đổi trong các nút mẹ gây ra.
- Sử dụng flexbox
- Sử dụng nội dung văn bản thay vì văn bản bên trong.
- Tối ưu hóa hiển thị trình duyệt: Truyền trực tuyến
- Cách trình duyệt 2019 hoạt động từng bước – Tối ưu hóa giai đoạn tương tác (Phần 5)
- Giảm thiểu chỉnh lại trình duyệt
- hiệu suất web: giảm thiểu chỉnh sửa / bù đắp bố cục dom
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
Nội dung cuộn
Xem thêm: hướng dẫn tạo quảng cáo khi vào wifi làm wifi marketing
Đặt tiêu điểm
Nhận kích thước cửa sổ
Tài liệu
Sự kiện chuột: đọc dữ liệu bù đắp
Biểu mẫu: Đặt Lựa chọn + Tiêu điểm
….
Để 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: lỗi ghost xong không vào được windows
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ư
Tham khảo:
Cảm ơn bạn đã theo dõi bài viết này và đừng quên ủng hộ tôi nếu bạn thấy nó hữu ích. Hẹn gặp lại các bạn trong những bài viết tiếp theo.
Xem thêm: Nghĩa Của Từ Verbose Là Gì ? Nghĩa Của Từ Verbose Output Trong Tiếng Việt
Công khai: VUIHECUNGCHOCOPIE.VN là trang web Tổng hợp Ẩm Thực - Game hay và Thủ Thuật hàng đầu VN, thuộc Chocopie Vietnam. Mời thính giả đón xem.
Chúng tôi trân trọng cảm ơn quý độc giả luôn ủng hộ và tin tưởng!
