HTML基础知识 笔试 易错点（二）

浏览器渲染过程：

1.解析HTML，生成DOM树，解析CSS，生成CSSOM树。

2.将DOM树和CSSOM树结合，生成渲染树（Render tree）。

3.Layout（回流）：根据生成的渲染树，进行回流，得到节点的几何信息。

4.Painting（重绘）：根据渲染树以及回流得到的节点，获取绝对像素。

5.Display：将像素发给GPU，展示在页面上
什么是回流和重绘
　　浏览器会把获取的HTML代码解析成一个DOM树，html中的每一个元素都是DOM树的一个节点，根节点也就是我们常用的docunment对象
　　当渲染的时候遇到一部分或者全部因大小，隐藏，布局的等改变需要重新构建的时候，这时候就会发生回流，每个页面最少会发生一次回流也就是页面第一次加载，在回流的时候，浏览器会使渲染树中受到影响的部分元素失效，并重绘这个部分的渲染树，完成后，再重新绘制这部分受影响的部分，这个过程就是重绘
　　当渲染树的一些元素需要更新属性的时候，而这些属性只会影响外观，风格，不影响布局就称为重绘
　　回流必定会发生重绘，但重绘不会发生回流
　　回流会导致页面重排，影响性能
　
display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint
visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，但不可触发绑定事件
opacity=0：指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的.
　回流会导致页面重排

align ：规定 div 元素中的内容的水平对齐方式。
text-align：规定“元素中”的文本的水平对齐方式。
两个属性使用的地方不一样，但是作用一样！

align直接写在是div的属性

text-align则是Css的属性

锚伪类
在支持 css 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态和鼠标悬停状态。用来表示链接不同状态的伪类就是锚伪类。

a:link {color: green;} /* 未访问的链接 */
a:visited {color: blue;} /* 已访问的链接 */
a:hover {color:orange;} /* 鼠标移动到链接上 */
a:active {color: yellow;} /* 选定的链接 */

几个伪类必须按照一定的顺序(l-v-h-a)，a:hover必须被置于a:link和a:visited之后，才是有效的；a:active必须被置于a:hover之后，才是有效的。
书写顺序很重要：a:link - a:visited - a:hover - a:actived

repaint是某个DOM元素进行重绘；reflow是整个页面进行重排，也就是页面所有DOM元素渲染。

如何触发：

style变动造成repaint和reflow。

不涉及任何DOM元素的排版问题的变动为repaint，例如元素的color/text-align/text-decoration等等属性的变动。

除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等style的修改。

常见触发场景：

触发repaint：
color的修改，如color=#ddd；
text-align的修改，如text-align=center；
a:hover也会造成重绘。
:hover引起的颜色等不导致页面回流的style变动。
等等太多，一时间写出来也太难想了。
触发reflow：
width/height/border/margin/padding的修改，如width=778px；
动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；
appendChild等DOM元素操作；
font类style的修改；

background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，
部分background的修改只触发repaint，当然IE不用考虑；

scroll页面，这个不可避免；
resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。

读取元素的属性（这个无法理解，但是技术达人是这么说的，那就把它当做定理吧）：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；

A.relative相对自身进行偏移
B.absolute相对上一级有定位的祖先元素
C.正确的 记住就行
D.默认的盒子模型是content-box