Hướng dẫn render trong javascript
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 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 TDWChức năng chính của TDW là trình bày nội dung trang web bạn chọn bằng cách gửi yêu cầu đến server và thể hiện chúng trên của sổ trình duyệt. Nội dung thường là tài liệu HTML nhưng cũng có thể là PDF, ảnh, XML ... Cách trình bày 1 file HTML sẽ dựa vào các thẻ HTML và nội dung CSS cũng như JS kèm theo. Cấu trúc của TDWThành phần chính của TDW gồm:
Engine renderNhư đã nhắc đến ở trên, chức năng của engine render tất nhiên là render các nội dung nhận về từ request và trình bày chúng trên màn hình TDW. Mặc định engine render có thể trình bày HTML, XML và ảnh. Nó cũng có thể trình bày các loại dữ liệu khác thông qua các plug-ins và phần mở rộng như sử dụng plug-in PDF viewer để xem PDF. Tuy nhiên trong phần này tôi chỉ tập trung đến việc trình bày các file HTML, ảnh được định dạng bởi CSS. Các TDW khác nhau sử dụng các engine render khác nhau: Internet Explorer dùng Trident, Firefox dùng Gecko, Safari dùng WebKit. Chrome and Opera (từ version 15) dùng Blink (1 fork của WebKit). TDW render nội dung như thế nào?Trình tự engine render thế hiện nội dung được thể hiện trong biểu đồ dưới đây
Các engine search (Google, Bing, Yahoo ...) không thể "nhìn" các trang web như cách chúng ta nhìn thấy mà thay vào đó sử dụng tập hợp các luật để xây dựng ra cây DOM và xem các yếu tố là một phần của cây. Ví dụ như Google sẽ hiểu rằng các từ trong trang web sẽ nằm trong thẻ
JavaScriptTuy nhiên sẽ thật là thiếu sót khi không nhắc đến JavaScript. JavaScript là một ngôn ngữ lập trình khiến mọi thứ có thể thực hiện bên trong TDW và khiến trang web có thể tương tác. Ví dụ điển hình là Popup - sẽ hiện lên khi bấm vào một nút nào đó và một cửa sổ sẽ bật lên, hiển thị trên màn hình. Điều này có nghĩa là JS có thể thực thi sau khi trang web được render trên màn hình, và khi code JS được thực thi thì nó sẽ kích hoạt re-render lại trang web. Ví dụ như nút Like trên Facebook. Ban đầu sau khi load trang bạn thấy nó là nút Like với ngón tay đưa lên. Khi bạn nhấn vào nó, ngay lập tức nó chuyển thành "Unlike" và thay đổi thành ngón tay đưa xuống. Nội dung của trang có thể được điều khiển bởi JS để thể hiện các yếu tố mà trong source code không hề có. Điều này cũng có nghĩa là search engine (không render trang) sẽ không thể biết được những gì JS đã thực hiện trên trang. 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 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) |