About Layout in Firefox

  • 6,151 views
Uploaded on

一次同互联网前端工程师的交流用稿

一次同互联网前端工程师的交流用稿

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,151
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
107
Comments
1
Likes
31

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. about:layout jmi@mozilla.com
  • 2. Browser Basics * Borrowed from Douglas Crockford’s Lecture on “Theory of DOM”
  • 3. Browser Basics • The Browser has an event- driven, single-threaded, asynchronous programming model. * Borrowed from Douglas Crockford’s Lecture on “Theory of DOM”
  • 4. Browser Tasks • Loading • Parsing • Script Execution • Layout • Style Resolution • Paint * Picture comes from the IE blog introducing hardware acc • Event Handling
  • 5. Layout Input ? Output
  • 6. Layout Input Layout Output
  • 7. Layout Input Layout Output where things go on the screen / paper
  • 8. Layout Input Layout Output where things go on the screen / paper
  • 9. Terms • DOM Tree • Style System • Layout jobs: • Frames • Reflow
  • 10. Terms • DOM Tree • Style System • Layout jobs: • Frames • Reflow
  • 11. Basic Flows
  • 12. Frames • An encapsulation of a region on the screen; • A region that contains geometry, e.g. size, location, stacking order; • 1..* correspondence between content elements and frames; • Got style contexts from Style System;
  • 13. Frames <p> We need documentation for users, web developers, and developers working on Mozilla. Much of the existing code <b>isn’t very well documented</b>. In the process • of figuring things out, try and document your discoveries. Frames are RECTANGLEs. </p> • Block vs Line (inline) • BLOCK is composed of 1..* LINEs. • LINE is a single row of text or other presentational elements. • Width of BLOCK changed, contents of LINEs must be reformatted.
  • 14. Frame Tree <div border=”10” padding=”20”> <p>what fox has jumped ... ? </p> • Root Frame (<html>) </div> • nsIFrame, nsFrame ... Root Frame Div Frame what fox ...
  • 15. Frame Tree <div border=”10” padding=”20”> <p>what fox has jumped ... ? </p> • Root Frame (<html>) </div> • nsIFrame, nsFrame ... Root Frame Div Frame what fox ...
  • 16. Reflow • After Frames are created, “REFLOW” them to format! • REFLOW is the process by which the GEOMETRY of the layout engine’s formatting objects are COMPUTED. • Geometry: x, y, w, h • Computed hierarchically. • HTML uses a flow based layout model, • left-right, top-bottom, 1 pass • out-of-flow: floats, absolute positioned, ... • Table: more than 1 pass
  • 17. Reflow, How? <div border=”10” padding=”20”> <p>what fox has jumped ... ? </p> </div> Root Frame • Reflow State: • Constrained info about Reflow State Reflow Metrics parent frames; • passed to child frames Div Frame • Reflow Metrics: • to send geo info back • Reflow State Reflow Metrics dimension of child what fox ...
  • 18. Reflow, When? • Initial page load • Browser window resize • DOM nodes added or removed • div.appendChild(p) ... • Layout styles applied • element.style.height = ‘100px’; • element.style.display = ‘block’;
  • 19. Reflow is simple, right? Nope.
  • 20. Incremental Reflow DOM Coming • Goal: create parts of presentation, rather than waiting for entire doc • Resolve Style Resolve Style • Create Frame • Layout Frame Layout Frame Create Frame • In-flow vs. Out-of-flow
  • 21. Dyn Changes to DOM • to manage dynamic changes to the content model after doc is loaded and presented • content elements add, remove, modified • frames add, remove, modified • incremental reflow • queued and processed async
  • 22. After reflow: PAINT • Widgets • Views manager paints views back-to-front • walk from view to the frame, invoke nsIFrame::Paint per layer * Picture comes from the IE blog introducing hardware acc
  • 23. Summary • Imagine them all as rectangles • Think the web pages layout as the canvas, web devs are painting on it, we are controlling not controlled. • Try to keep things neat and in-flow (Floats vs clear) • Thinking in layout: all box model and geometry (rectangle again) • Practice more, embrace the tools (Firebug) and community • Fire bugs to browsers makers, :)
  • 24. Summary of Summary
  • 25. Summary of Summary Rectangles
  • 26. Questions & Discussion References: “gecko reflow layout site:developer.mozilla.org”