[关闭]
@lizlalala 2016-07-13T02:06:37.000000Z 字数 1282 阅读 444

浏览器渲染过程

web原理


1.基本过程

->解析HTML,生成DOM树
->解析css,生成渲染树(包含width,颜色等)
->对渲染树上的每一个节点定位、布局layout,确定在页面上的位置。
->遍历渲染树,绘制每一个节点

浏览器渲染基本过程

webkit:

webkit

当解析html的时候,会把新来的元素插入dom tree里面,同时去查找css
然后把对应的样式规则应用到元素上,查找样式表是按照从右到左的顺序去匹配的。

tips:(防止二次渲染)

实例

【备注】立即执行式的,并不等页面渲染完。只有用到 onload 或者  监听
*document.addEventListener("DOMContentLoaded", handler, false)

才会等到页面完成时运行 function

且有修改dom操作,会因为找不到dom报错并跳过。
此时还在head部分,浏览器只会读取,生成树,并不渲染。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注