网页渲染机制

CSS和JS在网页中的放置顺序

  • css 一般放在网页顶部的 head 标签内,用 link 进行引用
  • js 一般放在 body 标签的尾部,这样可以更快地呈现页面

白屏和FOUC

  • 白屏的原因在于由 DOM 和 CSSOM 构建的渲染树未加载完成,如:
    • js 文件在前,阻塞页面渲染
  • FOUC(flash of unstyled content) 无样式内容闪烁:当样式表在结构性html之后加载时,将重新渲染页面,导致出现了短暂的闪烁现象,如
    • 使用 @import 引入的外部 css 文件会在页面下载完再进行加载
    • css 在底部时

async和defer

  • defer
      <script defer src="script.js"></script>
    
    • 只适用于外部脚本
    • 加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成,即:立即加载,延迟执行
  • async
      <script defer src="script.js"></script>
    
    • 只适用于外部脚本
    • 加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步),即不论声明先后顺序,只要加载完成便立即执行
  • 没有 defer 或 async 时,浏览器会立即加载并执行指定的脚本,即不等待后续载入的文档元素,读到就加载并执行

网页渲染机制简述

渲染基本流程

渲染引擎首先从网络获得所请求文档的内容,通常以8K分块的方式完成。获取内容后渲染引擎的基本流程:

The main flow
  • DOM,(Document Object Model),浏览器将 HTML 标签解析成树状数据结构
  • CSSOM,(CSS Object Model),浏览器将 CSS 标签解析成树状数据结构
  • Render Tree,DOM 和 CSSOM 合并后生成渲染树
  • Layout,在渲染树的基础上进行布局,计算每个节点的几何结构
  • Painting,通过显卡,将 layout 后的每个节点内容分别呈现到屏幕上
webkit 主要流程:
webkit main flow
Gecko 主要流程:
Gecko main flow
虽然 Webkit 和 Gecko 使用的术语略有不同,但是大体流程还是一致的
  • Gecko 将处理过的可见元素结构称为 "Frame Tree",每个元素都是一个 "frame";而 Webkit 则使用术语 "Render Tree",其由 "Render Objects" 组成
  • Webkit 使用 "lalyout" 来表示元素的布局,而 Gecko 则称为 "reflow"
  • Webkit 使用 "attachment" 来表示通过连接 DOM 节点和可视化信息来创建 render tree;一个非语义上的的小差别是 Gecko 在 HTML 和 DOM 树之间还有一个附加的层,称作 "conent sink",是创建 DOM 元素的工厂

refer to How browsers workdefer和async的区别 | segmentfault

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 渲染引擎及关键渲染路径(Critical Rendering Path) 通过网络模块加载到HTML文件后渲染引擎...
    饥人谷_有点热阅读 1,765评论 0 3
  • 如题,本文将简介一下 浏览器对页面的渲染的过程。 一个网页里面主要包含三大块东西,Html/CSS/JavaScr...
    hahahahaqwert阅读 476评论 0 2
  • 浏览器基本结构 浏览器结构一般包括如下:1.用户界面(User Interface):用户所看到的界面,并且与之交...
    losspm阅读 347评论 0 0
  • 1.CSS和JS在网页中的放置顺序 css的使用通过 标签引入样式表,放置在 标签里,防止渲染时出现白屏。js的使...
    leocz阅读 1,103评论 0 0
  • 网页通过浏览器展示在我们面前,说网页的渲染机制就是说浏览器怎么渲染页面的。市面上浏览器主流浏览器chrome,fi...
    leocz阅读 292评论 0 0