(1). http请求过程:
输入地址 -> DNS寻址 -> 建立TCP链接 -> 发送HTTP请求 -> 服务器端处理请求 -> 服务器端返回响应HTTP包 -> 断开tcp连接
1. 渲染引擎:
①. 浏览器有一个渲染引擎,用来渲染窗口所展示的内容:
a. 默认情况下,渲染引擎可以显示html、xml文档及图片.
b. 借助插件(一种浏览器扩展)显示其它类型数据,如PDF阅读器插件显示PDF格式.
②. 种类:
a. Firefox => Mozilla
b. Safari、Chrome => webkit
1. 渲染过程:
①. Parsing HTML to construct the DOM tree:
a. 浏览器解析HTML,构建DOM Tree(Parse HTML).
b. 将html解析成树形的数据结构.
②. 浏览器解析CSS,构建CSSOM(CSS Object Model)Tree:
a. 将css解析成树形的数据结构.
③. JavaScript:
a. js会通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.
b. 浏览器将DOM Tree和CSSOM Tree合成渲染树(Render Tree).
④. 布局(Layout):
a. 布局render树,根据生成的Render Tree,浏览器知道网页中有哪些节点、各个节点的CSS定义以及从属关系.
b. 进行回流,以计算每个节点的几何信息(屏幕中位置、大小、字体样式等):
(1). 各个节点的css定义和以及它们的从属关系.
c. 解析position、font-size、font-color、特殊的属性.
⑤. 绘制(Painting):
a. 绘制render树,根据渲染树和回流得到的几何信息,得到每个节点的绝对像素.
⑥. 展示(Display):
a. 按照计算出来的规则,将像素发送给图形处理器(GPU),展示在页面上.
⑦. reflow(回流):
a. 当浏览器发现某个部分发生了点变化影响了布局,需要倒回去重新渲染.
b. reflow会从<html>这个root frame开始递归往下,依次计算所有的结点几何尺寸和位置.
c. 只要有行为引起了页面上某些元素的占位面积、定位方式、边距的变化,都会引起它内部、周围甚至整个页面的重新渲染.
⑧. repaint(重绘):
a. 改变某个元素的背景色、文字颜色、边框颜色等不影响它周围或内部布局的属性时,屏幕的一部分要重画.
b. 但是元素的几何尺寸没有变.
(1). 回流场景:
①. 树状目录的折叠、展开:
a. 实质上是元素的显示与隐藏等,都将引起浏览器的reflow.
(1). 书写的顺序会带来什么影响?
①. css样式解析到显示至浏览器屏幕上就发生在③④⑤⑥步.
②. 解析过程:
a. 浏览器不是一获取到css样式就立马开始解析.
b. 而是根据css样式的书写顺序将之按照DOM树的结构分布render样式,完成第③步.
c. 再开始遍历每个树结点的css样式进行解析.
d. 此时的css样式的遍历顺序完全是按照之前的书写顺序.
e. 在解析过程中,一旦浏览器发现某个元素的定位变化影响布局,则需要倒回去重新渲染.
③. 如按照如下书写书序:
width: 100px;
height: 100px;
background-color: red;
position: absolute;
a. 当浏览器解析到position的时,突然发现该元素是绝对定位元素,需要脱离文档流.
b. 而之前是按照普通元素进行解析的.
c. 所以,需要重新渲染,解除该元素在文档中所占位置.
d. 由于该元素的占位发生变化,其它元素也可能会受到它回流的影响而重新排位.
e. 最终导致④步骤花费的时间太久而影响到⑤步骤的显示.
(1). render树和DOM树的区别:
a.render树的结构不等同于DOM树的结构,一些设置display:none的节点不会被放在render树中,但会在dom树中。