前端工程师常见的面试题

1、对WEB标准以及W3C的理解和认识？

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率

使用外链css和js脚本，结构行为表现的分离

文件下载与页面速度更快，内容能被更多的用户所访问，内容能被更广泛的设备所访问

更少的代码和组价，容易维护，改版方便，不需要变动页面内容

提供打印版本而不需要复制内容、提高网站易用性。

2、xml和html有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

最主要的不同是：

XHTML元素必须被正确地嵌套

XHTML元素必须被关闭

标签名必须用小写

XHTML文档必须拥有根元素

3、doctype（文档类型）的作用是什么？你知道多少种文档类型？

　　作用是：此标签可以告知浏览器文档使用哪种HTML或XHTML规范

　　此标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档

HTML4.01规定了三种文档类型：Strict、Transition以及Frameset

XHTML1.0 规定了三种XML文档类型：Strict、Transitional以及Frameset

Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页

4、行内元素有哪些？块级元素有哪些？CSS的盒模型

行内元素：span、a、Img、input、select、b

块级元素：div、p、h1~h6、form、ul、li

CSS盒模型：border、padding、margin

5、CSS引入方式有哪些？link和@import的区别

CSS引入方式：内联式、行内式、外链式

区别是：同时加载

前者无兼容性、后者CSS2.1以下的浏览器不支持

link支持使用JavaScript改变样式，后者不支持

6、CSS选择器有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？

CSS选择器：标签选择器、类选择器、ID选择器（组合选择器、相邻选择器（+））伪类选择器

继承不如指定

优先级：标签选择器<类选择器<ID选择器

important优先级高

7、前端页面有哪三层构成，分别是什么？作用是什么？

结构层html、表现层css、行为层js

8、CSS的基本语句构成是？

选择器{属性名：属性值；属性名：属性值；}

9、你做的页面在哪些浏览器测试过？这些浏览器的内核是什么

IE（ie内核）、谷歌（webkit内核）、火狐（Gecko）、opera（Presto）

10、写出几种IE6 BUG的解决方法

float引起的双边距bug：使用display

使用float引起的3像素bug：使用display:inline

超链接hover点击之后失效：使用正确的书写顺序link visited hover active

IE z-inde问题：给父级添加position:relative

PNG透明：使用js代码改

min-height最小高度 !important解决

select在ie6下遮盖 使用iframe嵌套

为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden;zoom:0.09;line-height:1px;）

IE6不支持!important

11、img标签上title与alt属性的区别是什么？

alt当图片不显示时，用文字代替

title当鼠标放在图片上时，显示文字说明

12、描述css reset的作用和用途

reset重置浏览器的css默认属性，浏览器的品种不同，样式不同，然后重置，让他们统一

13、解析css sprites，如何使用

css精灵（又叫雪碧图），是把一堆小图片整合到一张大的图片上，减少服务器对图片的请求数量

14、浏览器标准模式和怪异模式之间的区别是什么？

盒子模型、渲染模式不同

使用window.top.document.compatMode可显示为什么模式

15、你如何对网站的文件和资源进行优化？期待的解决方案包括：

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

16、请解释一下什么是"语义化HTML

语义化HTML就是：标题h1~h6，段落p，无序列表ul li，有序列表ol li，图片img，链接a等，对于搜索引擎的抓取有好处

　　语义化的好处：

去掉或样式丢失的时候，能让页面呈现清晰的结构

屏幕阅读器（如果访客有视障）会完全根据你的标记来"读"你的网页

PDA、手机登设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）

搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重

你的页面是否对爬虫容易理解非常重要，因为爬虫很大程度上会忽略用于表现的标记，而只注重语义化标记。

便于团队开发和维护

17、清除浮动的几种方式，各自的优缺点

使用空标签清除浮动clear:both（理论上能清除任何标签，，，增加无意义的标签）

使用overflow:auto（空标签元素清除浮动而不是增加无意代码的弊端，使用zoom:1用于兼容IE）

使用after伪元素清除浮动（用于非IE浏览器）

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

优化图片

图片格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）

优化CSS（压缩合并css，如margin-top，margin-left...）

网址后加斜杠（如：www.campr.com/目录，会判断这个"目录是什么文件类型，或者是目录。"）

标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片，一边计算大小，如果图片很多，浏览器需要不断的调整页面，这不但影响速度，也影响浏览体验，当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容，从而使加载时间变快，浏览体验也更好）

减少http请求（合并文件，合并图片使用雪碧图）

19、讨论CSS hacks，条件引用或者其他

<!--[if IE6]--><![end if]-->

_margin IE6

+margin IE7

margin:0 auto\9 所有IE

margin:\0 IE8

20、你用过媒体查询，或者针对移动端的布局/CSS吗？

@media screen and (min-width:400px) and (max-width:700px){......}

@media handheld and (min-width:20em)，screen and (min-width:20em){......}

媒体查询，就是响应式布局，响应式布局框架：bootstrap、PureCSS等

21、解释下原型继承的原理

当查找一个对象的属性时，JavaScript会向上遍历原型链，直到找到给定名称的属性为止（大多数JavaScript的实现用_proto_属性来表示一个对象的原型链）

以下代码展示了JS引擎如何查找属性：

function getProperty(obj,prop){

　　if(obj.hasOwnProperty(prop)){

　　　　return obj[prop];

　　}else if(obj._proto_! == null){

　　　　return getProperty(obj._proto_，prop)

　　}else{

　　　　return undefined;

　　}　

}

22、前端安全

CSRF:跨站请求伪造。攻击者盗用了你的身份，以你的名义发送恶意请求。他可以做到的事情包括：以你的名义发送邮件，发消息，盗取你的账号。甚至购买商品...造成的问题包括：个人隐私泄露以及财产安全。

原理：

　　登录受信任的网站A，并且在本地生成cookie，在不登录A网站的情况下，访问危险网站B

常见类型：

使用get更新请求资源，容易在B使用img标签造成攻击

前端虽然改成了post请求，但是B网站通过iframe等手段同样造成了攻击

防御机制：

验证码：用户每次提交都需要在表单中填写图片上一个随机字符串

添加一个隐藏的输入框：包含token，服务端验证是否匹配

使用HTTP refer头部进行判断，如果不是业务域名发起的HTTP请求，直接过滤。

XSS它的全名：Cross-sitescripting，为了和CSS层叠样式表区分所以取名XSS是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，这类攻击通常包含了HTML以及用户端脚本语言。

23、CMD VS AMD

CommonJS是服务器端模块的规范，Node.js采用了这个规范

根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为globald对象的属性。

CommonJS规范加载模块是同步的，也就是说，只要加载完成，才能执行后面的操作。

AMD规范则是非同步加载模块，允许指定回调函数。

由于Node.js主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以CommonJS规范比较适用。

但是，如果是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式，因此浏览器一般采用AMD规范。