美文网首页
WEB前端面试题

WEB前端面试题

作者: 星星编程 | 来源:发表于2018-10-12 09:14 被阅读109次

    面试官 先做下自我介绍吧?
    对后端有了解吗?node之类的
    那我就针对你的项目问一些基础能力?(好的)
    我看你接触前端两年多,能告诉我你是怎么入行前端的吗?
    我引导了一下说之后会做一些可视化的东西,引导偏了。
    我看您对ES6,js知道比较多吧
    你个人觉得,你html,css,js哪方面比较强啊?(面试官还是挺好的,给我机会选择,我竟然说了js,但是面试官还是问html和css东西)
    过去学,html,css有没有比较印象深刻的一些点啊?
    有没有用html和css做出来什么作品啊?
    移动端适配是响应式,还是通过其他方案?
    能给我细讲一下rem和其他单位之间的区别吗?
    flex布局和传统布局有什么区别?
    说了下双飞翼布局
    双飞翼布局怎么保证三列的高度一致呢?
    双飞翼布局具体怎么实现的?
    假设用flex实现双飞翼布局,让三列等高?

    有什么比较复杂的项目,有些什么样的亮点?,有什么难点?
    做的微信小程序有些什么样的亮点?,有什么难点?
    你觉得你在这个团队,你的优势是什么呢,尤其是技术上?
    https说一下过程?
    移动端300毫秒延迟,怎么解决的?
    移动端点击穿透?
    304状态码是怎么样,怎么产生的?--》Etag值怎么产生的?
    异步的处理方式,都是怎么处理的?(Promise)--》ES7中你知道用什么方法吗?(async和await)--》Generator 有了解吗?(没有耶)
    cookie和session了解吗?
    跨域怎么处理的呢?都知道什么方法?--> jsonp和CORS那个更安全?
    nodejs用过吗?
    微信扫一扫二维码网页上登陆前后端过程?
    说下生命周期?
    Vue中Compile过程说一下?
    箭头函数和普通函数的区别?
    你今后有什么想法?
    有想法出来实习吗?当然了
    你前端哪个框架更熟悉?介绍下双向绑定的原理?
    你做前端开发移动端多一点,PC端多一点,你遇到有什么难解的兼容性问题?
    rem和em有什么去区别啊?
    事件委托的概念你了解吗?您知道这个概念是怎样的?
    事件委托主要解决什么问题呢?
    用原生JS处理事件绑定?比如一个列表,然后,怎么监听每一个li的点击事件?---> 如果新加了一些li,怎么办呢?(回答不好)
    null和undefined有什么区别?
    你一般情况下怎么判断基本的数据类型?
    怎么判断数组?
    对数组的浅拷贝?--->深浅拷贝有什么区别?--->深拷贝一个数组怎么做呢
    闭包你是怎么理解?---->项目中用过吗?
    原型继承了解吗?我给你个场景,有一个FUNA,FUNB,让B继承A,用原型链怎么B继承A的属性?
    普通函数和构造函数的区别?
    不同选择器权重是怎么计算的?
    前端性能优化?
    position定位?
    position和float的区别?
    设计模式有了解吗?(比如观察者模式)?
    跨域了解多少?
    CORS原理是什么?
    你对算法了解怎么样?常用的排序算法?--->快速排序的思路大概是什么样的?--->快速排序的时间复杂度
    原型链和作用域链你的理解?
    前端的设计模式你可以说下吗?
    事件模型您介绍下吗?
    同一个对象节点上绑定多个事件,执行的顺序是怎样的?
    你知道有没有什么事件不支持冒泡,捕获的?
    正则表达式(字符串格式成金额(欧美,三个,)的)?
    JS有没有了解过函数式编程?
    您今后前端的职业规划?
    整体的职业生涯规划?
    你理解的前端专家需要掌握哪些东西?
    前端架构你有了解吗?
    计算机相关的专业课您学过那些?
    OSI七层协议?
    http和https有什么区别?
    https使用上有什么注意点?
    https和http性能有什么区别?
    常见的排序方法,你都熟悉那些?
    说下希尔排序的过程?
    希尔排序的时间复杂度和空间复杂度多少?( 希尔排序的时间复杂度是:O(nlogn)~O(n2),平均时间复杂度大致是O(n√n))
    时间复杂度怎么推测的?
    数据结构你对那些比较熟悉?
    二叉树是什么啊?
    平衡二叉树(AVL)有什么特点?
    平衡二叉树(AVL)有什么好处?
    平衡二叉树(AVL)和红黑树的区别?
    平衡树的插入和删除的时间复杂度?
    那个项目是你投入比较多的?
    这个项目主要为了解决什么问题啊?
    项目怎么分工,你主要负责那一块?
    项目过程中有遇到什么问题吗?
    项目中对你挑战比较大的,有吗?
    Vue的设计思路你了解吗?
    整个什么生命周期?
    Vue的响应式是怎么实现的?(一脸懵,其实就是双向绑定,然后很好地打出来了)
    JS闭包有什么作用?
    你的职业规划是怎么考虑的?
    如果能来实习,大概是什么时候?时间周期?
    先做前端开发工程师三年,然后转管理,之后根据在公司的发展,如果能够做到高管,就在大公司呆着,如果做不到,就创业。创业最大的好处是没人管了,可以按照自己的思路去做些尝试。当然,你再也没有理由抱怨周边了。如果创业搞不成,大家肯定最指责的是创始人。

    下面问一下js方面的问题

    1.简单介绍一下自己,为什么选择做前端?
    2.说下你所在的EPI实验室和CTG工作室是干什么的?
    3.介绍下你最近的项目?
    4.如何让子类继承父类的方法与属性?
    5.两道this指向问题
    6.CSS属性选择器和伪类选择器的优先级?
    7.说下你ES6、7中用到哪些东西?
    8.Vue是如何实现双向绑定的?看过Vue源码吗?
    9.Vue中的路由你使用的哪种模式?如何与后台沟通路由?
    10.怎么发送一个跨域的POST请求?

    说一下原型链吧(proto,prototype)?
    知道拷贝对象吧,拷贝一个对象能做吗(浅拷贝,深拷贝)?
    讲讲,怎么上手的vue,以及为啥用vue而不用其他框架?
    你对vue的源码了解吗,给我讲讲双向绑定原理怎么实现的,详细描述什么时候监听变化的,什么时候触发变化的?
    Vue双向绑定?
    Vuex整个触发过程(actions,state,view)?
    Vue和Vuex有什么差别?

    项目
    1.最近做过哪些项目?介绍一下
    2.注册登录流程有了解过吗?前端做注册登录流程详细描述一下?
    3.为什么cookie不安全?token怎么生成的?
    4.jpg格式和png格式怎么区别?gif呢?什么情况下分别选择?
    5.做过哪些插件?怎么实现的?
    6.用Vue怎么实现一个百度下拉框?
    7.JQuery的bind()和on()方法的区别?
    8.只允许使用css,让一个页面原有dom不可见(问了和阿里一模一样的问题)
    2.问最近做过哪些项目,项目中遇到哪些问题?怎么解决的?
    3.你用到了Flex,请问flex怎么设置垂直水平居中?
    4.css有哪些垂直水平居中方式?
    5.css选择器有哪些?选择器的优先级?
    6.position的值有哪些?
    7.只允许使用css,让一个页面原有dom不可见(考察CSS属性以及结构化思维,考官说有多种解决方法)
    8.浏览器高级特性有了解吗?(service worker)
    9.浏览器CSS Hack手段有哪些?
    10.为什么浏览器需要同源策略?
    11.浏览器跨域的几种方式?
    12.浏览器性能怎么优化?(从多个方向上去答)
    13.JS基本数据类型有哪些?
    14.怎样判断一个数组是数组?
    15.怎么用JS实现一个队列?
    16.描述出任意一个排序算法?
    17.Vue怎么实现双向绑定的?
    18.说出你觉得自己身上最优秀的能力?
    19.说出你未来的规划?
    20.你最近有没有什么想要学习的技术?
    21.你有什么又问我的?(问了面试官的学习方法和学习习惯)
    为什么你们的页面要用到vue-router呢?,如果没有vue-router,你们还会做单页面应用吗?
    说说性能优化?具体哪些优化的收益较大?
    传输模型:浏览器输入url到整个页面显示出来经历的过程?能介绍多细就多细?
    最常问的问题:项目中遇到的难点,怎么解决的?

    说说,基于NLP的汇款单自动生成APP这个项目?
    node端有做过什么吗?
    学前端,比较精彩的点?

    1.从URL到页面呈现发生了什么?
    2.HTTP响应头组成结构?
    3.你平时是怎么学习前端的?
    4.讲讲Webpack,除了Webpack还使用过什么?Webpack和Gulp的区别是什么?
    5.讲讲你最复杂的项目?遇到的问题?
    6.移动端兼容性考虑过哪些?
    7.怎么处理跨域的?

    1.自我介绍
    2.问觉得自己最出彩的项目
    3.技术选型当时怎么考虑的?
    4.有没有想过你与后台以及部署人员交接的这种流程太麻烦,怎么简化?
    5.登录注册流程你前端怎么处理的?
    6.有没有想过在后台富文本编辑器不安全?XSS和CSRF怎么避免?
    7.Cookie与Session的区别?
    8.除了Cookie,还有其他本地存储的方式吗?(Web Storage)
    9,前端工程化你是怎么理解的?
    10.轮播图你怎么实现的?怎么防回闪的?
    11.描述一下JS中的数据类型有哪些?
    12.JS原型与闭包,你的理解是什么?
    13.ES6中你常用的有哪些?
    14.为什么const定义一个数组与对象,仍然可以对其操作?
    15,promise比传统的回调函数好在哪里?
    16.promise中then是怎么实现链式调用的?
    17.异步方式除了promise还有那些可以实现?(希望回答出generator以及ES7的async,await的知识)
    18.描述下CSS盒子模型?
    19,CSS水平垂直居中的方式?
    20.Vue中父子组件通讯问题?以及两个不相干组件通讯问题?
    21.Vue中两个数据a,b,a渲染在页面上,b没有,此时有函数操作了b,问组件是否触发重新渲染?
    22.Vue中Computed与Watch用过吗?区别是什么?
    23.怎么去解决用Webpack打包后的项目体积过大的问题?
    24.说下你对Vue这个框架怎么理解的?( MVVM )

    1.怎么实现私有变量,不能用点属性访问,只能用方法(多种实现)
    2.不用循环,怎么实现x长度,元素为y的数组
    3.怎么实现add(3,4)以及add(3)(4)?
    4.用3升,5升杯子怎么量出4升水?如果用代码你会怎么实现?
    5.最复杂的一个项目,平时写代码多吗?
    6.最欣赏的一个网站设计,有哪些优点?你对设计的理解?

    1.求正,负数组其中的两元素之和最接近零的这两元素,并说出你这种解法的时间复杂度
    2.链表,栈,队列相关问题
    3.赛马问题,25匹马,5个赛道,最少几次能选出最快的三匹马?
    4.面向对象设计题,一个借书还书系统需要哪些类,属性,方法(需要考虑很多情况)

    1.首先介绍一下自己最近的项目?
    2.闭包介绍一下你的理解?用处,缺点
    3.跨域有了解吗?
    4.浏览器缓存你知道哪些?
    5.Cookie、Session、Webstorage的区别
    6.简单说下从url输入到页面输出的整个过程
    7.说下你知道的HTTP 状态码
    8.介绍一下盒子模型?
    9.Flex用过吗?用过哪些?
    10.React有用过吗?
    11.ES6有用过吗?介绍一下?Promise有用过吗?
    12.HTTP与HTTPS的区别?
    13.手写代码:写一个函数,参数为url,输出一个对象,为查询字符串中的各个值

    1.项目介绍一下,最有成就感的一个项目?
    2.介绍一下你自己对自己满意的能力?
    3.为什么学前端?除了前端你还写什么?
    4.JavaScript原型你的了解?
    5.说下BFC是什么?
    6.说说你对Flex的理解,rem你怎么理解的?
    7.HTTP和HTTPS的区别?HTTP2.0的区别?它们的默认端口是什么?
    8.JS的深拷贝和浅拷贝的区别?
    9.堆和栈有什么区别?
    10.怎么取消事件冒泡?
    11.CDN有了解吗?怎么让请求在最近的站点下载?
    12.手写代码:数组去重的多种实现?

    CSS常用布局
    CSS常用布局为盒模型div+css、其中需要注意IE的怪异盒模型,我们通常通过box-sizing解决。传统盒模型布局方式中我们可以细分为文档流布局、浮动布局、定位布局。在ie10+中我们可以使用flex布局,其中我们需要理解最为核心的容器和轴的概念。二维布局中,我们可以使用Grid布局。对于三栏布局,除了浮动实现方式,还有双飞翼布局和圣杯布局。其实双飞翼布局就是对圣杯布局的bug修复,一种改造升级。
    了解BFC么?
    BFC即为块级格式化上下文。在普通流的Box属于一种formatting box,类型可以为block或者为inline。但是不能同时为这两者。并且Block boxes在block formatting context里格式化,inline boxes在inline formatting context中格式化,任何被渲染的元素都属于一个box,不是block就是inline。其一般表现规则分为以下几种情况:1、在创建了BFC的元素中,其子元素按照文档流一个接着一个放置。垂直方向上他们的起点是一个包含块的顶部,两者相邻元素的垂直距离取决margin特性。2、在BFC中,每一个元素的左外边与包含块的左边相接触。及时存在浮动也是如此。除非这个元素也创建了一个新的BFC。3、BFC就是页面的一个独立的行政区域。所有浏览器都会将BFC放到浮动元素所在行的剩余空间内。当HTML满足一下任意一个条件即可产生BFC:float不为none、overflow不为hidden、display为table-cell,table-caption,inline-block中的任何一个。Position值不为relative或static。通常我们使用BFC为了不和浮动元素重叠。清除内部浮动元素。解决上下元素相邻时候重叠。
    居中方面问题
    分别从水平居中垂直居中两方面回答。水平、垂直居中分为单个元素、多个元素、已知宽高和未知宽高回答
    session、cookie、sessionStorage、localStorage区别
    从client和Server中区分回答session是什么以及一般session如何使用注意事项以及安全策略,cookie、sessionStorage和localStorage等分别从概念和异同处回答。最后补充项目中的使用情况
    px/em/rem的区别
    px顾名思义就是我们通常说的像素大小。em和rem都是相对大小,不过em是继承父级元素的字体大小,rem是相对于根元素的大小,这个单位可谓是集相对大小和绝对大小为一身。通过它可以做到只修改根元素即可修改所有字体的大小,又可以避免字体大小逐层复合的连锁反应。当rem相对于浏览器进行缩放,1rem默认为16px。
    animation和transition使用过么
    写法:animation:name duration timing-function delay iteration-function direction .transition为过渡动画,这种效果可以在事件中触发,并且圆滑的以动画效果改变css的属性值。不同于transform,transform为2D转换(问题非常开放,尽可能多回答你所知道的)
    css编写注意事项
    这个考验个人平时编码的总结和约束。问题较为开放,可以结合个人开发体验和团队约束来回答。比如0后面不带单位、尽量使用简写、使用子选择器、合理使用id等。
    JavaScript部分

    JavaScript闭包了解么
    闭包即为函数,但是我们通常所说的闭包是指有权访问并操作别的函数作用域中变量的函数。一般表现形式为函数中返回函数。通常我们开发中就会有很多的闭包比如定时器、事件监听、IIFE等。此题是一个借题发挥涨分的题目,我们可以谈谈闭包的高级用法,比如单例模式中的使用、js的节流和防抖甚至可以谈一谈js的运行机制,gc机制。
    前端跨域都有哪些解决方案
    js的前端跨域很多,通常我们给出方案并且应该简述优缺点,比如方式有,jsonp、document.domain+iframe、window.name+ifram、location.hash+iframe、postMessage跨域、CORS跨域、websocket跨域、node代理跨域以及NGINX代理等方式。其中对于我们常用的可以张开说明,比如CORS跨域中简单请求和非简单请求的header字段,access-control-allow-origin、access-control-allow-headers、access-control-allow-method等常规head字段说明。
    JavaScript中的继承
    1、Es6中我们直接可以使用extends关键字去继承,通过重写super完成继承,但是在es5中,才是应该去主要细说的。2.原型继承的核心为父类的实例作为子类的原型。优点:非常纯粹的继承关系、简单易用、父类新增的原型方法原型属性子类都可以访问到。缺点:要为子类新增属性和方法,必须要放到new Animal()之后,不能放到构造器中,来自原型对象的引用类型被所有实力共享,创建子类,无法向构造函数传参。3.构造函数继承核心:使用父类构造函数来增强子类的实例优点:解决了共享引用类型的问题,可以在构造函数里面传参,可以实现多继承。缺点:实例不是父类实例,只能继承父类的属性和方法,不能继承父类原型的方法和属性、无法实现函数的复用。4、组合继承的核心:通过调用父类的构造,继承父类的属性并保留参数的有点,通过父类的实例作为子类原型,实现函数复用。优点:可以继承属性和方法以及原型上的属性和方法、即是子类实例也是父类实例、不存在属性共享的问题、函数可复用。缺点:调用了两次构造函数,生成了两份实例。5、寄生组合继承核心:砍掉父类的实例属性,这样,在调用两次父类的构造时候,就不会初始化两次实例方法和属性,避免组合继承的缺点
    es6 extends继承,ES5中的继承,实质上是先创建子类上的this,然后再将父类方法添加到this上,es6则是先创建父类的实例方法(必须调用super),然后在用子类构造函数修改this。没有调用super,是没有this的。

    相关文章

      网友评论

          本文标题:WEB前端面试题

          本文链接:https://www.haomeiwen.com/subject/usdwaftx.html