共计 3 篇文章

浏览器做了什么(2)

两个主角DOM与CSSOM出场后,按照这尿性发展,应该会产生点啥基情?DOM与CSSOM合并为渲染树\nDOM与CSSOM是两个描述了两个不同方向的对象,一个是承载数据的结构内容,一个是内容样式规则。balabala...好吧其实一张图就看懂了,没图说个XX...过程是这样的:一. 从DOM根节点开始遍历多有`可视`节点这里的可视(不可视)指的是是否对渲染结构有影响的节点,如head节点,在渲染结构是不显示的,还有一些script节点等,还有一类是使用了样式`display:none`的节点,这些节点在参与合成渲染树的时候就会被忽略(但不包括样式上使用了visibility: ...

浏览器做了什么(1)

背景对之前阅读google web最佳实践关于浏览器从加载到渲染过程文章的记录一下,和小伙伴们共同学习~。浏览器从加载资源到渲染大体分为以下几步:加载资源并创建DOM树和CSSOM树DOM与CSSOM合并为渲染树,布局,渲染加载资源DOM: 所谓加载资源也没有想的那么轻松,如果是本地文件则从磁盘加载字节,如果是远程文件,则从网络上获取HTML字节,根据浏览器设置的编码规则转为相应的字符。然后浏览器会开始从这个大字符串中解析浏览器规定的HTML标签,啥<body>啊,<div>之类的标签,解析完后,浏览器会再去根据这些定义的标签来转换为以节点为基点,拥有各自属性的节点层层嵌套并组合成一颗完整的DOM树。这个过程最后行程的就是咱们平时常说的DOM-文档对象模型. ...

最小化浏览器回流的影响(译)

[原文地址](https://developers.google.com/speed/articles/reflow">原文地址, 小弟才疏学浅,如有翻译不准确的地方,还请指点,及时改正,以防耽误他人。回流是指web浏览器处理和重新计算文档中的元素的位置和几何结构,用于重新绘制部分文档或全部文档结构,因为在浏览器中回流是一种用户阻塞操作,它可以使开发人员更好的了解如果避免回流提高效率和了解DOM中各类属性(DOM深度,CSS规则性能,不同类型的样式变化)在回流时间内。有时一个单个元素的回流可以引起父元素和其他紧跟在其后面的元素回流。有很多中用户操作和标签的变动触发回流。改变浏览器窗口的大小,使用Javascript方法操作样式, ...