Hướng dẫn render html js - kết xuất html js
Trình duyệt web render nội dung như thế nào?IntroCó lẽ trình duyệt web (TDW) là phần mềm được sử dụng nhiều nhất ngày nay. Trong bài viết này, tôi sẽ chỉ ra cách TDW hoạt động và đi sâu hơn là cách TDW render nội dung như thế nào. Hiện nay có 5 loại TDW chính trên desktop: Chrome, Internet Explorer, Firefox, Safari và Opera. Trên di động là Android Browser, Safari trên iPhone, Opera Mini và Opera Mobile, UC Browser, Chrome. Show Nội dung chính
Nhưng trước tiên chúng ta cần có kiến thức cơ bản về TDW. Giới thiệu cơ bản về TDWChức năng của TDWCấu trúc của TDW Cấu trúc của TDWEngine render
Engine renderTDW render nội dung như thế nào? TDW sẽ tinh chỉnh việc render như thế nào? Tại sao phải quan tâm đến vấn đề này? TDW render nội dung như thế nào?TDW sẽ tinh chỉnh việc render như thế nào?
User Interface (giao diện người dùng): bao gồm thanh địa chỉ, các nút back/forward, bookmark, menu … Engine TDW: liên kết giữa UI và engine render.Engine render: trình bày nội dung được trả về. Ví dụ như khi ta gửi request HTML thì engine này sẽ phân tích HTML, CSS và thể hiện nội dung được phân tích lên màn hình. Networking: thực hiện các request HTTP. UI: trình bày các widget, cửa sổ cho TDW. CSSNào chúng ta cùng đào sâu hơn 1 chút về các thuộc tính CSS sẽ được render ra sao trên TDW. RepaintKhi thay đổi một yếu tố style mà không ảnh hưởng đến vị trí trên trang (như ReflowKhi thay đổi có ảnh hưởng đến nội dung, cấu trúc hoặc vị trí các thành phần thì "reflow" sẽ được thực hiện. Các thay đổi này thường được thực thi bởi:
TDW sẽ tinh chỉnh việc render như thế nào?TDW sẽ hạn chế tối đa các "repaint" và "reflow" chỉ thực hiện ở vùng có sự thay đổi. Ví dụ như việc thay đổi kích thước của một thành phần 1 hoặc 2 chỉ ảnh hưởng đến chính nó và thành phần lân cận, trong khi thay đổi các thành phần 3 sẽ kích hoạt reflow lại toàn bộ.Một tinh chỉnh nữa là khi chạy các đoạn code JS, TDW sẽ cache lại thay đổi và chỉ thực hiện thay đổi trong 1 lần chạy duy nhất. Ví dụ, đoạn code này chỉ thực hiện một reflow và repaint:
Tuy nhiên, như đã nhắc đến ở trên khi truy xuất một thuộc tính của một thành phần thì sẽ kích hoạt reflow. Điều này sẽ xảy ra khi cho thêm một dòng code nữa:
Vì vậy, chúng ta nên nhóm các lần đọc các thuộc tính vào với nhau để đạt hiệu năng tốt nhất. Tuy nhiên đôi khi chúng ta muốn reflow, như khi cần thực hiện 1 animation nào nó. Ví dụ như ta gán giá trị vào cùng một thuộc tính (như "margin-left") 2 lần.
Nhìn thì có vẻ đúng nhưng khi thực hiện thì không như mong đợi. Thay đổi bị cache và chỉ thực hiện 1 lần duy nhất. Vì vậy chúng ta cần "ép" reflow bằng cách:
Và bây giờ, mọi thứ đã chạy như ý muốn. Tại sao phải quan tâm đến vấn đề này?Để tổng hợp lại, chúng ta rút ra được các kinh nghiệm như sau:
Cảm ơn các bạn đã theo dõi (bow) |