前端面经——html篇

1、DOCTYPE的作用是什么？

< !DOCTYPE >声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析。否则就按照兼容模式进行解析。在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。
在HTML5之后不再需要指定DTD文档，因为HTML5以前的html文档是基于SGML的，所以需要指定DTD来定义文档中允许的属性以及一些规则。而HTML5不再基于SGML了，所以不再需要使用DTD。

2、标准模式与兼容模式各有什么区别？

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

3、HTML5为什么只需要写< !DOCTYPE HTML >, 而不需要引入DTD？

HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
而HTML 4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

4、SGML、HTML、XML和XHTML的区别？

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

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

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

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

5、DTD介绍

DTD（Doucument Type Definition 文档类型定义）是一组机器可读的规则，它们定义XML或HTML的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。
DTD是对HTML文档的声明，还会影响浏览器的渲染模式（工作模式）。

6、行内元素的定义

HTML4中，元素分成两大类，inline（内联元素）与block（块级元素）。一个行内元素只占据它对应标签的边框所包含的空间。
常见的行内元素有：a b span img strong sub button sup input label select textarea

7、块级元素定义

块级元素占据其父元素（容器）的整个宽度，因此创建了一个“块”。

常见的块级元素： div ul ol li dl dt dd h1-h6 p

8、行内元素与块级元素的区别

1. 格式上：默认情况下，行内元素不会以新行开始，而块级元素会重起一行。
2. 内容上：默认情况下，行内元素只能包含文本和其他行内元素。而块级元素可以包含行内元素和其他块级元素。
3. 行内元素与块级元素属性的不同，主要是和模型属性上：行内元素不支持设置宽高；行内元素支持水平方向的padding、border、margin；行内元素可以设置垂直方向的padding、border、margin，但是不会影响布局。

9、HTML5元素的分类

HTML4中，元素被分成两大类：inline（内联元素）和block（块级元素）。但在实际的开发过程中，因为页面表现的需要，前端工程师经常把inline元素的display值设置为block（比如a标签），也经常把block元素的display值设置为inline，之后更是出现了inline-block这一对外呈现inline，对内呈现block的属性。因此，简单地把HTML元素划分为inline与block已经不再符合实际需求。

HTML5中，元素主要分成7类：Metadata 、Flow、Sectioning、Heading、Phrasing、Embedded、Interactive
Metadata（元数据型）：位于head中，决定其他内容的样式或者行为。包括< meta >< link > < title > 等
Flow（文档流型）：大部分文档body内的元素
Sectioning（区块型）：定义区块内容范围的元素
Heading（标题型）：定义节的标题。包括< hgroup > < h1 > -< h6 >
Phrasing（语句型）：包含许多HTML4中的inline层次的元素。包括< span > < img > < sub > < sup >等
Embedded（内嵌型）：将其他资源导入（嵌入）到文档中。包括< audio > < video > < canvas >等
Interactive（交互型）：专门用来与用户交互。包括< input > < a > < select > 等

10、空元素定义

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

11、link标签定义

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

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的方式插入样式。

13、你对浏览器的理解？

浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML、也包括PDF、image以及其他格式。用户用URI（统一资源标识符）来指定所请求资源的位置。
HTML和CSS规范中规定了浏览器解析html文档的方式，由W3C组织对这些规范进行维护，W3C是负责指定web标准的组织。
简单来说浏览器可以分成两部分，shell和内核。
其中shell的种类相对比较多，内核则比较少。shell是指浏览器的外壳；例如菜单、工具栏等。主要是提供给用户界面操作，参数设置等待。它是调用内核来实现各种功能的，内核才是浏览器的核心。内核时基于标记语言显示内容的程序或者模块。也有一些浏览器并不区分外壳和内核。从Mozilla将Gecko独立出来后，才有了外壳和内核之分。

14、介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎和JS引擎。
渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据。例如使用PDF阅读器插件，可以显示pdf格式。

JS引擎：解析和执行JavaScript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

15、常见的浏览器内核比较

Trident：这种浏览器内核是IE浏览器用的内核，因为在早期IE占有大量的市场份额，所以这种内核比较流行，以前有很多网页也是根据这个内核的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好。但是由于IE的高市场占有率，微软也很长时间没有更新Trident内核就导致了Trident内核和W3C标准脱节。还有就是Trident内核的大量BUG等安全问题没有得到解决，加上一些专家学者公开认为IE浏览器不安全，使很多用户开始转向其他浏览器。

Gecko：这是Firefox和Flock所采用的内核，这个内核的优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是显而易见的要消耗很多的资源，比如内存。

Presto：Opera曾经采用的就是Presto内核，Presto内核被称为公认的浏览器网页速度最快的内核，这得益于他在开发时候的天生优势，在处理JS脚本等脚本语言时，会比其他的内核快3倍左右，缺点就是为了达到很快的速度而丢掉了一部分网页兼容性。

Webkit:Webkit是Safari采用的内核，它的优点就是网页浏览速度比较快，虽然比不上Presto但是也胜于Gecko和Trident，缺点是对于网页代码的容错性不高，也就是说对网页代码的兼容性较低，会使一些编写不标准的网页无法正确的显示。Webkit前身是KDE小组的KHTML引擎，可以说Webkit是KHTML的一个开源的分支。

Blink：谷歌在Chromium Blog上发表博客，称将与苹果的开源浏览器核心Webkit分道扬镳，在Chromium 项目中研发Blink渲染引擎（即浏览器核心），内置于Chrom浏览器之中。其实Blink引擎就是webkit的一个分支，就像webkit是KHTML的一个分支一样。Blink引擎现在是谷歌公司与Opera software 共同研发，上面提到的，Opera启用了自己的presto内核，加入Google阵营，跟随谷歌一起研发Blink。

16、常见的浏览器所用内核

1. IE：Trident
2. Chrome：Chromium，以前是Webkit，现在是Blink
3. FireFox：Gecko内核，俗称Firefox内核；
4. safari：webkit
5. opera：起初是presto，后来加入谷歌大军，从webkit又到了blink内核
6. 360、猎豹：IE+Chrome双内核
7. 搜狗、遨游、qq：Trident（兼容模式）+webkit（高速模式）
8. 百度浏览器：IE

17、浏览器的渲染原理？

1. 首先解析收到的文档，根据文档定义构建一颗DOM树，DOM树是由DOM元素及属性节点组成的。
2. 然后对CSS进行解析，生成CSSOM树。
3. 根据DOM树和CSSOM规则树构建渲染树。渲染树的结点被称为渲染对象，渲染对象是一个包含颜色和大小等属性的矩形。渲染对象和DOM元素相对应，但这种对应关系不是一对一的，不可见的DOM元素不会被插入渲染树。还有一些DOM元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。
4. 当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做 的事情就是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
5. 布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上，绘制使用UI基础组件。

值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其他内容。

18、渲染过程中遇到JS文件怎么处理？（浏览器解析过程）

JavaScript的加载、解析与执行会阻塞文档的解析，也就是说，在构建DOM时，HTML解析器如果遇到了Javascript，那么他会暂停文档的解析，将控制权移交给Javascript引擎，等Javascript引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。

也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载JS文件，这也是都建议将script标签放在body标签底部的原因。当然在当下，并不是说script标签必须放在底部，因为你可以给scrript标签添加defer或者async属性。

19、async和defer的作用是什么？有什么区别？（浏览器解析过程）

1. js脚本没有defer或者async，浏览器会立即加载并执行指定的脚本，也就是说不等待后序载入的文档元素，只要读到就加载并执行。
2. defer属性表示延迟执行引入的JavaScript，即这段Javascript加载时html并未停止解析，这两个过程是并行的。当整个document解析完毕之后再执行脚本文件，再DomContentLoaded事件触发之前完成。多个脚本按顺序执行。
3. async属性表示异步执行引入的JavaScript，与deder的区别在于，如果已经加载好，就会开始执行，也就是说它的执行仍然会阻塞文档的解析，只是它的加载过程不会阻塞。多个脚本的执行顺序无法保证。

20、什么是文档的预解析？（浏览器解析过程）

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

21、css如何阻塞文档解析？（浏览器解析过程）

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

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

22、渲染页面时常见哪些不良现象？（浏览器渲染过程）

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

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

23、如何优化关键渲染路径？（浏览器渲染过程）

为了尽快完成首次渲染，我们需要最大限度减小一下三种可变因素：

1. 关键资源的数量。
2. 关键路径的长度。
3. 关键字节的数量。

关键资源是可能组织网页首次渲染的资源。这些资源越少，浏览器的工作量就越小，对cpu以及其他资源的占用也就越少。

同样，关键路径长度受所有关键资源与其字节大小之间的依赖关系图的影响：某些资源只能在上一资源处理完毕之后才能开始下载，并且资源越大，下载所需往返次数越多。
最后，浏览器需要下载的关键字节越少，处理内容并让其出现在屏幕上的速度就越快。要减少字节数，我们可以减少资源数（将它们删除或设为非关键资源），此外还要压缩和优化各项资源，确保最大限度减小传送大小。

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

1. 对关键路径进行分析和特性描述：如资源数、字节数、长度。
2. 最大限度减少关键资源的数量：删除它们，延迟它们的下载，将它们标记为异步等。
3. 优化关键字节数以缩短下载时间（往返次数）
4. 优化其余关键资源的加载顺序：您需要尽早下载所有关键资源，以缩短关键路径长度。

24、什么是重绘和重排（回流）？（浏览器绘制过程）

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

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

1. 添加或者删除可见的DOM元素
2. 元素尺寸改变——边框、填充、边框、宽度和高度
3. 内容变化，比如用户在input框中输入文字
4. 浏览器窗口尺寸改变——resize事件发生时
5. 计算offsetwidth和offsetHeight属性
6. 设置style属性的值
7. 当你修改网页的默认字体时。

回流必定会发生重绘，但是重绘不一定引起回流。回流所需要的成本比重绘高得多，改变父节点里的子节点可能会导致父节点的一系列回流，

常见的引起重绘属性和方法：

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

25、如何减少回流？（浏览器绘制过程）

1. 使用transform代替top
2. 不要把结点的属性值放在一个循环里当成循环里的变量
3. 不要使用table布局，可能很小的一个小改动就会造成整个table的重新布局
4. 把dom离线后修改。如：使用documentFragment对象在内存里操作DOM
5. 不要一条一条地修改DOM的样式。与其这样，还不如预先定义好css的class，然后修改dom的className。

26、为什么操作DOM慢？（浏览器绘制过程）

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

27、DOMContentLoaded事件和Load事件的区别？

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

28、HTML5有哪些新特性、移除了哪些元素？

HTML5现在已经不是SGML的子集，主要是关于图像、位置、存储、多任务等功能的增加。
新增的有：
画布：canvas；
音视频：video和audio元素；
web存储：本地离线存储localstorage长期存储数据，浏览器关闭后数据不丢失。sessionstorage的数据在浏览器关闭后自动删除；
语义化更好的内容元素，比如article、footer、header、main、nav、section
表单控件：calendar、date、time、email、url、search
新的技术：webworker、websocket
新的文档属性：document.visibilityState
移除的元素有：（纯表现的元素）basefont、big、center、font、s、strike、tt、u（对可用性产生负面影响的元素）frame、frameset、noframes

29、如何处理HTML5新标签的浏览器兼容问题？

1. IE6/7/8支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式
2. 当然也可以直接使用成熟的框架，比如html5shiv；

30、简单描述一下你对HTML语义化的理解？

1. 用正确的标签做正确的事情
2. html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
3. 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
4. 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO（搜素引擎优化）。
5. 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

31、b与strong的区别和i与em的区别？

从页面显示效果来看，被< b >和< strong >包围的文字将会被加粗，而被< i >和< em >包围的文字将以斜体的方式呈现。

但是< b >< i >是自然样式标签，分别表示无意义的加粗、无意义的斜体，表现样式未{font-wight:bolder},仅仅表示这里应该用粗体/斜体显示，此两个标签在HTML4.01中并不被推荐使用。

而< em >和< strong >是语义样式标签。< em >表示一般的强调文本，而< strong > 表示比 < em >语义更强的强调文本。

使用阅读设备阅读网页时：< strong >会重读，而< b >是展示强调内容。

32、前端需要注意哪些SEO？

1. 合理的title、description、keywords：搜素对这三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2此，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可。
2. 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页。
3. 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序从上到下，有的搜索引擎对抓取长度有限制，保证重要内容肯定被抓取。
4. 重要内容不要用js输出：爬虫不会执行js获取内容。
5. 少用iframe：搜索引擎不会抓取iframe中的内容
6. 非装饰性图片必须加alt
7. 提高网站速度：网站速度是搜索引擎排序的一个重要指标

33、HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appccache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

1. 创建一个和html同名的mainfest文件，然后在页面头部加入一个mainfest的属性

 <html lang="en" manifest="index.manifest">

1. 在如下cache.manifest文件的编写离线存储的资源。

   CACHE MANIFEST
   #v0.11
   CACHE:
   js/app.js
   css/style.css
   NETWORK:
   resourse/logo.png
   FALLBACK:
   / /offline.html
   

CACHE：表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
NETWORK：表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会离线存储，也就是说CACHE的优先级更高。
FALLBACK：表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html

3. 在离线状态时，操作window.applicationCache进行离线缓存的操作。
   如何更新缓存：
   更新manifest文件
   通过JavaScript操作
   清楚浏览器缓存

注意：

1. 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点5MB）。
2. 如果mainfest文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
3. 引用manifest的html必须与manifest文件同源，在同一个域下。
4. FALLBACK中的资源必须和manifest文件同源。
5. 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
6. 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问。
7. 当manifest文件发生改变时，资源请求本身也会触发更新。

34、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件域旧的manifest文件，如果文件没有改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。离线的情况下，浏览器就直接使用离线存储的资源。

35、常见的浏览器端的存储技术有哪些？

浏览器常见的存储技术有cookie、localstorage和sessionstorage。
还有两种存储技术用于大规模数据存储，webSQL（已被废除）和indexDB。
IE支持userData存储数据，但是基本很少使用到，除非有很强的浏览器兼容需求。

36、请描述一下cookies、sessionStorage和localStorage的区别？

浏览器端常用的存储技术是cookie、localstorage和sessionstorage。
cookie其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie最多能存储4k数据，它的生存事件由expires属性指定，并且cookie只能被同源的页面访问共享。

sessionstorage是html5提供的一种浏览器本地存储的方法，它借鉴了服务器端session的概念，代表的是一次会话中所保存的数据，它一般能够存储5M或者更大的数据，它在当前窗口关闭后就失效了，并且sessionstorage只能被同一个窗口的同源页面所访问共享。

localstorage也是html5提供的一种浏览器本地存储的方法，它一般也能够存储5M或者更大的数据。它和sessionstorage不同的是，除非手动删除它，否则它不会失效，并且localstorage也只能被同源页面所访问共享。
上面几种方式都是存储少量数据的时候的存储方式，当我们需要在本地存储大量数据的时候，我们可以使用浏览器的indexDB，这是浏览器提供的一种本地的数据库存储机制。它不是关系型数据库，它内部采用对象仓库的形式存储数据，它更接近NoSQL数据库。

37、iframe有哪些缺点？

iframe元素会创建包含另外一个文档的内联框架（即行内框架）。
主要缺点有：

1. iframe会阻塞主页面的onload事件。window的onload事件需要在所有iframe加载完毕后（包含里面的元素）才会触发。在Safari和Chrome里，通过JavaScript动态设置iframe的src可以避免这种阻塞情况。
2. 搜索引擎的检索程序无法解读这种页面，不利于页面的SEO。
3. iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
4. 浏览器的后退按钮失效
5. 小型的移动设备无法完全显示框架

label的作用是什么？是怎么用的？

label标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

39、HTML5的form的自动完成功能是什么？

autocomplete属性规定输入字段是否应该启用自动完成功能。默认为启用。设置为autocomplete=off 可以关闭该功能。

自动完成允许浏览器预测对字段的输入，当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
autocomplete属性适用于< form >，以及下面的< input >类型：text、search、url、telephone、email、password、datepickers、range以及color。

40、如何实现浏览器内多个标签页之间的通信？

实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。

1. websocket协议，因为websocket协议可以实现服务器推送，所以服务器就可以用来当做这个中介者。标签页通过 向服务器发送数据，然后由服务器向其他标签页推送转发。
2. SharedWorker，sharedWorker会在页面存在的生命周期内创建一个唯一的线程，并且开启多个页面也只会使用同一个线程。这个时候共享线程就可以充当中介者的角色。标签页间通过共享一个线程，然后通过这个共享的线程来实现数据之间的交换。
3. localstorage，我们可以在一个标签页对localstorage的变化事件进行监听，然后当另一个标签页修改数据的时候，我们就可以通过这个监听事件来获取到数据。这个时候localstorage对象就是充当的中介者的角色。
4. 使用postmessage方法，如果我们能够获得对应标签页的引用，我们就可以使用postmessage方法，进行通信。

41、websocket如何兼容低版本浏览器？

Adobe Flash Socket、
ActiveX HTMLFile（IE)、
基于multipart编码发送XHR、
基于长轮询的XHR

42、页面可见性（Page Visibility API）可以有哪些用途？

这个新的API的意义在于，通过监听网页的可见性，可以预判网页的卸载，还可以用来节省资源，减缓电能的消耗。比如，一旦用户不看网页，下面这些网页行为都是可以暂停的。

1. 对服务器的轮询
2. 网页动画
3. 正在播放的音频或视频

43、如何在页面上实现一个圆形的可点击区域？

1. 纯html实现，使用< area >来给< img >图像标记热点区域的方式，< map >标签用来定义一个客户端图像映射，< area >标签用来定义图像映射中的区域，area元素永远嵌套在map元素内部，我们可以将area区域设置为圆形，从而实现可点击的圆形区域。
2. 纯css实现，使用border-radius，当border-radius的长度等于宽高相等的元素值的一半时，即可实现一个圆形的点击区域。
3. 纯js实现，哦按段一个点在不在圆上的简单算法，通过监听文档的点击事件，获取每次点击时鼠标的位置，判断该位置是否在我们规定的圆形区域内。

44、实现不适用border画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:red"></div>

45、title与h1的区别？

title属性没有明确意义只表示是个标题，h1则表示层次明确的标题，对页面信息的抓取也有很大的影响。

46、< img >的title和alt有什么区别？

title通常当鼠标滑动到元素上的时候显示
alt是< img >的特有属性，是图片内容的等价描述，用于图片无法加载时显示（图片无法加载时显示问题）、读屏器阅读图片。可提高图片的可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

47、Canvas和SVG有什么区别？

Canvas是一种通过JavaScript来绘制2D图形的方法。Canvas是逐像素来进行渲染的，因此当我们对Canvas进行缩放时，会出现锯齿或者失真的情况。
SVG是一种使用XML描述2D图形的语言。SVG基于XML，这意味着SVG DOM中的每个元素都是可用的。我们可以为某个元素附加Javascript事件监听函数，并且SVG保存的是图形的绘制方法，因此当SVG图形缩放时并不会失真。

48、网页验证码是干嘛的，是为了解决什么安全问题？

1. 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、水论坛
2. 有效防止黑客对某一个特定注册用户使用特定程序暴力破解方式进行不断的登陆尝试。

49、渐进增强和优雅降级的定义

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就根据高版本浏览器构建完整的功能，然后再针对低版本浏览器进行兼容。

50、attibute和property的区别是什么？

attribute是dom元素在文档中作为html标签拥有的属性；
property就是dom元素在js中作为对象拥有的属性。
对于html的标签属性来说，attribute和property是同步的，是会自动更新的。
但是对于自定义的属性来说，他们是不同步的 。

51、对web标准可用性、可访问性、可维护性的理解

可用性：产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业核心竞争力。

可访问性：Web内容对于残障用户的可阅读和可理解性

可维护性：一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和增进功能。

53、IE个版本和Chrome可以并行下载多少个资源？

1. IE6 2个并发
2. IE7 升级之后的6个并发，之后版本也是6个
3. Firefox、chrome也是6个

57、Flash、Ajax各自的优缺点，在使用中如何取舍？

Flash：

1. Flash适合处理多媒体、矢量图形、访问机器
2. 对CSS、处理文本上不足，不容易被搜索

Ajax：

1. Ajax对CSS、文本支持很好，支持搜索
2. 多媒体、矢量图形、机器访问不足

共同点：

1. 与服务器的无刷新传递消息
2. 可以检测用户离线和在线状态
3. 操作DOM

54、怎么重构页面？

1. 编写CSS
2. 让页面结构更合理化，提升用户体验
3. 实现良好的页面效果和提升性能

55、浏览器架构

56、常用的meta标签

< meta >元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
< meta >标签位于文档的头部，不包含任何内容。< meta >标签的属性定义了与文档相关联的名称/值对。

< !DOCTYPE html >，H5标准声明，使用HTML 5 doctype，不区分大小写
< head lang=“en” >标准的lang属性写法
< meta charset=‘utf-8’ >声明文档使用的字符编码

57、css reset和normalize.css有什么区别？

css reset是最早的一种解决浏览器间样式不兼容问题的方案，它的基本思想是将浏览器的所有样式都重置掉，从而达到所有浏览器样式保持一致的效果。但是使用这种方法，可能会带来一些性能上的问题，并且对于一些元素的不必要的样式的重置，其实反而会造成画蛇添足的效果。
后面出现一种更好的解决浏览器间样式不兼容的方法，就是normalize.css ，它的思想是尽可能的保留浏览器自带的样式，通过在原有的样式的基础上进行调整，来保持各个浏览器间的样式表现一致，相对与css reset、normalize.css的方法保留了有价值的默认值，并且修复了一些浏览器的bug，而且使用normalize.css不会造成元素复杂的继承链。

58、用于预格式化文本的标签是？

预格式化就是保留文字在源码中的格式 最后显示出来样式与源码中的样式一致 所见即所得。
< pre >定义预格式文本，保持文本原有的格式。

59、DHTML是什么？

DHTML将HTML、Javascript、DOM以及CSS组合在一起，用于创造动态性更强的网页。通过Javascript和HTML DOM，能够动态地改变HTML元素的样式。DHTML实现了网页从Web服务器下载后无需再经过服务器的处理，而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如，当鼠标移动到文章段落中时，段落能够变成蓝色，或者当鼠标指针移到一个超级链接上时，会自动生成一个下拉式子链接目录等。
包括

1. 动态内容：动态地更新网页内容，可“动态”地插入、修改或删除网页的元件，例如文字、图像、标记等。
2. 动态排版样式：W3C的CSS样式表提供了设定HTML标记的字体大小、字形、样式、粗细、文字颜色、行高度、加底线或者加中间横线、缩排、与边缘距离、靠左右或置中、背景图片或颜色等排版功能，而“动态排版样式”即可“动态”地改变排版样式。

60、head标签中必不可少的是？

< head >标签用于定义文档的头部，它是所有头部元素的容器。< head >中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等待。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可以用在head部分：< base > < link >< meta >< script >< style > < titile >
< title >定义文档的标题，它是head部分中唯一必须的元素。

61、HTML5新增的表单元素有？

datalist规定输入域的选项列表，通过option创建！
keygen提供一种验证用户的可靠方法，密钥对生成器，私钥存于客户端，公钥发送到服务器，用于之后验证客户端证书！
output元素用于不同类型的输出！

62、在HTML5中，哪个方法用于获得用户的当前位置？

getCurrentPosition()

63、文档的不同注释方式

html <!–注释内容-- >
css / **注释内容 * /
javascript / * 多行注释 */ //单行注释

64、disabled和readonly的区别？

disabled指当input元素加载时禁用此元素。input内容不会随着表单提交。
readonly规定输入字段为只读，input内容会随着表单提交。
无论设置readonly还是disabled，通过js脚本都能更改input的value。

65、主流浏览器内核私有属性css前缀？

mozilla内核（firefox flock)-moz
webkit内核 （safari 、chrome）-webkit
opera内核（opera浏览器） -o
trident内核（ie浏览器） -ms

66、前端性能优化？

前端性能优化主要是为了提高页面的加载速度，优化用户的访问体验。我认为可以从这些方面来进行优化。
第一个方面是页面的内容方面

1. 通过文件合并、css雪碧图、使用base64等方式来减少HTTP请求数，避免过多的请求造成等待的情况。
2. 通过DNS缓存等机制来减少DNS的查询次数
3. 通过设置缓存策略，对常用不变的资源进行缓存。
4. 使用延迟加载的方式，来减少页面首屏加载时需要请求的资源。延迟加载的资源当用户需要访问时，再去请求加载。
5. 通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度。

第二个方面是服务器方面

6. 使用CDN服务，来提高用户对于资源请求时的响应速度。
7. 服务器端启用Gzip、Deflate等方式对于传输的资源进行压缩，减小文件的体积。
8. 尽可能减小cookie的大小，并且通过静态资源分配到其他域名下，来避免对静态资源请求时携带不必要的cookie。

第三个方面是CSS和Javascript方面

1. 把样式表放在页面的head标签中，减少页面的首次渲染的事件
2. 避免使用@import标签
3. 尽量把js脚本放在页面底部或者使用defer或者async属性，避免脚本的加载和执行阻塞页面的渲染。
4. 通过对Javascript和css的文件进行压缩，来减小文件的体积。

67、扫描二维码登录网页是什么原理，前后两个事件是如何联系的？

浏览器获得一个临时id，通过长连接等待客户端扫描带有此id的二维码后，从长连接中获得客户端上报给server的账号信息进行展示，并在客户端点击确认后，获得服务器授信的令牌，进行随后的信息交互过程。在超时、网络断开、其他设备上登录后，此前获得的令牌或丢失、或失效，对授权过程形成有效的安全防护。

69、HTML规范中为什么要求引用资源不加协议头http或者https？

如果用户当前访问的页面是通过HTTPS协议来浏览的，那么网页中的资源也只能通过HTTPS协议来引用，否则浏览器会出现警告信息，不同浏览器警告信息展现形式不同。
为了解决这个问题，我们可以省略URL的协议声明，省略后浏览器照样可以正常引用相应的资源，这项解决方案称为protocol-relative URL，暂且可译作协议相对URL。

如果使用协议相对URL，无论是使用HTTPS还是HTTP访问页面，浏览器都会以相同的协议请求页面中的资源，避免弹出类似的警告信息，同时还可以节省5字节的数据量。