前端开发浏览器相关入门知识

浏览器网页构建相关知识

浏览器的重构

指的是改变每个元素外观时所触发的浏览器行为，比如颜色，背景等样式发生了改变而进行的重新构造新外观的过程。重构不会引发页面的重新布局，不一定伴随着回流。

回流指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置的，他的开销是非常大的，

回流可以理解为渲染树需要重新进行计算，一般最好触发元素的重构，避免元素的回流；比如通过添加类来添加css样式，而不是直接在DOM上设置，

当需要操作某一块元素时候，最好使其脱离文档流，这样就不会引起回流了，比如设置position：absolute或者fixed，或者display：none，等操作结束后再显示。

像素渲染流水线

1）下载HTML文档

2）解析HTML文档，生成DOM

3）下载文档中引用的CSS、JS

4）解析CSS样式表，生成CSSOM

5）将JS代码交给JS引擎执行

6）合并DOM和CSSOM，生成Render Tree

7）根据Render Tree进行布局layout（为每个元素计算尺寸和位置信息）

8）绘制（Paint）每个层中的元素（绘制每个瓦片，瓦片这个词与GIS中的瓦片含义相同）

9）执行图层合并（Composite Layers）

CSS sprities？

CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

为什么尽量避免用table布局？

table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。