H5C3面试题

1、什么是盒模型

盒模型，是CSS布局的基石，主要规定了元素是如何显示元素间相互关系。具体有：

content(内容）：内容的自身宽高，width和height。

padding（内边距）：盒子边缘与盒子内容之间的空白区，内填充。

border（内边框）：盒子边缘

margin（外边距）：盒子边缘以外的距离。

此外，在Ie5及更早版本中，元素的height包括的是除margin之外的所有属性的和，但在ie6之后则使用标准盒模型。

2、行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？

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

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

空元素：<br> <hr> <img> <input> <link> <meta>

区别： 1.行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列

2.块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。

3.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。

4.行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

3、简述src和href的区别

1.href:超文本引用，Hypertext Reference的缩写，指向网络资源所在的位置，建立和当前元素（锚点）或当前文档（链接之间的链接）用在link和a等元素上，用于在当前文档和引用资源之间确立联系。

2.src是source的缩写，src用于替换当前的元素，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

4、什么是css Hack

css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差(比如我们常说错位)的处理。CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器

5、什么叫优雅降级和渐进增强

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别： a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给 b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要 c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

6、px和em的区别

两者都是制作web页面时用到的单位，PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但如果改变浏览器的缩放，原本的布局就会被打破，这时候就可以使用em定义页面的字体大小，em是相对于父元素的，1em等于一倍的父元素字体大小。

EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，也比较麻烦。而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，所以rem用的更广泛。

IE6-IE8，不支持em和rem属性，px是所有浏览器都支持。

因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。

7、HTML5 为什么只需要写 <!DOCTYPE html>

HTML5 不基于 SGML，告诉浏览器解析成什么语言，这样浏览器才能获知文档类型。另外 charset 也是需要的指定的，需要注意一下，否则中文会出现乱码的情况

SGML 是标准通用标记语言

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

XML 是可扩展标记语言是未来网页语言的发展方向，可能会替代 HTML，他和 HTML 都是由 SGML 延伸转变而来的，你可以理解 SGML 是最早的版本，但现在已经淘汰不用了

XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。

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

8、Http的状态码有哪些

分类描述：

1**信息，服务器收到请求，需要请求者继续执行操作

2**成功，操作被成功接手并处理

3**重定向，需要进一步的操作已完成请求

4**客户端请求错误，请求中包含语法错误或无法完成的请求

5**服务器错误，服务器在处理请求的过程中发生了错误

1**信息状态类：

100Continue继续。客户端应继续其请求

101Switching Protocols切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议

2**信息状态类：

200OK请求成功。一般用于GET与POST请求

201Created已创建。成功请求并创建了新的资源

202Accepted已接受。已经接受请求，但未处理完成

203Non-Authoritative Information非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本

204No Content无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档

205Reset Content重置内容。服务器处理成功，用户终端(例如：浏览器)应重置文档视图。可通过此返回码清除浏览器的表单域

206Partial Content部分内容。服务器成功处理了部分GET请求

3**信息状态类：

300Multiple Choices多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端(例如：浏览器)选择

301Moved Permanently永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替

302Found临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI

303See Other查看其它地址。与301类似。使用GET和POST请求查看

304Not Modified未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

305Use Proxy使用代理。所请求的资源必须通过代理访问

306Unused已经被废弃的HTTP状态码

307Temporary Redirect临时重定向。与302类似。使用GET请求重定向

4**信息状态类：、

400Bad Request客户端请求的语法错误，服务器无法理解

401Unauthorized请求要求用户的身份认证

402Payment Required保留，将来使用

403Forbidden服务器理解请求客户端的请求，但是拒绝执行此请求

404Not Found服务器无法根据客户端的请求找到资源(网页)。通过此代码，网站设计人员可设置”您所请求的资源无法找到”的个性页面

405Method Not Allowed客户端请求中的方法被禁止

406Not Acceptable服务器无法根据客户端请求的内容特性完成请求

407Proxy Authentication Required请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权

408Request Time-out服务器等待客户端发送的请求时间过长，超时

409Conflict服务器完成客户端的PUT请求是可能返回此代码，服务器处理请求时发生了冲突

410Gone客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置

411Length Required服务器无法处理客户端发送的不带Content-Length的请求信息

412Precondition Failed客户端请求信息的先决条件错误

413Request Entity Too Large由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息

414Request-URI Too Large请求的URI过长(URI通常为网址)，服务器无法处理

415Unsupported Media Type服务器无法处理请求附带的媒体格式

416Requested range not satisfiable客户端请求的范围无效

417Expectation Failed服务器无法满足Expect的请求头信息

5**信息状态类：

500Internal Server Error服务器内部错误，无法完成请求

501Not Implemented服务器不支持请求的功能，无法完成请求

502Bad Gateway充当网关或代理的服务器，从远端服务器接收到了一个无效的请求

503Service Unavailable由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中

504Gateway Time-out充当网关或代理的服务器，未及时从远端服务器获取请求

505HTTP Version not supported服务器不支持请求的HTTP协议的版本，无法完成处理

开发中常见到的：

200 OK //客户端请求成功

301 Moved Permanently（永久移除)，请求的 URL 已移走，Response 中应该包含一个 Location URL, 说明资源现在所处的位置

302 found 重定向

400 Bad Request //客户端请求有语法错误，不能被服务器所理解

401 Unauthorized //请求未经授权，这个状态代码必须和 WWW-Authenticate 报头域一起使用

403 Forbidden //服务器收到请求，但是拒绝提供服务

404 Not Found //请求资源不存在，eg：输入了错误的 URL

500 Internal Server Error //服务器发生不可预期的错误

503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

9、一次完整的HTTP事务是怎么一个过程

10、HTTPS是如何实现加密

11、浏览器是如何渲染页面的

渲染的流程如下：

1.解析HTML文件，创建DOM树。

自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

3.将CSS与DOM合并，构建渲染树（Render Tree）

4.布局和绘制，重绘（repaint）和重排（reflow）

12.浏览器的内核有哪些？分别有什么代表的浏览器

Trident 内核：IE，搜狗高速浏览器等

Gecko 内核：Mozilla Firefox（火狐浏览器），Netscape6及以上版本

Webkit 内核：Safari 、曾经的 Chrome

Presto 内核：Opera 7到Opera12.17（欧朋浏览器）之间的版本采用的内核

Blink 内核：现在 Chrome 内核是 Blink，Opera现已改用Google Chrome的Blink内核

13、页面导入时，使用link和@import有什么区别

1.类型不同

link: 是html标签

@import: 是css语法

2. 加载时机不同

link: 引入的样式在页面加载时同时加载

@import: 引入的样式需等页面完全载入以后再加载

3. 兼容性

link: 是XHTML标签没有兼容性问题

@import: 不兼容ie5以下

4.动态改变

link: 支持使用Javascript控制DOM去改变样式

@import: 不支持

14.如何优化图像，图像格式的区别

1、不用图片，尽量用css3代替。比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。

2、使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。

基本上，内容图片多为照片之类的，适用于JPEG。

而修饰图片通常更适合用无损压缩的PNG。

GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。

4、按照HTTP协议设置合理的缓存。

5、使用字体图标webfont、CSS Sprites等。

6、用CSS或JavaScript实现预加载。

7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。

15.列举你了解Html5. Css3 新特性

1、拖拽释放(Drap and drop) API ondrop

2、自定义属性data-id

3、语义化更好的内容标签(header,nav,footer ,aside, article, section)

4、地理(Geolocation) API

5、表单控件 calendar , date , time , email , url , search , tel , file , number

6、新的技术 webworker, websocket , Geolocation

C3::

颜色: 新增RGBA , HSLA模式

文字阴影(text-shadow)

边框: 圆角(border-radius) 边框阴影 : box-shadow

盒子模型: box-sizing

背景:background-size background-origin background-clip

渐变: linear-gradient , radial-gradient

过渡 : transition 可实现动画

自定义动画 animate @keyfrom

媒体查询多栏布局 @media screen and (width:800px) {…}

border-image

2D转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

3D转换

字体图标 font-face

弹性布局flex

16.可以通过哪些方法优化css3 animation渲染

CSS动画属性会触发整个页面的重排，重绘,box-shadow和gradients的性能杀手

在使用css3 transtion做动画效果时，优先选择transform，尽量不要使用height，width，margin和padding。

17.列举几个前端性能方面的优化

从三个方面就前端性能进行总结：网络方面、DOM操作及渲染方面、数据方面。

1、网络方面

减少http请求：合并js文件/合并css文件/雪碧图的使用(css sprite)/使用base64表示简单的图片

减小资源体积：gzip压缩/js混淆/css压缩/图片压缩

缓存：DNS缓存 /CDN部署与缓存 /http缓存

移动端优化：/使用长cache，减少重定向/首屏优化，保证首屏加载数据小于14kb/不滥用web字体

2、渲染和DOM操作方面

优化网页渲染： css的文件放在头部，js文件放在尾部或者异步、尽量避免內联样式

DOM操作优化：避免在document上直接进行频繁的DOM操作、使用classname代替大量的内联样式修改、对于复杂的UI元素，设置position为absolute或fixed、尽量使用css动画、使用requestAnimationFrame代替setInterval操作、适当使用canvas、尽量减少css表达式的使用、使用事件代理

操作细节注意：避免图片或者frame使用空src、在css属性为0时，去掉单位、禁止图像缩放、正确的css前缀的使用、移除空的css规则、对于css中可继承的属性，如font-size，尽量使用继承，少一点设置、缩短css选择器，多使用伪元素等帮助定位

移动端优化： 长列表滚动优化、函数防抖和函数节流、使用touchstart、touchend代替click、HTML的viewport设置、开启GPU渲染加速

3、数据方面

图片加载处理：图片预加载、图片懒加载、首屏加载时进度条的显示

异步请求的优化：使用正常的json数据格式进行交互、部分常用数据的缓存、数据埋点和统计

Yslow是雅虎开发的基于网页性能分析浏览器插件，可以检测出网页的具体性能值，并且有著名的Yslow 23条优化规则，这23条，就够我们玩的了。

1. 减少HTTP请求次数

尽量合并图片、CSS、JS。比如加载一个页面，如果有5个css文件的话，那么会发出5次http请求，这样会让用户第一次访问你的页面的时候会长时间等待。而如果把这个5个文件合成一个的话，就只需要发出一次http请求，节省网络请求时间，加快页面的加载。

2. 使用CDN

网站上静态资源即css、js全都使用cdn分发，图片亦然。

3. 避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。

4. 为文件头指定Expires

Exipres是用来设置文件的过期时间的，一般对css、js、图片资源有效。他可以使内容具有缓存性，这样下回再访问同样的资源时就通过浏览器缓存区读取，不需要再发出http请求。如下例子：

新浪微博的这个css文件的Expires时间是2016-5-04 09:14:14.

5. 使用gzip压缩内容

gzip能够压缩任何一个文本类型的响应，包括html，xml，json。大大缩小请求返回的数据量。

6. 把CSS放到顶部

网页上的资源加载时从上网下顺序加载的，所以css放在页面的顶部能够优先渲染页面，让用户感觉页面加载很快。

7. 把JS放到底部

加载js时会对后续的资源造成阻塞，必须得等js加载完才去加载后续的文件，所以就把js放在页面底部最后加载。

8. 避免使用CSS表达式

举个css表达式的例子

font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );

这个表达式会持续的在页面上计算样式，影响页面的性能。并且css表达式只被IE支持。

9. 将CSS和JS放到外部文件中

目的是缓存文件，可以参考原则4。但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。

10. 权衡DNS查找次数

减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。

IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。

下面是新浪微博的图片域名，我们可以看到他有多个域名，这样可以保证这些不同域名能够同时去下载图片，而不用排队。不过如果当使用的域名过多时，响应时间就会慢，因为不用响应域名时间不一致。

11. 精简CSS和JS

这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件，把空格回车全部去掉，减少文件的大小。现在的压缩工具有很多，基本主流的前端构建工具都能进行css和js文件的压缩，如grunt，glup等。

12. 避免跳转

有种现象会比较坑爹，看起来没什么差别，其实多次了一次页面跳转。比如当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问 http://baidu.com 时，实际上返回的是一个包含301代码的跳转，它指向的是 http://baidu.com/（注意末尾的斜杠）。在nginx服务器可以使用rewrite；Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。

另一种是不用域名之间的跳转，比如访问 http://baidu.com/bbs 跳转到http://bbs.baidu.com/。那么可以通过使用Alias或者mod_rewirte建立CNAME（保存一个域名和另外一个域名之间关系的DNS记录）来替代。

13. 删除重复的JS和CSS

重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。

14. 配置ETags

它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载

15. 可缓存的AJAX

异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话，直接使用缓存

$.ajax({

url : 'url',

dataType : "json",

cache: true,

success : function(son, status){

}

16. 使用GET来完成AJAX请求

当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。

17. 减少DOM元素数量

这是一门大学问，这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量，就会减少浏览器的解析负担

18. 避免404

比如外链的css或者js文件出现问题返回404时，会破坏浏览器对文件的并行加载。并且浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。

19. 减少Cookie的大小

Cookie里面别塞那么多东西，因为每个请求都得带着他跑

20. 使用无cookie的域

比如CSS、js、图片等，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。

21. 不要使用滤镜

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。

22. 不要在HTML中缩放图片

比如你需要的图片尺寸是50* 50

那就不用用一张500*500的大尺寸图片，影响加载

23. 缩小favicon.ico并缓存