㈠ web前端开发面试流程是怎样的
首先投简历,等待hr通知面试,一般情况下先填资料,做测试题,接着开始第一面(一般问经你的个人情况,工作经历等),资料已经交给技术,等一面通过之后接着二面,二面一般是技术面试,问你开发相关的技术问题(例如布局问题,js,框架之类的),有些公司还需要上机操作(写一两个页面或者开发一个js方法等),有些公司是通过之后直接进行3面有些是改天再进行3面,3面一般就是项目经理或总经理问你一些各种各样的问题(随机应变就行,也有一些公司没有这个环节),如果3面都过了,基本上就是面试成功了,接下来就是4面,也就是人事主管和你谈工资待遇等问题了,这个谈好之后就会告诉你什么时候过来上班,要准备什么东西,当然一般还会有正式的工作邀请函发到你的邮箱。如果没有3面的公司,那人事这个环节就直接是3面了。
还有一些公司是一面之后等通知,通过的就通知你二面,然后再等通知,然后通过再三面(这样的公司我一般不会等,太浪费时间)
㈡ 面试Web前端需要注意什么会面试哪些问题
作为一名HTML5前端工程师,为了工作,为了就业我们免不了要参加各种各样的面试。为此总结了面试前的注意事项:
第一:注意自己的仪容仪表
面试之前,一定要再次从头到脚地将自己的仪容仪表检查一遍。检查时主要包括,自己的牙缝是不是还有食物残渣,所以你需要就近找一个卫生间,如果没有卫生间就近找一个角落也是可以的,但是切记一定不要在大庭广众之下。因此,为了给自己整理出着装的时间请在约定时间前20分钟到达。
第二:再次检查面试时所需的资料是否都已带全
这些资料主要包括:身份证明、学历文凭证明、个人简历、以往作品等等,如果这些东西齐全之后,需要对这些资料做一个整理与排序。因为没有哪个面试官希望看到面试者拿出一堆“莫名其妙”的东西塞给他,让他自己再一页一页的翻找自己需要的内容,如果说这些资料在面试官手中不小心散落一地,结果可想而知。这样的求职者在面试官眼中也一定不是一个让人放心、有条不紊的员工。当然如果检查时发现资料没有带全,也不要紧张。反而你要庆幸幸亏及时检查,也有足够的时间组织语言去向面试官解释。
第三:面试之前将通信工具调成振动或关闭状态
虽然说面试者与面试官之间是一个平等的关系,但毕竟你是去人家公司求职的,始终处于一个被动的状态,所以最起码的尊重还是要做到的。曾经有调查显示,对于面试过程中接电话或是被电话打断的求职者,会被HR减分。
第四:等候面试官时,仔细观察多了解面试公司
在等候面试官时,可以暗自观察一下公司的大体情况比如员工的着装风格、公司的LOGO或是贴在墙上的企业文化、公司的环境等等,一来可以在接下来的面试过程中表现出自己对公司的认同感,二来也可以让自己对求职公司多些了解,以确定是否要接受这里的工作。如果你身边有公司的资料宣传架,不妨取一本翻看一下,也会增加HR对你的好感。
第五:放松心情,保持自信
面试时一定要保持一定的自信,这样也会给面试官留下很好的印象。面试只是你步入工作的第一步,即便是失败了那也是人生重要的经历。失败是为了更好的迎接下一个挑战。
作为一名web前端工程师千万不要觉得懂技术面试就能万事大吉了,像以上五点细节性的东西也是一定要掌握的。
面试题系列:
网页链接
㈢ 前端常见面试题
前端开发可能问到的问题:
自我介绍(一定要对项目很熟悉)
ui-app web前端技术体系?
响应式怎么做?
render跟状态的差异
类组件的生命周期?
阻止冒泡,阻止事件默认行为
文本垂直居中。 line-height设置为元素高度。
用rece讲数组中的对象进行合并
解释localstorage sessionstorage cookie
eventbus满足event.on('eventname', callback)
display有几个值?默认值?
position有几个值?默认值?
div水平垂直居中?
position有哪些值
react相关问题(概念理解、通讯组件等)、react常用内置
React-router
html+css
页面增删改查
position的值 absolute relative fixed static
工作中是怎么联调和上线的(现场想合适的前后端联调方式,能和webpack环境切换联系起来)
antd的Form shouldUpdate增量更新方式,性能优化。
对Hooks的理解
3:操作dom点击事件向服务器上传数据,在上传未完成之前不可重复操作事件
4:日期格式化,日期不足前两位补0(2021-06-06 06:06:00)
用css写一个布局,左侧固定宽度,右侧自适应
你看
㈣ 假如让你进行Web前端的电话面试,你会问什么问题
如果我作为Web前端电话面试的面试官,那么我就要进行多方面的考量,不仅考量这个人的专业能力,也要考量这个人的综合素质等。
第一个问题:自我介绍
这是面试中最常见的第一个问题,并且自我介绍十分重要,因为这短短的介绍将会在面试官的脑海里形成第一印象,也可能会成为被面试者的刻板印象。
第四个问题:唠家常
前面的正题部分完成后,一般面试官不会很快结束对话,还会问面试者一些家常问题,比如“你是哪里人?”、“你是怎么学习的前端技术?”、“现在有没有女朋友/男朋友?”这些家常问题能让面试官快速的掌握到你在简历之外的东西,是否是本地人、打算何时结婚,都可能成为你能否稳定的完成这份工作的考量。
㈤ Web前端岗位面试题有哪些
前端面试题汇总,基本上会有四大类问题,具体如下:
一、HTML
1、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
2、HTML5 为什么只需要写 <!DOCTYPE HTML>?
3、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
4、页面导入样式时,使用link和@import有什么区别?
5、介绍一下你对浏览器内核的理解?
6、常见的浏览器内核有哪些?
7、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
8、简述一下你对HTML语义化的理解?
9、HTML5的离线储存怎么使用,工作原理能不能解释一下?
10、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?
11、请描述一下 cookies,sessionStorage 和 localStorage 的区别?
12、iframe有那些缺点?
13、Label的作用是什么?是怎么用的?(加 for 或 包裹)
14、HTML5的form如何关闭自动完成功能?
15、如何实现浏览器内多个标签页之间的通信? (阿里)
16、webSocket如何兼容低浏览器?(阿里)
17、页面可见性(Page Visibility)API 可以有哪些用途?
18、如何在页面上实现一个圆形的可点击区域?
19、实现不使用 border 画出1px高的线,在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、网页验证码是干嘛的,是为了解决什么安全问题?
21、tite与h1的区别、b与strong的区别、i与em的区别?
二、css
1、介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
2、CSS选择符有哪些?哪些属性可以继承?
3、CSS优先级算法如何计算?
4、CSS3新增伪类有那些?
5、如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
6、display有哪些值?说明他们的作用。
7、position的值relative和absolute定位原点是?
8、CSS3有哪些新特性?
9、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?
10、用纯CSS创建一个三角形的原理是什么?
11、一个满屏 品 字布局 如何设计?
三、常见兼容性问题?
1、li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
2、经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?
3、为什么要初始化CSS样式。
4、absolute的containing block计算方式跟正常流有什么不同?
5、CSS里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下以后什么区别?
6、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?
7、对BFC规范(块级格式化上下文:block formatting context)的理解?
8、CSS权重优先级是如何计算的?
9、请解释一下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式
10、移动端的布局用过媒体查询吗?
11、使用 CSS 预处理器吗?喜欢那个?
12、CSS优化、提高性能的方法有哪些?
13、浏览器是怎样解析CSS选择器的?
14、在网页中的应该使用奇数还是偶数的字体?为什么呢?
15、margin和padding分别适合什么场景使用?
16、抽离样式模块怎么写,说出思路,有无实践经验?[阿里航旅的面试题]
17、元素竖向的百分比设定是相对于容器的高度吗?
18、全屏滚动的原理是什么?用到了CSS的那些属性?
19、什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
20、视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再次出现,和只出现一次分别怎么做?)
21、::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。
22、如何修改chrome记住密码后自动填充表单的黄色背景 ?
23、你对line-height是如何理解的?
24、设置元素浮动后,该元素的display值是多少?(自动变成display:block)
25、怎么让Chrome支持小于12px 的文字?
26、让页面里的字体变清晰,变细用CSS怎么做?(-webkit-font-smoothing: antialiased;)
27、font-style属性可以让它赋值为“oblique” oblique是什么意思?
28、position:fixed;在android下无效怎么处理?
29、如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)
30、display:inline-block 什么时候会显示间隙?(携程)
31、overflow: scroll时不能平滑滚动的问题怎么处理?
32、有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度。
33、png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?
34、什么是Cookie 隔离?(或者说:请求资源的时候不要让它带cookie怎么做)
35、style标签写在body后与body前有什么区别?
四、JavaScript
1、介绍JavaScript的基本数据类型。
2、说说写JavaScript的基本规范?
3、JavaScript原型,原型链 ? 有什么特点?
4、JavaScript有几种类型的值?(堆:原始数据类型和 栈:引用数据类型),你能画一下他们的内存图吗?
5、Javascript如何实现继承?
6、Javascript创建对象的几种方式?
7、Javascript作用链域?
8、谈谈This对象的理解。
9、eval是做什么的?
10、什么是window对象? 什么是document对象?
11、null,undefined的区别?
12、写一个通用的事件侦听器函数(机试题)。
13、[“1”, “2”, “3”].map(parseInt) 答案是多少?
14、关于事件,IE与火狐的事件机制有什么区别? 如何阻止冒泡?
15、什么是闭包(closure),为什么要用它?
16、javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么?
17、如何判断一个对象是否属于某个类?
18、new操作符具体干了什么呢?
19、用原生JavaScript的实现过什么功能吗?
20、Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?
21、对JSON的了解?
22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗?
23、js延迟加载的方式有哪些?
24、Ajax 是什么? 如何创建一个Ajax?
25、同步和异步的区别?
26、如何解决跨域问题?
27、页面编码和被请求的资源编码如果不一致如何处理?
28、模块化开发怎么做?
29、AMD(Moles/Asynchronous-Definition)、CMD(Common MoleDefinition)规范区别?
30、requireJS的核心原理是什么?(如何动态加载的?如何避免多次加载的?如何 缓存的?)
31、让你自己设计实现一个requireJS,你会怎么做?
32、谈一谈你对ECMAScript6的了解?
33、ECMAScript6 怎么写class么,为什么会出现class这种东西?
34、异步加载的方式有哪些?
35、documen.write和 innerHTML的区别?
36、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
37、.call() 和 .apply() 的含义和区别?
38、数组和对象有哪些原生方法,列举一下?
39、JS 怎么实现一个类。怎么实例化这个类
40、JavaScript中的作用域与变量声明提升?
41、如何编写高性能的Javascript?
42、那些操作会造成内存泄漏?
43、JQuery的源码看过吗?能不能简单概况一下它的实现原理?
44、jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this?
45、jquery中如何将数组转化为json字符串,然后再转化回来?
46、jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?
47、jquery.extend 与 jquery.fn.extend的区别?
48、jQuery 的队列是如何实现的?队列可以用在哪些地方?
49、谈一下Jquery中的bind(),live(),delegate(),on()的区别?
50、JQuery一个对象可以同时绑定多个事件,这是如何实现的?
51、是否知道自定义事件。jQuery里的fire函数是什么意思,什么时候用?
52、jQuery 是通过哪个方法和 Sizzle 选择器结合的?(jQuery.fn.find()进入Sizzle)
53、针对 jQuery性能的优化方法?
54、Jquery与jQuery UI有啥区别?
55、JQuery的源码看过吗?能不能简单说一下它的实现原理?
56、jquery 中如何将数组转化为json字符串,然后再转化回来?
57、jQuery和Zepto的区别?各自的使用场景?
58、针对 jQuery 的优化方法?
59、Zepto的点透问题如何解决?
60、jQueryUI如何自定义组件?
61、需求:实现一个页面操作不会整页刷新的网站,并且能在浏览器前进、后退时正确响应。给出你的技术实现方案?
62、如何判断当前脚本运行在浏览器还是node环境中?(阿里)
63、移动端最小触控区域是多大?
64、jQuery 的 slideUp动画 ,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,该如何处理呢?
65、把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别?浏览器会如何解析它们?
66、移动端的点击事件的有延迟,时间是多久,为什么会有? 怎么解决这个延时?(click 有 300ms 延迟,为了实现safari的双击事件的设计,浏览器要知道你是不是要双击操作。)
67、知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?
68、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法?
69、解释JavaScript中的作用域与变量声明提升?
70、那些操作会造成内存泄漏?
71、JQuery一个对象可以同时绑定多个事件,这是如何实现的?
72、Node.js的适用场景?
(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
73、解释一下 Backbone 的 MVC 实现方式?
74、什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
75、知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?
76、如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
77、前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
78、简述一下 Handlebars 的基本用法?
79、简述一下 Handlerbars 的对模板的基本处理流程, 如何编译的?如何缓存的?
80、用js实现千位分隔符?(来源:前端农民工,提示:正则+replace)
检测浏览器版本版本有哪些方式?
81、我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你来说下会执行几次事件,然后会先执行冒泡还是捕获
㈥ 2022前端开发面试记录(深圳篇)
2022年来到深圳,感觉到了与之前所在城市的差异,心里多少有点落差。虽然时机不太对吧,但是相信一切都会好起来的,给自己加油呀!
整理了一些面试被问到的问题,虽然很多是无效面试,但是我也强行问了面试官,从他们的回答中猜测了一下他们关注的面试点,所以也算是有点收获吧,只是浪费了很多简历和路费,哭唧唧。
——1、区块链——
1-1、vue生命周期;
1-2、vuex属性;
1-3、用户开始登录到登录成功都发生了什么;
1-4、git常用的命令;
——2、金融:vue——
笔试:
2-1、深浅拷贝的区别,为什么会出现深浅拷贝,浅拷贝的优势;
2-2、强制中断 foreach 遍历;
2-3、多处组件复用;
2-4、你对前端是什么概念,前端在整个软件生态内是什么角色;
2-5、Vue2 中数据变化但视图没有发生同步更新,描述一下出现的场景,解决方式,以及该问题发生的可能原因;
2-6、nextTick 是如何确保开发者能够获取到最新的 DOM 状态的;
2-7、如何使用 mixins,有何利弊;
2-8、使用 Hooks 模式开发时,useMemo,useCallback 常用来作为优化的手段。描述一下它们各自的适用场景,以及背后的原理实现?;
2-9、前端从 Jquery 时代演变至如今的三大框架,这种演变的根源是什么,jquery 解决了什么问题,如今的三大框架又是为了解决什么问题出现的?
视频面试:
2-10、js遍历树形结构,每个节点都有一个唯一ID,只能遍历一次;
2-11、组件封装的意义;
——3、知识产权:vue2、vue3、ts、react——
3-1、说一说面向对象的理解,包括继承、封装、多态等;
3-2、说一说promise;
3-3、webpack优化;
3-4、vuex使用场景;
3-5、描述一下对vue响应式原理的理解;
3-6、vue生命周期;
3-7、父子组件钩子函数执行顺序;
3-8、v-if和v-show;
3-9、js数据类型;
3-10、实现深拷贝;
——4、物流——
4-1、vue生命周期;
4-2、生命周期-修改元素样式在生命周期的哪个阶段;
4-3、生命周期-修改数据在哪个阶段;
4-4、生命周期-destroy里面会做哪些操作;
4-5、怎么修改title的内容;
4-6、父子组件传参的具体写法;
4-7、v-model的多种写法;
4-8、js数据类型;
4-9、判断数组的方法;
4-10、实现左边固定右边自适应的布局;
4-11、实现div垂直水平居中;
4-12、flex:1;
4-13、flex详解;
4-14、call,apply,bind是干什么的;
——5、新兴产业——
5-1、封装路由,怎么拦截路由;
5-2、浏览器缓存有哪些,又问localStorage和sessionStrorage的区别和应用场景;
5-3、浏览器强缓存和协商缓存;
5-4、webpack打包机制,构建过程和配置;
5-5、性能优化方法;
5-6、前端的业务和后端的API是怎么做到数据实时请求的(问的其实是前端对后端API接口的封装和管理);
5-7、computed和watch;
5-8、说了几个关于大屏的应用场景,有没有做过,怎么做的;
——6、某水果:vue2、vue3、ts、各种前沿技术都用——
6-1、怎么封装一个组件库/工具类库,比如vue封装过什么复杂组件,jquery封装过什么类库;
6-2、get和post的区别,传参格式等;
6-3、promise怎么用的;
6-4、原型链,test()的原型链;
6-5、websocket;
6-6、es6中的generator;
6-7、es6中的set和map有啥区别,set为什么能去重;
6-8、项目难点;
——7、医疗健康:vue——
7-1、vue自定义指令配置;
7-2、webpack的理解;
7-3、对node的了解,用过express吗;
7-4、项目中的拖拽是怎么做的;
7-5、websocket和socket的区别;
7-6、听过mqtt吗,因为没听过所以解释了一下activemq的用法;
7-7、二维地图的聚合,如果有十万个点,会做什么优化;
7-8、地图实现多个点连成一条线会怎么做;
7-9、地图实现一条曲线;
7-10、内网下git怎么用的;
7-11、openlayers渲染机制;
7-12、父子组件通信方法;
7-13、router中实现拦截;
7-14、对象合并的方法;
7-15、父子组件的生命周期执行顺序,渲染阶段为什么会先执行父组件再执行子组件;
7-16、vue生命周期;
7-17、npm run dev, run build可以在项目中的什么位置找到;
7-18、vue中跳转页面的方法;
7-19、mixins用过吗;
7-20、判断引用类型的方法;
7-21、js数据类型;
7-22、判断基本数据类型的方法;
7-23、for in和for of的用法和区别,两者遍历的是索引还是属性值,两者都可以遍历对象吗;
7-24、foreach和map的区别,两者会不会改变原数组;
7-25、主要用什么技术栈;
7-26、行内元素和块级元素的区别,分别都有哪些,行块级元素有哪些;
7-27、div垂直水平居中,grid知不知道怎么用;
7-28、splice和slice;
——8、智慧园区:vue2、vue3、ts、uniapp——
8-1、flex了解吗,flex布局方向,flex:1 0的页面效果是怎样的;
8-2、做过移动端吗,了解uniapp吗;
8-3、keep-alive;问了一个没听明白的,可能和keep-alive有关系;
8-4、vuex中的action;不用vuex,怎么代替vuex;
8-5、promise.all和promise.on;
8-6、防止表单重复提交;
8-7、async,await的使用;
8-8、vue3和ts的了解;
8-9、防抖怎么控制时间;
8-10、vue中的data为什么要设计成一个函数;
——9、智慧工地:vue、uniapp、小程序——
9-1、Vuex是干什么的;
9-2、openlayers怎么用的;
9-3、性能优化;
9-4、spa首屏加载优化;
9-5、bundler.js太大,打包怎么优化;
9-6、加密方式了解多少,比如md5,base64等,一大堆没听过的;
9-7、冒泡排序的实现原理;
9-8、js设计模式;
——10、某快递公司外包——
10-1、一棵树的数据,给的是列表格式,转换成树形结构;
10-2、项目相关的,聊天怎么做的,拖拽怎么做的,拖拽的数据怎么渲染的,拖拽重叠怎么处理的;
10-3、js设计模式;
——11、三维:vue、cesium——
11-1、一棵树的数据,给的是列表格式,转换成树形结构;
11-2、openlayers怎么用的,发布过wms吗,发布流程是怎样的;
11-3、openlayers转换经纬度的方法名是什么;
11-4、cesium常用的函数;
11-5、vue数据双向绑定原理;
11-6、Vue中data属性如果改变一个数组的下标,会不会马上发生变化,不变化可以怎么解决
11-7、数组常用方法有哪些;
11-8、 map和filter的区别;
11-9、es6常用的方法;
11-10、父子组件通信,兄弟组件通信;
11-11、new具体进行了什么操作;
——12、医疗:vue、angular——
12-1、js渲染机制和运行机制;
12-2、vue数据绑定原理;
——13、建设行业:vue、uniapp——
笔试:
13-1、||与&运算符;
13-2、垂直居中方案;
13-3、let a=arr, b=a, c=arr.concat(), a[0]=3,打印b和c,应该是深浅拷贝;
13-4、实现font-size:12;
13-5、接口路径,给一个地址 http://localhost/projectname/resource/index(http://localhost/projectname/resource/index).html ,根据url请求接口路径写出完整路径,’/ geturl.do ’,’ geturl.do ’,’../ geturl.do ’;
13-6、微信小程序流程和主要文件;
13-7、获取url参数及内容;
13-8、$(function(){}) / (function(){}) / (function(){})()的区别;
13-9、前端优化方案;
面试:
13-10、项目难点;
13-11、git工作流;
13-12、jquery项目会不会用webpack打包;
13-13、webpack优化;
13-14、web优化;
——14、文化:uniapp——
14-1、ssr渲染;
14-2、ajax和axios的区别;
14-3、cookie和session的区别;
14-4、vue生命周期;
14-5、数据请求写在哪个生命周期中;
14-6、router的history模式和hash模式;
14-7、工作中的开发流程;
14-8、uniapp的开发流程和坑;
14-9、uniapp滑动问题,下滑切换视频不生效,一般是什么原因;
14-10、uniapp加载速度慢,点击加载图片速度太慢,一般是什么原因;
——15、企业平台某外包:vue,node,性能优化——
15-1、说一说websocket;
15-2、vue数据双向绑定原理;
15-3、项目难点;
15-4、对mvvm、mvc、mvp等的理解;
15-5、vue的常见指令;
15-6、computed和watch;
15-7、class和style怎么绑定;
15-8、ajax和axios的区别;
15-9、axios拦截器,axios的post请求;
15-10、对前端渲染,服务端渲染的理解;
——16、智慧城市:vue,node,three.js——
16-1、vue生命周期;
16-2、vue组件通信方法;
16-3、js的继承;
16-4、oracle、mysql、sqllite的区别;
16-5、oracle连表查询;
16-6、openlayers项目场景;
16-7、cesium项目场景;
——17、租房:jquery+layui,vue2——
17-1、笔试:
17-2、foo打印题;
17-3、this打印题;
17-4、变量提升打印题;
17-5、let arr=[1,2,[5,8,[9,[3,5,]7,]20,37]] 把数组扁平化成一个数组,并进行去重升序;
17-6、let a=[1,2,3,4,5,6,7]; let b=[4,5,6]; 求b在a中第一次出现的位置;
17-7、面试:主要问项目
——18、跑腿:vue2,vue3+ts——
18-1、对html5语义化的理解;
18-2、css实现一个三角形;
18-3、css怎么实现0.5px的线,为什么有这种需求,涉及到兼容性问题;
18-4、怎么解决变量提升的问题;
18-5、es6新增了哪些定义变量的方式;
18-6、const定义的变量可以被修改吗;
18-7、map和filter的区别,会改变原数组吗;
18-8、es6去重的方法;
18-9、谈一谈对promise的理解;
18-10、除了链式调用,promise还可以怎么处理同步请求(async/await);
18-11、对vue响应式原理的理解,核心是什么;
18-12、对vue生命周期每个阶段的理解;
18-13、为什么要用key,key有什么作用;
18-14、v-if和v-show;
18-15、Vue中data为什么是一个函数;
18-16、vue各场景下的传值方式有哪些,比如父子组件,兄弟组件,祖孙组件;
18-17、对vuex的理解和使用场景;
18-18、vue常见修饰符;
18-19、Vue3用过吗(因为没用过,所以就只针对响应式原理说了一下vue3和vue2的区别);
——19、实业:jquery,vue2,vue3——
笔试:需要解释
19-1、html5新标签,css3新特性;
19-2、js+css3实现某元素以50px每秒的速度左移100px;
19-3、css实现左中右布局,不改变文档流;
19-4、js兼容性有哪些,以及常见的解决方案;
19-5、描述一下事件循环机制eventloop,eventloop解决了什么问题;
19-6、给了一个题,大概是后端返回的接口数据,data的格式有很多,比如null,对象,数组,字符串等,怎么处理这种问题;
19-7、前端性能优化方法,首屏页面怎么优化;
19-8、用js写一个方法实现数据去重并排序(用es5和es6+实现);
19-9、给定一个数组,把数组中为0的往后排,其他值按顺序排序; (示例:[1,0,4,0,5,3]转换结果为[1,3,4,5,0,0])
19-10、用0,1,2代表红黄蓝三种颜色,实现以下排序,不能用array.sort实现;(示例:[0,1,0,2,0,1,2]转换结果为[0,0,0,1,1,2,2])
面试:
19-11、flex布局;flex:1对应的属性;
19-12、讲一下原型链; proto 和prototype有什么区别;字符串有没有原型;给定一个str,str.test()调用的谁的test方法;
19-13、讲一下闭包;什么情况下才能算是闭包;形成闭包的条件;列了三个题让你判断是不是闭包;
19-14、v-if和v-show是干什么的;应用场景有哪些;给定一对父子组件,默认值是false,另外有一个ajax请求,值发生了以下变化(false true false true true),在v-show和v-if中,父子组件的哪个阶段里会请求ajax;
19-15、computed的实现原理,怎么实现一个computed;
19-16、css中,transform,margin,position的都是怎么渲染的,渲染机制是什么;amd,cmd,commonjs了解吗;
㈦ 如何面试前端开发
自我介绍,可以简单介绍你毕业什么学校,什么专业,工作经历简明扼要的说出来就可以了,不要详细到你哪年进入公司,哪年离开公司,负责项目做什么的,说一大通。这个对面试官来说,想让你自我简单介绍,其实考察点有两方面:1面试者的表达能力和概括能力,2面试者目前掌握什么技术,做过什么项目,在项目中的角色来初步判定这个人的能力
有些面试者回答问题,在介绍项目的时候,很大概的说,或者一句话前端都是我做的,这些都是我设计的;这样肯定是不行的,面试官让你介绍项目的时候肯定是希望你详细介绍你的项目,这个项目使用者是谁,让我知道谁在使用这个项目;你负责哪些模块,哪些组件,那些模块实现什么业务逻辑,用到什么技术,这个能让面试官更加知道你项目的业务,才能从你描述中知道这类的业务会遇到什么问题,以及你使用的技术是否合理,能更加判定你的能力,才能更好的提出问题,才能更好的面试下去。
前端技能在问到很多面试者的时候感觉自己都懂前端,其实他们只是懂使用js敲代码而已,很多前端知识,以及前端原理都不懂,只会使用的话,那么永远只会走来人家的后面。就那一个比喻来说吧,如果你只是一个会开车的司机,不会修车或者造车,那么如果哪天车出了毛病,你都不知道,到时候才去学习车的构造原理。或者你会说我直接给维修厂不就可以了,如果维修厂关门了呢怎么办。所以我们前端开发人员还是要脚踏实地,不要说我会使用vuejs,react前端框架,问你一个mvvm模式是什么,你都说不知道,怎么实现mvvm框架,在不使用别人开发mvvm框架,自己可以开发一个简单的mvvm框架?
㈧ Web前端面试的常见面试题汇总
今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧,希望则宽本篇文章能够对大家有所帮助。1.渐进增强与优雅降级
渐进增强
并不是一种技术,而是一种设计思想。各个浏览器的渲染能力各不相同,要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性,保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等),并为他们提供当前条件下最好的体验,这就是渐进增强得核心思想。
优雅降级也是一种设计思想,为了保证在高版本浏览器中提供最好的体验,碰到低版本浏览器再降级进行兼容处理,使其能正常浏览。
这两种思想的区别在于:
1.渐进增强是向上兼容,优雅降级是向下兼容;
2.渐进增强是从简单到复杂,优雅降级是从复杂到简单;
3.渐进增强关注的是内容(保证核心内容),优雅降级关注的是浏览体验(为了兼容低版本浏览器)
2.DOCTYPE
作用
DTD(DocumentTypeDefinition,文档类型定义)是一系列的语法规则,用来定义XML或(X)HTML
的文档类型。浏览器会使用它来判断文档类型,决定何种协议来解析,以及切换浏览模式。
DOCTYPE是用来声明文档类型和DTD
规范的,一个主要的用途便是文件的合法性验证。如果文档代码不合法,那么浏览器解析时便会出现一些差错。
HTML5的文档类型声明:
HTML4.01Strict(HTML4.01严格模式)的DTD包含所有HTML
元素和属性,但不包括展示性的和弃用的元素(如font),它的文档类型声明:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
标准模式与怪异模式
怪异模式(Quirks
Mode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规好卜范,随着浏览器支持越来越多的规范,在那些旧的浏览器中开发的页面在显示时会友盯穗被破坏。为了向后兼容,浏览器发明了怪异模式,一行错误或无效的
DOCTYPE都会触发怪异模式。
浏览器使用文件开头的DOCTYPE来决定用怪异模式处理或标准模式处理。DOCTYPE
可以确保不同浏览器以相同的方式解析文档,以及执行相同的渲染模式。
怪异模式与标准模式的主要区别:
1.怪异模式的宽度和高度会包含padding和border。标准模式不包含,标准模式下可以通过设置box-sizing:
border-box将标准盒模型转化成怪异模式下的盒模型。
2.怪异模式下,当内容超出容器高度时,会将容器拉伸,而不是溢出。
3.怪异模式下,在表格中的字体样式(如font-size)不会继承。
4.怪异模式下颜色值必须使用十六进制标记法。
3.语义化
HTML5
中的语义化就是让元素、属性或属性值有含义,更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离,元素只负责文档内容的结构与含义,而CSS
样式控制内容的呈现,像元素,没有语义但却能将字体变粗,这类元素违背了语义化的目的,将会被废弃。
优点
·使得HTML文档结构清晰、布局合理、主体突出、可读性更强。
·有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
·方便其他设备解析,如盲人阅读器根据语义渲染网页。
·有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。
语义化标签
·
·footer内容的页脚,通常包含该章节作者、版权数据或者与文档相关的链接等信息;
·article
文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目;
·nav描述一个含有多个超链接的区域,该区域包含跳转到其他页面或页面内部其他部分的链接列表;
·section表示文档中的一个区域(或节),比如,内容中的一个专题组;
·main定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站
logo,搜索框(搜索框作为文档的主要内容);
·aside
表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。
4.超链接伪类
:link、:visited、:active和:hover的声明顺序是怎样的?
:link表示未访问的链接状态;
:visited表示已访问状态;:active表示激活状态(鼠标按下);:hover表示悬停状态。
推荐顺序是LVHA,即:link:visited:hover:active。理由如下:
·当鼠标悬停在未访问的链接上时,:link和:hover都会命中,如果:hover在:link
之前声明,那么(:hover)就会被覆盖;
·当鼠标悬停在已访问的连接上时,:visited和:hover都会命中,如果:hover在:visited
之前声明,那么(:hover)就会被覆盖;
·当鼠标单击链接时,:active和:hover都会命中,我们大多是想让:hover只在悬停时展示样式,按下鼠标时使用:active
样式,因此:active在:hover之后声明;
·综上,:hover应在:link和:visited之后,在:active之前,因此active在最后。而:link和
:visited两者的顺序无所谓,互不影响。
5.CSS常见的长度单位
CSS中除了px长度单位之外,还有下面几个长度单位:
·pc六分之一英寸,1pc=12pt=1/6*1in=16px;
·pt一磅,72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;
·in一英寸,1in=2.54cm=96px;
·ex在含有“X”字母的字体中,它是该字体的小写字母的高度。对于很多字体来说,1ex≈0.5em;
·em1em等于父级元素的字体大小,2em就是父级元素字体大小的二倍;
·rem当用在根元素()的font-size上面时,它代表了它的初始值;
·ch代表元素所用字体font中“0”这一字形的宽度;
·vh1vh相当于视口高度的1%,100vh就是视口的高度;
·vw1vw相当于视口宽度的1%,100vw就是视口的宽度;
·vmax视口高度vw和宽度vh两者中的最小值
·vmin视口高度vw和宽度vh两种中的最大值;
·%相对于父级元素的大小来确定;
参考:CSS
CSSpercentage[2]
6.事件对象
冒泡与捕获
事件冒泡与捕获是事件处理的两种机制,主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。
在点击子元素时,浏览器运行了两种不同的阶段:捕获阶段和冒泡阶段。捕获阶段的行为:
·浏览器检查元素的最外层祖先,是否在捕获阶段中注册了一个onclick事件处理程序,如果是,则运行它;
·
然后,它移动到中单击元素的下一个祖先元素,并执行相同的操作,然后是单击元素再下一个祖先元素,依此类推,直到到达实际点击的元素;
而冒泡与捕获恰恰相反:
·浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序,如果是,则运行它;
·然后它移动到下一个直接的祖先元素,并做同样的事情,然后是下一个,等等,直到它到达元素;
而现代浏览器在默认情况下,所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件,然后向上冒泡,触发父元素绑定的事件。
addEventListener函数的第三个参数是个布尔值。含义:
·当布尔值是false时(这也是默认值),表示向上冒泡触发事件;
·当布尔值是true时,表示向下捕获触发事件;
不能冒泡的事件
有些事件是不会冒泡的。比如:
·blur元素失去焦点时触发,focusout事件也是失去焦点时触发,但可以冒泡;
·focus元素获取焦点时触发;
·mouseenter鼠标移动到元素上时会触发该事件,与之对应的是mouseover事件,但会冒泡;
·mouseleave鼠标离开元素时触发,与之对应的是mouseout,但会冒泡;
事件冒泡可以让我们利用事件委托,尤其是处理大量子元素时,如果给每个子元素都绑定事件,这是不优雅的,可以将事件绑定到父元素上,并让子节点上发生的事件冒泡到父节点上,利用
e.target属性可以获取到当前触发事件的子元素。
事件对象中的方法
·stopPropagation()阻止事件冒泡,当设置后,点击该元素时父元素绑定的事件就不会再触发;
·preventDefault()阻止默认事件的发生;
·stopImmediatePropagation()它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡,比如给同一个div
元素绑定多个click事件(使用addEventListener方法可以注册多个),当在第二个事件函数中调用
stopImmediatePropagation方法时,点击div元素时,后面注册的click将不会被触发,而且还会阻止事件冒泡;
比如下面的例子,给p绑定多个click事件,在第二个事件函数中调用stopImmediatePropagation,第三个click
事件就不会触发,因为也阻止了冒泡,因此父元素的click事件也不会触发。
paragraph
㈨ 女生怎么面试web前端
学生需要的基础知识:
1. html + css。
2、JavaScript。不是所有的网页都必须有js,但是要想实现一些超酷的功能和界面的时候,就需要涉及到js。如果没有其他编程语言的基础的话,学起来可能要费些力,还是建议先报个补习班系统学习。
3、Photoshop、flash。熟悉会一点儿就行了,没必要全部都学得精通,当然如果扰衫你在学习的过程中,发现你ps或者flash比较感兴趣的话,也可以尝试做美工这一行。
4、html5和css3。可以先了解一下,然后再入手。毕竟IE的浏览器大多还不支持。
5、浏览器兼容。懂web标准,熟练手写xhtml css3并符合w3c标准。代码能兼容主流浏览器Firfox,Chrome、Safari、IE、Opera。虽然IE6很多都不兼容,但现在还使用的人还是有的。
6、熟悉一门后台编程语言asp、php、jsp等。
学Web前端其实没有男女之分,它不像编程需要时常加班熬夜写代码,所以对于女孩子缓搜腔来说没有什么障漏高碍。
㈩ 如何面试前端工程师
随着时代的发展,很多新兴的就业职位随之产生。前端工程师将就是随着互联网的快速发展而产生的。其实在很多人的观念里,前端工程师也就是一个切页面的而已,他们也就是会html、css、javascript这些没有任何技术含量的网页制作而已。然而随着技术飞速发展,人们对这些技术的要求也是越来越高,如果只凭着一个人来把所有的事情都解决是很困难的,所以这个时候前端工程师就开始发挥着他们很大的作用了。
那我们应该如何来面试前端工程师呢?
谈吐要大方得体
在我们在面对面试官时我们千万不要紧张。在进行自我介绍时我们要努力做到自信大方、吐字清晰。我们在自我介绍时要用简明扼要的话语来介绍自己,突出自己的优点表明自己的求职意向。你要通过寥寥数语把自己的优势都向面试官介绍清楚。记住不必要的话语要少说。
好了关于如何面试前端工程师这个话题我就聊到这了。希望我的回答能对你有所帮助。