神刀安全网

前端面试题干货(一)

答应大家的面试题目,都是自己在面试过程中,面试官提问到的,最近面临资本寒冬,所以前端的小朋友们都不太好找工作,希望这篇文章对大家有所帮助。

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会问这个问题,只有说前端是一个比较有前景,或者感觉前端非常重要类似的就可以了。

我是这么回答的,借大家参考:每次写完页面就能立马看到效果,感觉特别有成就感,而且前端作为与用户接触最近的一个工作,感觉特别荣幸,我们自己作为一个用户就能最直接的感受用户体验。未来前端还是特别有前景的。

前端面试题干货(一)
图片发自简书App

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 前端面试题干货(一)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址