HTML

[tanxukun]

全称 HyperText Markup Language

元素类型

1. 块级元素：占一个独立区域，宽度100%

2. 行内元素：和其他元素在同一行

属性

• tabindex：负整数表示用tab键获取不到焦点，只能通过focus等方法获取；0表示参与，但顺序由浏览器指定；正整数表示自己设置顺序
• accesskey: 快捷键字符设置，windows通常是alt+快捷键，mac是ctrl+alt+快捷键
• spellcheck： 拼写检查

[tanxukun]

常见BOM对象

window location history screen document navigator

iframe的顶层对象是什么

window.top表示当前窗口的顶层窗口对象 window.parent 表示当前窗口的父级窗口对象

[tanxukun]

浏览器内核

IE: Trident FireFox: Gecko Safari: Webkit Chrome/Opera: Blink

[tanxukun]

回流和重绘

回流（reflow）和重绘（repaint）是浏览器渲染过程中的两个重要概念。它们都是由于DOM的变化或样式的改变引起的，但它们产生的原因和影响是不同的。

回流（Reflow）：

回流是指当DOM的尺寸、结构或布局发生变化时，浏览器重新计算元素的几何属性（比如位置、大小、布局等）和页面的布局，并重新绘制受影响的部分。回流是相对昂贵的操作，因为它会触发浏览器重新计算元素的几何属性和页面的布局，然后进行重绘。 回流会导致整个渲染流程中的多个阶段被执行，包括计算样式、构建布局树、布局、绘制等。因此，如果频繁触发回流操作，会导致页面性能下降，特别是在复杂的DOM结构和布局场景下。

常见导致回流的操作：

• 添加或删除DOM元素
• 改变元素的尺寸（宽度、高度）
• 改变元素的位置（定位、浮动）
• 改变元素的内容
• 改变元素的字体大小
• 查询某些属性或方法（如offsetTop、offsetLeft、getComputedStyle等）

重绘（Repaint）：

重绘是指当DOM的样式发生变化，但并不影响布局时，浏览器会重新绘制受影响的部分，而不会重新计算元素的几何属性和页面的布局。重绘的开销相对较小，因为它只涉及元素的外观样式的改变，不需要重新计算布局。 重绘操作通常发生在回流之后，浏览器根据最新的样式信息重新绘制元素的外观。由于重绘不涉及布局的计算，所以比回流的性能开销要小得多。

常见导致重绘的操作：

• 改变颜色、背景色等样式属性
• 改变文字样式（字体颜色、字号、字体类型等）
• 添加或删除阴影效果
• 修改透明度、visibility等样式属性

优化建议：

• 避免频繁的回流和重绘操作，合并多次操作为一次。
• 使用CSS的transform和opacity属性来代替top、left等属性，因为它们不会触发回流，而只会引起重绘。
• 将需要多次进行样式改变的元素，先设置display: none，然后进行样式修改，再将其显示出来，这样可以避免多次回流和重绘。
• 使用requestAnimationFrame()来进行动画效果，这样可以保证在浏览器下一次重绘前执行动画逻辑，减少回流和重绘的次数。