About Layout in Firefox
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

About Layout in Firefox

  • 6,807 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,807
On Slideshare
6,611
From Embeds
196
Number of Embeds
18

Actions

Shares
Downloads
107
Comments
1
Likes
31

Embeds 196

http://onwebdev.blogspot.com 82
http://www.mijia.org 58
http://www.nodejser.com 20
http://mzhou.me 7
http://onwebdev.blogspot.co.uk 5
http://null.jsbin.com 5
http://www.hpf1908.appspot.com 4
https://si0.twimg.com 3
http://static.slidesharecdn.com 2
http://onwebdev.blogspot.in 2
http://onwebdev.blogspot.co.nz 1
http://onwebdev.blogspot.com.br 1
http://hpf1908.appspot.com 1
https://twimg0-a.akamaihd.net 1
http://cache.baidu.com 1
http://hpf1908.gotoip1.com 1
http://new.xianguo.com 1
http://snapshot.soso.com 1

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”