guawa面试题

1.HTML面试知识点总结
1.1 DOCTYPE的作用
（1）IE5.5引入了文档模式的概念，通过使用文档类型切换来实现
（2）声明位于文档第一行，告知浏览器的解析器用什么文档标准解析这个文档
（3）不存在或格式不正确会导致文档以兼容模式呈现
（4）以标准模式来进行解析文档，否则以兼容模式解析
（5）在标准模式下，解析规则按最新标准解析；在兼容模式下，向后兼容的方式来模拟老式浏览器行为，以确保一些老的网站的正确访问

1.2 标准模式和兼容模式的区别
标准模式的渲染方式 和JS引擎的解析方式都是以该浏览器支持的最高标准运行
兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作

1.3 HTML5为什么只需写,不需引入DTD
HTML5不基于SGML，则不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为

1.4 SGML、HTML、XML、XHTML的区别
SGML：标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，所有电子文档标记语言的起源
HTML：超文本标记语言，用于规定如何显示网页
XML：可扩展标记语言，是未来网页语言的发展方向，标签可以自己创建，数量无限多，而HTML固定且有限
XHTML：比HTML更严格，标签必须都用小写，必须有闭合标签

1.5 DTD介绍
DTD（Document Type Definition）是一组机器可读的规则，定义XML/HTML的特定版本中所有允许元素及属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施

1.6 行内元素的定义：只占据它对应标签的边框所包含的空间
常见：a b span img strong sub sup button input lable select textarea

1.7 块级元素的定义：占据其父元素（容器）的整个宽度
常见：div ul dl dd dt h p

1.8 行内元素和块级元素的区别
元素被分为两大类：inline（内联元素）、block（块级元素）
（1） 格式上，默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
（2） 内容上，默认情况下，行内元素只能包含文本和其他行内元素。而块级元素可以包含行内元素和其他块级元素。
（3） 行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置 width 无
效，height 无效（可以设置 line-height），设置 margin 和 padding 的上下不会对其他元素
产生影响。

1.9 HTML5 元素的分类
HTML5 中，元素主要分为 7 类：Metadata Flow Sectioning Heading Phrasing Embedded Interactive

1.10 空元素定义
标签内没有内容的 HTML 标签被称为空元素。空元素是在开始标签中关闭的。
常见的空元素有：br hr img input link meta

1.11 link标签定义
link 标签定义文档与外部资源的关系。
link 元素是空元素，它仅包含属性。 此元素只能存在于 head 部分，不过它可出现任
何次数。
link 标签中的 rel 属性定义了当前文档与被链接文档之间的关系。常见的 stylesheet
指的是定义一个外部加载的样式表。

1.12 页面导入样式时，使用 link 和 @import 有什么区别？
（1）从属关系区别。 @import 是 CSS 提供的语法规则，只有导入样式表的作用；link
是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性、引入网
站图标等
（2）加载顺序区别。加载页面时，link 标签引入的 CSS 被同时加载；@import 引入
的 CSS 将在页面加载完毕后被加载。
（3）兼容性区别。@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标
签作为 HTML 元素，不存在兼容性问题
（4）DOM 可控性区别。可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于
DOM 方法是基于文档的，无法使用 @import 的方式插入样式。

1.13 你对浏览器的理解
1.主要功能是将用户选择的web资源呈现
2.需从服务器请求资源，并显示在浏览器窗口
3.格式通常是HTML，也有PDF、image等
4.用户用URL来指定所请求资源的位置

1.14. 介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎和 JS 引擎
渲染引擎的职责就是渲染。显示 html、xml 文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型
数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式。
JS 引擎：解析和执行 javascript 来实现网页的动态效果。
JS 引擎越来越独立，内核就倾向于只指渲染引擎。

1.15 常见的浏览器内核比较 //暂不了解

1.16 常见浏览器所用内核
（1） IE ：Trident 内核，也IE 内核；
（2） Chrome ：统称为 Chromium 内核或 Chrome 内核，以前是 Webkit内核，现在是 Blink 内核；
（3） Firefox ：Gecko 内核，俗称 Firefox 内核；
（4） Safari ：Webkit 内核；
（5） Opera ：最初是自己的 Presto 内核，后来加入谷歌大军，从 Webkit又到了 Blink 内核；
（6） 360 浏览器、猎豹浏览器内核：IE + Chrome 双内核；
（7） 搜狗、遨游、QQ 浏览器内核：Trident（兼容模式）+ Webkit（高速模式）；
（8） 百度浏览器、世界之窗内核：IE 内核；
（9） 2345 浏览器内核：好像以前是 IE 内核，现在也是 IE + Chrome 双内核了；
（10）UC 浏览器内核：UC 说是他们自己研发的 U3 内核，但好像还是基于 Webkit 和 Trident ，还有说是基于火狐内核。

1.17 浏览器的渲染原理？
1.构建DOM树
2.CSSOM树
3.根据DOM树、CSSOM树构建渲染树，渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形
4.当渲染对象被创建并添加到树中，就会根据渲染树来进行布局（回流），各个节点在页面中的确切位置和大小
5.布局阶段结束后是绘制阶段。

1.18 渲染过程中遇到 JS 文件怎么处理？
在构建 DOM 时，HTML解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复继续解析文档

1.19 async 和 defer 的作用是什么？
（1）脚本没有 defer 或 async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。
（2）defer 属性表示延迟执行引入的 JavaScript，即这段 JavaScript 加载时 HTML 并未停止解析，这两个过程是并行的。
（3）async 属性表示异步执行引入的 JavaScript，与 defer 的区别在于，如果已经加载好，就会开始执行，也就是说它的执行仍然会阻塞文档的解析，只是它的加载过程不会阻塞。多个脚本的执行顺序无法保证。

1.20 什么是文档的预解析
当执行js脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源

1.21 CSS 如何阻塞文档解析？
1.22 渲染页面时常见哪些不良现象？
FOUC：样式闪烁
由于浏览器渲染机制（比如 firefox），在 CSS 加
载之前，先呈现了 HTML，就会导致展示出无样式内容，然后样式突然呈现的现象。会出现
这个问题的原因主要是 css 加载时间过长，或者 css 被放在了文档底部

白屏：有些浏览器渲染机制（比如 chrome）要先构建 DOM 树和 CSSOM 树，构建完
成后再进行渲染，如果 CSS 部分放在 HTML 尾部，由于 CSS 未加载完成，浏览器迟迟未渲
染，从而导致白屏；也可能是把 js 文件放在头部，脚本的加载会阻塞后面文档内容的解析，
从而页面迟迟未渲染出来，出现白屏问题。

1.23 如何优化关键渲染路径？
（1）关键资源的数量。
（2）关键路径长度。
（3）关键字节的数量。

1.24 什么是重绘和回流？
重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background color，我们将这样的操作称为重绘。
回流：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流