前端知识点面试题 - HTML基础篇（1）

1、浏览器渲染网页的过程

1. 解析HTML生成DOM树。
2. 解析CSS生成CSSOM规则树。
3. 将DOM树与CSSOM规则树合并在一起生成渲染树。
4. 遍历渲染树开始布局，计算每个节点的位置大小信息。
5. 将渲染树每个节点绘制到屏幕。

• 构建DOM树
  当浏览器客户端从服务器那接受到HTML文档后，就会遍历文档节点然后生成DOM树，DOM树结构和HTML标签一一对应。

需注意：

• DOM树在构建的过程中可能会被CSS和JS的加载而执行阻塞。
• display:none 的元素也会在DOM树中。
• 注释也会在DOM树中
• script标签会在DOM树中

• CSS解析
  浏览器会解析CSS文件并生成CSS规则树，在过程中，每个CSS文件都会被分析成StyleSheet对象，每个对象都包括CSS规则，CSS规则对象包括对应的选择器和声明对象以及其他对象。

需注意：

• CSS解析可以与DOM解析同进行。
• CSS解析与script的执行互斥 。
• 在Webkit内核中进行了script执行优化，只有在JS访问CSS时才会发生互斥。

• 构建渲染树（Rendr tree construction）
  通过DOM树和CSS规则树，浏览器就可以通过它两构建渲染树了。浏览器会先从DOM树的根节点开始遍历每个可见节点，让后对每个可见节点找到适配的CSS样式规则并应用。

需注意：

• Render Tree和DOM Tree不完全对应。
• display: none的元素不在Render Tree中
• visibility:hidden的元素在Render Tree中

• 渲染树布局(layout of the render tree)
  布局阶段会从渲染树的更节点开始遍历，由于渲染树的每个节点都是一个Render Object对象，包含宽高，位置，背景色等样式信息。所以浏览器就可以通过这些样式信息来确定每个节点对象在页面上的确切大小和位置，布局阶段的输出就是我们常说的盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小。

需注意：

• float元素，absoulte元素，fixed元素会发生位置偏移。
• 我们常说的脱离文档流，其实就是脱离Render Tree。

• 渲染树绘制（Painting the render tree）
  在绘制阶段，浏览器会遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。

• 阻塞渲染
  当HTML解析器被脚本阻塞时，解析器虽然会停止构建DOM，但仍然会辨识该脚本后面的资源，并进行预加载。且由于以下两点。浏览器会延迟 JavaScript 的执行和 DOM 构建：

• CSS 被默认被视为阻塞渲染的资源，因此浏览器将在 CSSOM 构建完毕前不会渲染任何已处理的内容。
• JavaScript 不仅可以读取和修改 DOM 属性，还可以读取和修改 CSSOM 属性，因此CSS解析与script的执行互斥。

正是由于以上这些原因，script标签的位置很重要我们在实际开发中应该尽量坚持以下两个原则：

• 在引入顺序上，CSS 资源先于 JavaScript 资源。
• JavaScript 应尽量少的去影响 DOM 的构建。

• 回流和重绘（reflow和repaint）
  HTML默认是流式布局的，但CSS和JS会打破这种布局，改变DOM的外观样式以及大小和位置。

• reflow（回流）：
  当浏览器发现某个部分发生了变化从而影响了布局，这个时候就需要倒回去重新渲染，大家称这个回退的过程叫 reflow。常见的reflow是一些会影响页面布局的操作，诸如Tab，隐藏等。reflow 会从 html 这个 root frame开始递归往下，依次计算所有的结点几何尺寸和位置，以确认是渲染树的一部分发生变化还是整个渲染树。reflow几乎是无法避免的，因为只要用户进行交互操作，就势必会发生页面的一部分的重新渲染，且通常我们也无法预估浏览器到底会reflow哪一部分的代码，因为他们会相互影响。
• repaint（重绘）：
  repaint则是当我们改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸和位置没有发生改变。

display:none 会触发 reflow，而visibility: hidden属性则并不算是不可见属性，它的语义是隐藏元素，但元素仍然占据着布局空间，它会被渲染成一个空框，所以visibility:hidden 只会触发 repaint，因为没有发生位置变化。

我们不能避免reflow，但还是能通过一些操作来减少回流：

• 用transform做形变和位移.
• 通过绝对位移来脱离当前层叠上下文，形成新的Render Layer。

另外有些情况下，比如修改了元素的样式，浏览器并不会立刻reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。但是在有些情况下，比如resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。

2、标签上 title 属性与 alt 属性的区别是什么？

title ：鼠标放入时提示的文字，

alt : 图片路径出错时，提示文字

3、HTML5 中的 datalist 是什么？

HTML5中的Datalist元素有助于提供文本框自动完成特性

4、浏览器内核有哪计算些？概念是什么？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。

Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink;]

Webkit内核：Safari,Chrome等。[ Chrome的：Blink（WebKit的分支）]

EdgeHTML内核：Microsoft Edge。[此内核其实是从MSHTML fork而来，删掉了几乎所有的IE私有特性]

主要分成两部分：渲染引擎（layout engineer或Rendering Engine）和 JS 引擎。

• 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户以及其他它所需要编辑、显示网络的应用程序都需要内核。
• JS引擎则：解析和执行JavaScript 来实现网页的动态效果；
  最开始渲染引擎和 JS 并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只渲染引擎。

未完待续~