html面试4

html4

1.标准模式与兼容模式各有什么区别?

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

2.SGML. HTML .XML和XHTML的区别?

1. SGML是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。

2. HTML是超文本标记语言，主要是用于规定怎么显示网页。

3. XML是可扩展标记语言是未来网页语言的发展方向，XML和HTML的最大区别就在于XML的标签是可以自己创建的，数量无限多，而HTML的标签都是固定的而且数量有限。

4. XHTML也是现在基本上所有网页都在用的标记语言，他其实和HTML没什么本质的区别，标签都—样，用法也都一样,就是比 HTML更严格，比如标签必须都用小写，标签都必须有闭合标签等。

3.空元素定义

1. 标签内没有内容的HTML标签被称为空元素。空元素是在开始标签中关闭的。

2. 常见的空元素有:br hr img input link meta

4.async和defer 的作用是什么?有什么区别?(浏览器解析过程)

1. 脚本没有defer或async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。

2. defer属性表示延迟执行引入的JavaScript，即这段Javascript加载时HTML并未停止解析，这两个过程是并行的。当整个document解析完毕后再执行脚本文件，在DOMContentLoaded事件触发之前完成。多个脚本按顺序执行。

3. async属性表示异步执行引入的JavaScript，与defer的区别在于，如果已经加载好，就会开始执行，也就是说它的执行仍然会阻塞文档的解析，只是它的加载过程不会阻塞。多个脚本的执行顺序无法保证。

5.什么是文档的预解析?(浏览器解析过程)

1. Webkity和Firefox都做了这个优化，当执行JavaScript脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变DOM树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。

6.CSS如何阻塞文档解析?(浏览器解析过程)

1. 理论上，既然样式表不改变DOM 树，也就没有必要停下文档的解析等待它们，然而，存在一个问题，JavaScript脚本执行时可能在文档的解析过程中请求样式信息，如果样式还没有加载和解析，脚本将得到错误的值，显然这将会导致很多问题。

2. 所以如果浏览器尚未完成CSSOM 的下载和构建，而我们却想在此时运行脚本，那么浏览器将延迟.JavaScript脚本执行和文档的解析，直至其完成CSSOM的下载和构建。也就是说，在这种情况下卜浏览器会先下载和构建CSSOM，然后再执行JavaScript，最后再继续文档的解析。

7.渲染页面时常见哪些不良现象?(浏览器渲染过程)

1. FoUC:主要指的是样式闪烁的问题,由于浏览器渲染机制(比如firefox)，在 CSS加载之前，先呈现了HTML，就会导致展示出无样式内容，然后样式突然呈现的现象。会出现这个问题的原因主要是css加载时间过长，或者css 被放在了文档底部。

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

8.如何优化关键渲染路径?(浏览器渲染过程)

1. 关键资源的数量。

2. 关键路径长度。

3. 关键字节的数量。

   优化关键渲染路径的常规步骤如下:

   1. 对关键路径进行分析和特性描述:资源数、字节数、长度。

   2. 最大限度减少关键资源的数量:删除它们，延迟它们的下载，将它们标记为异步等。

   3. 优化关键字节数以缩短下载时间(往返次数)。

   4. 优化其余关键资源的加载顺序∶您需要尽早下载所有关键资产，以缩短关键路径长度。

9.什么是重绘和回流?(浏览器绘制过程)

重绘:当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如background-color，我们将这样的操作称为重绘。

回流:当渲染树中的一部分(或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流。

常见引起回流属性和方法:

任何会改变元素几何信息(元素的位置和尺寸大小)的操作，都会触发回流

1. 添加或者删除可见的DOM元素;

2. 元素尺寸改变——边距、填充，边框、宽度和高度

3. 内容变化，比如用户在input框中输入文字

4. 浏览器窗口尺寸改变——resize事件发生时

5. 计算offsetWidth和offsetHeight属性

6. 设置style属性的值

7. 当你修改网页的默认字体时。

10.如何减少回流?(浏览器绘制过程)

1. 使用transform替代top。

2. 不要把节点的属性值放在一个循环里当成循环里的变量。

3. 不要使用table布局，可能很小的一个小改动会造成整个table的重新布局。

4. 把 DOM离线后修改。如:使用documentFragment对象在内存里操作DOM。

5. 不要一条条改Dom。

11.为什么操作 DOM慢?(浏览器绘制过程)

一些DOM 的操作或者属性访问可能会引起页面的回流和重绘，从而引起性能上的消耗。

12.DOMContentLoaded事件和Load事件的区别?

当初始的HTML 文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表图像和子框架的加载完成。

13.简述一下你对HTML语义化的理解?

1. 用正确的标签做正确的事情。

2. html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析。

3. 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

4. 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO ;

5. 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

14.如何更新缓存:

1. 更新manifest文件。

2. 通过javascript操作。

3. 清除浏览器缓存。

15.Flash、 Ajax各自的优缺点，在使用中如何取舍?

Flash

1. Flash适合处理多媒体、矢量图形、访问机器

2. 对CSs、处理文本上不足，不容易被搜索

Ajax

1. Ajax 对CSS、文本支持很好，支持搜索

2. 多媒体、矢量图形、机器访问不足

共同点

1. 与服务器的无刷新传递消息

2. 可以检测用户离线和在线状态

3. 操作DOM

16.怎么重构页面?

1. 编写cSs

2. 让页面结构更合理化，提升用户体验

3. 实现良好的页面效果和提升性能

17.css reset和normalize.css有什么区别?

1. reset的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。

2. normalize 的理念则是尽量保留浏览器的默认样式，不进行太多的重置，而尽力让这些样式保持一致并尽可能与现代标准相符合。

3. .Normalize.css修复了浏览器的bug，它修复了常见的桌面端和移动端浏览器的 bug。这往往超出了 Reset所能做到的范畴。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的 font-size问题、在IE9中 SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

18.用于预格式化文本的标签是?

预格式化就是保留文字在源码中的格式，最后显示出来样式与源码中的样式一致所见即所得。