前端面试题4

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元素必须被正确地嵌套。

　　·XHTML元素必须被关闭。

　　·标签名必须用小写字母。

　　·XHTML文档必须拥有根元素

　　所有的XHTML文档必须拥有DOCTYPE声明，并且html、head、title和body元素必须存在。虽然代码更加的优雅，但缺少容错性，不利于快速开发。

　　5、H5了解吗?用过哪些?

　　·H5经常使用的是语义化标签，经常被使用的就是头部(header)、内容( con)、尾部(footer)、导航(nav)

　　·还有input里面的number、date、email，

　　·里面的音频视频，可以进行自动播放，

　　·本地存储(localstorage、sessionstorage)

　　·可以通过设置进度条(progress)看下载的进程

　　6、那localstorage、sessionstorage有什么区别呢?

　　第一个是不受时间限制的。前者是本地级的

　　另一个如果页面被关闭，那么数据就会被删除。后者是页面级的

　　(像是保存密码这种，我们会使用localstorage)

　　7、css3常用的有哪些?

　　CSS3中比较常用的是动画，边框(利用border-radius设置边框的圆角)，透明度，多列，弹性盒子(进行页面布局，水平布局的，就可以用-webkit-box,考虑到兼容性问题，要加上浏览器前缀)，文本溢出、文本阴影

　　8、那transition、transform、animation有什么区别吗?

　　animation动画(用@keyframes定义动画)

　　transition是用来表示过渡的，加上时间属性会有动画的效果

　　transform是2D或者3D的转化(有位移、旋转、变形、缩放的效果)

　　9、你们公司遇到过哪些兼容性问题?是怎么处理的呢?

　　比如弹性盒子模型在pc上面的不兼容，不兼容IE8,用浮动解决;

　　span之间的默认间距，每个浏览器都是不一样的，所以去掉默认间距，自己设置;

　　在IE浏览器里图片默认会有一个像素的默认边框，我们要手动把边框去掉

　　10、你了解svg和canvas嘛，他们之间有什么区别吗?

　　他们都是回来绘制图片的工具

　　svg是一种用XML描述图片的，能进行地图绘制，但是不能用来写游戏。

　　canvas是用JavaScript进行绘制图片的，比较弱的文本渲染能力，但是适合游戏应用。

　　11、伪类有哪些?

　　Before/after/vistited/hover/active

　　12、你感觉前端好玩吗?为什么好玩?

　　注重员工想法的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本身更佳。

　　3、如何用Js操作dom?

　　1.getElementByID(id)

　　2.getElementsByName(name)

　　3.getElementsByTagName(tagname)

　　4、JS中访问html用什么?

　　用document.getElementByid( “ ”)

　　document.getElementBytagname( “ ”)

　　5、JQ选择器有哪些?

　　css选择器、层级选择器(后代选择器、子元素选择器、兄弟选择器)、并且选择器(even集合索引为偶数、odd为奇数)

　　6、JQ里find方法用过吗?

　　它是用来获取选择器获得当前匹配元素集合中每个元素的后代，由选择器进行筛选

　　7、Jq里关于class的属性有哪些?

　　(增删改查的原则)

　　addclass( )

　　removeclass( )

　　hasclass( )

　　8、Ajax里的参数怎么写?

　　例如：{name: “柯南”，age: “9岁”}

　　属性名：属性值。中间用逗号隔开

　　9、字符串转化为数字的方法有哪些?把数字变为字符串呢?

　　2种：parseFloat(可以保留小数点)、

　　parseInt(不保留小数)

　　2种：toString( )

　　toFix( ) ——扣指定小数点后面保留几个小数

　　10、知道Js的基本类型吗?

　　undefined、(Null)、布尔值(boolean)、number(数字)、string(字符串)

　　11、react中props与state有什么区别?(这个初级的我们就不用会啦)

　　props调用时候可以改变，就是当子元素接受父元素传过来的参数的时候，但是大部分情况下是不变的

　　state自身是可以改变的。改变时，组件会重新渲染

　　12、怎么用Js改变div的颜色?

　　$('div').css({'color':'pink'});

　　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不支持。