网页渲染流程


前端的web页面最终是由浏览器解析展示给用户的,熟悉这个解析渲染过程对我们开发网页是很有好处的,它能使我们更好的做好兼容性处理。它的步骤大致如下:
  1. 由从服务器接收到的 HTML 形成 DOM(文档对象模型)。
  2. 样式被加载和解析,形成 CSSOM(CSS 对象模型)。
  3. 紧接着 DOM 和 CSSOM 创建了一个渲染树,这个渲染树是一些被渲染对象的集合( Webkit 分别叫它们”renderer”和”render object”,而在Gecko 引擎中叫”frame”)。除了不可见的元素(比如 head 标签和一些有 display:none 属性的元素),渲染树映射了 DOM 的结构。在渲染树中,每一个文本字符串都被当做一个独立的 renderer。每个渲染对象都包含了与之对应的计算过样式的DOM 对象(或者一个文本块)。换句话说,渲染树描述了 DOM 的直观的表现形式。
  4. 对每个渲染元素来说,它的坐标是经过计算的,这被叫做“布局(layout)”。浏览器使用一种只需要一次处理的“流方法”来布局所有元素(tables需要多次处理)。
  5. 最后,将布局显示在浏览器窗口中,这个过程叫做“绘制(painting)”。
IT文库 » 网页渲染流程
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址