前端面试干货
http://www.html5cn.org/article-9783-1.html
http://www.jianshu.com/p/ed44d965353a
http://www.jianshu.com/p/48bf8edf825d
1、你怎么看待响应式网页设计?(面试了很多家几乎都问到了)
响应式：页面应该有能力去自动响应用户的设备环境(包括屏幕大小，屏幕定向)。
体现了人性化，智能化的思想。实践方式由多方面组成，包括弹性网格和布局、图片、CSS 媒体查询的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。所用到的技术：Media Query(css3中的)、Bootstrap、Foundation
我：
响应式布局分为三部分:
2、媒体查询是什么?
使用@media查询，你可以针对不同的媒体类型定义不同的样式。@media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
3、怎么样优化页面性能?
从四个方面回答
(1)压缩图片、用雪碧图(多张公用的图标放到一张大图中，通过位移的方法，展示对应的效果，减少了图片的请求次数，加快了浏览器的加载性能。)
(2)优化css，压缩合并css
(3)base64位图片压缩(webpack自动做的)
(4)懒加载
4、XHTML知道吗?它与HTML有什么区别?
XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）；XHTML 的目标是取代 HTML；XHTML 与 HTML 4.01 几乎是相同的；XHTML 是更严格更纯净的 HTML 版本；XHTML 是作为一种 XML 应用被重新定义的 HTML；XHTML 是一个 W3C 标准。
区别：XHTML元素必须被正确地嵌套；XHTML元素必须被关闭；标签名必须用小写字母；XHTML文档必须拥有根元素；所有的XHTML文档必须拥有DOCTYPE声明，并且html、head、title和body元素必须存在。虽然代码更加的优雅，但缺少容错性，不利于快速开发。
为什么使用XHTML：万维网上的许多页面都包含着糟糕的 HTML 代码。今天的市场中存在着不同的浏览器技术，某些浏览器运行在计算机中，某些浏览器则运行在移动电话和手持设备上。而后者没有能力和手段来解释糟糕的标记语言。
5、H5了解吗?用过哪些?
WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。HTML5是他们两合作的结果
HTML5 中的一些有趣的新特性：
· 用于绘画的 canvas 元素
· 用于媒介回放的 video 和 audio 元素
· 对本地离线存储的更好的支持
· 新的特殊内容元素，比如 article、footer、header、nav、section
· 新的表单控件，比如 calendar、date、time、email、url、search
· 可以通过设置进度条(progress)看下载的进程
HTML5 的改进
新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用
IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。
<!--[if lt IE9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> 载入后，初始化新标签的CSS： /*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。header, section, footer, aside, nav, main, article, figure
6、那localstorage、sessionstorage有什么区别呢?
第一个是不受时间限制的。前者是本地级的
另一个如果页面被关闭，那么数据就会被删除。后者是页面级的
(像是保存密码这种，我们会使用localstorage)
7、css3常用的有哪些?
CSS3中比较常用的是动画，边框(利用border-radius设置边框的圆角)，透明度，多列，弹性盒子(进行页面布局，水平布局的，就可以用-webkit-box,考虑到兼容性问题，要加上浏览器前缀)，文本溢出、文本阴影
8、那transition、transform、animation有什么区别吗?
animation动画(用@keyframes定义动画)
transition是用来表示过渡的，加上时间属性会有动画的效果
transform是2D或者3D的转化(有位移、旋转、变形、缩放的效果)
9、你们公司遇到过哪些兼容性问题?是怎么处理的呢?
一、问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
解决方案：CSS里 *{margin:0;padding:0;}
二、问题症状：低版本盒子模型是border-box;
三、span之间的默认间距，每个浏览器都是不一样的，所以去掉默认间距，自己设置;原因是 行内元素之间在换行时会产生一个换行符号，然后会占用一定的宽度...
同理 i s之类的行内元素也是会存在一样的问题。并且这个宽度是小于一个空格的...
解决：将span连着写就行了。但是这样有可能导致代码太长
其他方法：1、在js里拼接好字符串后再通过innerHtml方法显示出来；2、设置margin-right为-,具体数值再看；3、换行符号的宽度是由所在标签的字体大小有关，以上面的代码为例，p的font-size越大，块1与块2之间的空白就越宽，反之则越小。所以解决方案就是：将p的font-size设为0即可。（有的浏览器不支持）
四、在IE浏览器（低版本）里图片默认会有一个像素的默认边框，我们要手动把边框去掉
10、你了解svg和canvas嘛，他们之间有什么区别吗?
他们都是回来绘制图片的工具
svg是一种用XML描述图片的，能进行地图绘制，但是不能用来写游戏。
canvas是用JavaScript进行绘制图片的，比较弱的文本渲染能力，但是适合游戏应用。
同时SVG是基于矢量的，所有它能够很好的处理图形大小的改变。Canvas是基于位图的图像，它不能够改变大小，只能缩放显示；所以说Canvas更适合用来实现类似于Flash能做的事情(当然现在Canvas与Flash相比还有一些不够完善的地方)。
Canvas适用场景：Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制
SVG适用场景：SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景
11、伪类有哪些?a:linka:visiteda:hovera:active:first-child:lang
| 属性 | 描述 | CSS |
|---|---|---|
| :active | 向被激活的元素添加样式。 | 1 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | 1 |
| :link | 向未被访问的链接添加样式。 | 1 |
| :visited | 向已被访问的链接添加样式。 | 1 |
| :first-child | 向元素的第一个子元素添加样式。 | 2 |
| :lang | 向带有指定 lang 属性的元素添加样式。 | 2 |
| 属性 | 描述 | CSS |
|---|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
| :first-line | 向文本的首行添加特殊样式。 | 1 |
| :before | 在元素之前添加内容。 | 2 |
| :after | 在元素之后添加内容。 | 2 |
注重员工想法的Boos会问这个问题，只有说前端是一个比较有前景，或者感觉前端非常重要类似的就可以了。
我是这么回答的，借大家参考：每次写完页面就能立马看到效果，感觉特别有成就感，而且前端作为与用户接触最近的一个工作，感觉特别荣幸，我们自己作为一个用户就能最直接的感受用户体验。未来前端还是特别有前景的。
1、你经常使用JQ，会用什么？那JQ的动画怎么写？
JQ的动画，比如说显示和隐藏、淡入淡出、滑动、动画、以及回调函数（其中回调函数需要注意的是，必须在动画完成100%以后才能进行）、还有跟鼠标绑定的事件（mouseover、mouseout）。JQ的动画的话，首先先要对这个动画绑定一个事件，比如说触碰按钮就让动画开始，然后可以利用动画的队列功能，设置它要改变的效果，在加上时间属性，这样就能呈现简单的动画效果。
2、你对JQ有什么看法，他与原生Js比较有什么优缺点？
JQ是基于原生JS写的，JQ是一个js框架，JQ主要解决浏览器兼容性问题,可以很方便的操作dom元素，它本身封装了很多方法，比如获取元素，$(选择器)（用JS的话是document.get element.by），操作属性,css相关的，js本身已可以做这些操作,但是js本身有兼容性问题,但是从性能来说还是js本身更佳。
百科：
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。
jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
jQuery的官方插件是jQuery UI。开发者可以任意扩展jQuery的函数库或者按照自己的需求开发UI组件。网上已经有数以万计的jQuery插件，覆盖各种各样的需求。例如Ajax辅助、数据表格、动态列表、XML工具、拖曳、cookie处理、弹出层等等。jQuery 的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择,例如ComponentOne Studio for ASP NET Wijmo.
优点：1、jQuery实现脚本与页面的分离 （即使validate()函数可以被放置在一个外部文件中，实际上我们依然是把页面与逻辑和事件混杂在一起。）2、最少的代码做最多的事情 3、性能 （在大型JavaScript框架中，jQuery对性能的理解最好。尽管不同版本拥有众多新功能，其最精简版本只有18KB大小，这个数字已经很难再减少。jQuery的每一个版本都有重大性能提高。）4、它是一个“标准” 5、插件 6、节省开发者学习时间
缺点：1、不能向后兼容；2、插件兼容性；3、在同一页面上使用多个插件时，很容易碰到冲突现象，尤其是这些插件依赖相同事件或selector时最为明显。这虽然不是jQuery自身的问题，但却又确实是一个难于调试和解决的问题。4、在大型框架中，jQuery核心代码库对动画和特效的支持相对较差。但是实际上这不是一个问题。目前在这方面有一个单独的jQuery UI项目和众多插件来弥补此点。
JQuery的特点
(1).一款轻量级的js框架。
JQuery核心js文件才几十kb，不会影响页面加载速度。与Extjs相比要轻便的多。
(2).丰富的DOM选择器(CSS1-3 + XPath)
JQuery的选择器用起来很方便，好比要找到某个dom对象的相邻元素js可能要写好几行代码，而JQuery一行代码就搞定了，再比如要将一个表格的隔行变色，JQuery也是一行代码搞定。
(3).链式表达式。
JQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
(4).事件、样式、动画支持。
JQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
(5).Ajax操作支持。
JQuery简化了AJAX操作，后台只需返回一个JSON格式的字符串就能完成与前台的通信。
(6).跨浏览器兼容。
JQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
(7).插件扩展开发。
JQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前台页面上的组件都有对应插件，并且用JQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
(8).可扩展性强。
JQuery提供了扩展接口：JQuery.extend(object),可以在JQuery的命名空间上增加新函数。JQuery的所有插件都是基于这个扩展接口开发的。
3、如何用Js操作dom？
（1）1.getElementByID(id)
（2）2.getElementsByName(name)
（3）3.getElementsByTagName(tagname)
4、JS中访问html用什么?
用document.getElementByid( “ ”)
document.getElementBytagname( “ ”)
5、JQ选择器有哪些?
css选择器、层级选择器（后代选择器、子元素选择器、兄弟选择器）、并且选择器（even集合索引为偶数、odd为奇数）层叠选择器、基本过滤选择器、内容过滤选择器、可视化过滤选择器、属性过滤选择器、子元素过滤选择器、表单元素选择器、表单元素过滤选择器
选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text()
名字以”S_”开始，并且不是以”_R”结尾的
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)
一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val();
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 <p> 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| :first | $("p:first") | 第一个 <p> 元素 |
| :last | $("p:last") | 最后一个 <p> 元素 |
| :even | $("tr:even") | 所有偶数 <tr> 元素 |
| :odd | $("tr:odd") | 所有奇数 <tr> 元素 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 从 0 开始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
| :header | $(":header") | 所有标题元素 <h1> - <h6> |
| :animated | 所有动画元素 | |
| :contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 无子（元素）节点的所有元素 |
| :hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
| :visible | $("table:visible") | 所有可见的表格 |
| s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
| :input | $(":input") | 所有 <input> 元素 |
| :text | $(":text") | 所有 type="text" 的 <input> 元素 |
| :password | $(":password") | 所有 type="password" 的 <input> 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
| :checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
| :submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
| :reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
| :button | $(":button") | 所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 所有 type="image" 的 <input> 元素 |
| :file | $(":file") | 所有 type="file" 的 <input> 元素 |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被选取的 input 元素 |
| :checked | $(":checked") | 所有被选中的 input 元素 |
6、JQ里find方法用过吗？
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
下面的例子返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){
$("div").find("span");
});
返回 <div> 的所有后代：
$(document).ready(function(){
$("div").find("*");
});
7、Jq里关于class的属性有哪些？
（增删改查的原则）
addclass( )
removeclass( )
hasclass( )
toggleClass()
另：下面列出的这些方法获得或设置元素的 DOM 属性。
| 方法 | 描述 |
|---|---|
| addClass() | 向匹配的元素添加指定的类名。 |
| attr() | 设置或返回匹配元素的属性和值。 |
| hasClass() | 检查匹配的元素是否拥有指定的类。 |
| html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
| removeAttr() | 从所有匹配的元素中移除指定的属性。 |
| removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
| toggleClass() | 从匹配的元素中添加或删除一个类。 |
| val() | 设置或返回匹配元素的值。 |
9、字符串转化为数字的方法有哪些?把数字变为字符串呢？
2种：parseFloat（可以保留小数点）、
parseInt(不保留小数)
2种：toString( )
toFix( ) ——扣指定小数点后面保留几个小数
10、知道Js的基本类型吗？
undefined、（Null）、布尔值(boolean)、number（数字）、string(字符串)
11、react中props与state有什么区别？（这个初级的我们就不用会啦）
props调用时候可以改变，就是当子元素接受父元素传过来的参数的时候，但是大部分情况下是不变的
state自身是可以改变的。改变时，组件会重新渲染
12、怎么用Js改变div的颜色？
jQuery：$('div').css({'color':'pink'});
原生：
var d = document.getElementById("div");
d.style.backgroundColor = "red";
13、link和@import的区别是什么？
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
@import url(style.css)最值得推荐。
浙公网安备 33010602011771号