前端H5面试

前端H5面试

以下是我整理的一些面试题目，希望能帮助正在面试的码友们。
感谢CSND的朋友们的分享,感谢这个小伙伴：web H5 和CSS3面试题，写的很棒哦！

一、H5面试题目

1.常用那几种浏览器测试？有哪些内核(Layout Engine)?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

浏览器：IE，Chrome，FireFox，Safari，Opera。

内核：Trident，Gecko，Presto，Webkit。
* IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；

* png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 

  浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} 

 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

  渐进识别的方式，从总体中逐渐排除局部。 

  首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 
  接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

  css
      .bb{
       background-color:#f1ee18;/*所有识别*/
      .background-color:#00deff\9; /*IE6、7、8识别*/
      +background-color:#a200ff;/*IE6、7识别*/
      _background-color:#1e0bd1;/*IE6识别*/

      } 

*  IE下,可以使用获取常规属性的方法来获取自定义属性,
   也可以使用getAttribute()获取自定义属性;
   Firefox下,只能使用getAttribute()获取自定义属性. 
   解决方法:统一通过getAttribute()获取自定义属性.

*  IE下,even对象有x,y属性,但是没有pageX,pageY属性; 
  Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

* （条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

2.说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）

行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。
兼容性：display:inline-block;*display:inline;*zoom:1;

3.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素：a b span img input select strong

块级元素：div ul ol li dl dt dd h1 h2 h3 h4 p 等

空元素：br hr img link meta

4.清除浮动有哪些方式？比较好的方式是哪一种？

（1）父级div定义height。

（2）结尾处加空div标签clear:both。

（3）父级div定义伪类:after和zoom。

（4）父级div定义overflow:hidden。

（5）父级div定义overflow:auto.

（6）父级div也浮动，需要定义宽度。

（7）父级div定义display:table。

（8）结尾处加br标签clear:both。

5.box-sizing常用的属性有哪些？分别有什么作用？

box-sizing: content-box|border-box|inherit;
content-box:宽度和高度分别应用到元素的内容框。
border-box:通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

6.HTML5 为什么只需要写<!　DOCTYPE html> ？

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

7.如何区分 HTML 和 HTML5？

答案解析：
1）在文档类型声明上不同：
HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。

2）在结构语义上不同：
HTML：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>

8.简述一下你对HTML语义化的理解？

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

9.页面导入样式时，使用link和@import有什么区别？

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

10.html5有哪些新特性？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;

11.HTML5 废弃了哪些 HTML4 标签？

HTML5 废弃了一些过时的，不合理的 HTML 标签：
frame
frameset
noframe
applet
big
center
basefront

12.HTML5 标准提供了哪些新的 API？

HTML5 提供的应用程序 API 主要有：
Data Transfer API
Command API
Constraint Validation API
History API
Media API
Text Track API
Application Cache API
User Interaction

13.除了 audio 和 video，HTML5 还有哪些媒体标签？

HTML5 对于多媒体提供了强有力的支持，除了 audio 和 video 标签外，还支持以下标签：
<embed>标签定义嵌入的内容，比如插件。

<embed type=”video/quicktime” src=”Fishing.mov”>
<source> 对于定义多个数据源很有用。
<video width=”450″ height=”340″ controls>
     <source src=”jamshed.mp4″ type=”video/mp4″>
     <source src=”jamshed.ogg” type=”video/ogg”>
</video>

<track>标签为诸如 video 元素之类的媒介规定外部文本轨道。 用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

<video width=”450″ height=”340″ controls>
     <source src=”jamshed.mp4″ type=”video/mp4″>
     <source src=”jamshed.ogg” type=”video/ogg”>
     <track kind=”subtitles” label=”English” src=”jamshed_en.vtt” srclang=”en” default></track>
      <track kind=”subtitles” label=”Arabic” src=”jamshed_ar.vtt” srclang=”ar”></track>
</video>

14.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

输入地址

1.浏览器查找域名的 IP 地址

2.这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…

3.浏览器向 web 服务器发送一个 HTTP 请求

4.服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）

5.浏览器跟踪重定向地址

6.服务器处理请求

7.服务器返回一个 HTTP 响应

8.浏览器显示 HTML

9.浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）

10.浏览器发送异步请求

15.说说你对SVG理解?

区别:
1.link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS 范畴，只能加载 CSS 。
2.link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。
3.link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
4.link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。
SVG可缩放矢量图形（ Scalable Vector Graphics ）是基于可扩展标记语言（ XML ），用于描述二维矢量图形的一种图形格式。 SVG 是W3C(‘World Wide Web ConSortium’ 即 ’ 国际互联网标准组织 ') 在 2000 年 8 月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。 SVG 严格遵从 XML 语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。 SVG 于 2003 年 1 月14 日成为 W3C 推荐标准。

16.Label的作用是什么，是怎么用的？

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

<label for='Name'>Number:</label>

<input type=“ text “ name='Name' id='Name'/>

<label>Date:<input type='text' name='B'/></label>

注意:label的for属性值要与后面对应的input标签id属性值相同

<label for='Name'>Number:</label>

<input type=“ text “ name='Name' id='Name'/>

17.iframe有那些缺点？

1. iframe会阻塞主页面的Onload事件；
2. 搜索引擎的检索程序无法解读这种页面，不利于SEO;
3. iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
4. 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给
5. iframe添加src属性值，这样可以绕开以上两个问题。

18.什么情况会触发重排和重绘？

1. 添加、删除、更新 DOM 节点
2. 通过 display: none 隐藏一个 DOM 节点-触发重排和重绘
3. 通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化
4. 移动或者给页面中的 DOM 节点添加动画
5. 添加一个样式表，调整样式属性
6. 用户行为，例如调整窗口大小，改变字号，或者滚动

19、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

1. <!Doctype>声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

2. 严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。

3. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

20.请写出一些前端性能优化的方式，越多越好

1. 减少dom操作
2. 部署前，图片压缩，代码压缩
3. 优化js代码结构，减少冗余代码
4. 减少http请求，合理设置 HTTP缓存
5. 使用内容分发cdn加速
6. 静态资源缓存
7. 图片延迟加载

21.请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）

1. 使用CDN
2. 服务器开启gzip压缩
3. css样式的定义放置在文件头部
4. Javascript脚本放在文件末尾
5. 压缩Javascript、CSS代码
6. 尽可能减少DOM元素
7. 尽量减少页面中重复的HTTP请求数量
8. 使用多域名负载网页内的多个文件、图片
9. 在服务器配置Entity-Tag if-none-match
10. 在服务器端配置control-cache last-modify-date

22.常见兼容性问题？

1. png24位的图片在IE6浏览器上出现背景；
   解决方案是：做成PNG8；
2. 浏览器默认的 margin 和 padding 不同。
   解决方案是：加一个全局的*{margin:0;padding:0;}来统一。
3. IE6双边距bug：块属性标签float后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。浮动IE产生的双倍距离 #box{float:left;width:10px;margin:0 0 0 100px;} 这种情况下IE6会产生200px的距离。
   解决方法：加上_display：inline，使浮动忽略
4. IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性； Firefox下，只能使用getAttribute()获取自定义属性。
   解决方法：统一通过getAttribute()获取自定义属性。
5. IE下，even对象有x，y属性，但是没有pageX，pageY属性，但是没有x，y属性；
   解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
6. Chrome中文界面下默认会将小于 12px 的文本强制按照 12px 显示
   解决方法：可通过加入 CSS 属性 -webkt-text-size-adjust:none;
7. 超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active ；
   解决方法：改变CSS属性的排列顺序：L-V-H-A: a:link{ } a:visited{ } a:hover{ } a:active{ }