模拟面试
简历问题
-
基本信息-年龄
24-->25 -
工作技能
将Vue的技术栈添加到比较靠前 -
工作项目
项目三中的采用了php和mysql的内容修改
自我评价
- 出现的问题
首先没有准备好自我介绍，
面试题
-
ElementUI三要素
props：获取父组件传递给子组件的值
$emit：获取子组件的传递给
插槽：用于将数据渲染在组件中 -
http和https的区别
-
服务器攻击
-
SEO的优化
-
host攻击
-
host文件作用
出现的问题
-
从哪来？
-
为什么到上海？
-
为什么离开之前的公司？
-
在之前的公司薪资多少？
-
有多少前端？多少后台
第一次面试
啄本网络
-
时间：2019/2/25 上午10：00
-
地点：上海长宁区临空经济园区创业楼D南座六楼
-
技术要求
- 精通html(html5)、css(css3) ，熟悉页面架构和布局；
- 对web标准、表现、行为与数据分离、html 语义化等有深刻理解；
- 熟练使用常见的javascript框架；
- 熟练移动端web规范和响应式布局，并有项目经验；
- 对网站性能优化有研究并有相关实践经验；
- 对浏览器兼容性有实战经验；
- 对前端技术有持续的激情，追求用户体验，责任心强，善于学习新事物。
-
面试内容
-
前端的优化
1、雪碧图技术
2、浏览器渲染机制
3、webpack、gulp等打包工具的使用
4、避免页面跳转，也就是使用单页面应用的开发。
5、延迟加载、懒加载技术
6、将css放在HEAD中
7、Vue项目的按需加载
8、关于React的性能优化
9、设置合理的http缓存 -
浏览器一次可以发送多少请求
答：8个以内，同时发送多个请求，会导致浏览器的卡顿 -
tcp协议的三次握手
答：
第一次握手：建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认；SYN：同步序列编号(Synchronize Sequence Numbers)
第二次握手：服务器收到syn包,必须确认客户的SYN（ack=j+1）,同时自己也发送一个SYN包（syn=k）,即SYN+ACK包,此时服务器进入SYN_RECV状态；
第三次握手：客户端收到服务器的SYN＋ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手. -
http协议
-
-
总体评价
- 使用的技术是 vue.js + php + mysql
- 做的项目类型：电商项目等
- 试用期6个月，试用期工资为11k，说是3个月转正给15k
- 甲方公司
- 工作时间：早9晚6+双休(加班可调休)
- 人员很少，目测只有几个人
第二次面试
中娱时代科技
-
时间：2019年2月26日（周二） 下午13:40
-
地点：上海市 普陀区 丹巴路28弄36号 旭辉世纪广场6号楼 710-715室 中娱时代科技
-
网址：https://www.zhipin.com/job_detail/e0e5f150e50b278d1HZ80t66FFU~.html?ka=search_list_1
-
技术要求
- 熟悉面向对象的软件设计方法，且备丰富的Web应用开发经验，具备前端工程化思维；
- 浏览器兼容；
- 熟悉常用web端开源框架，具有编写或二次开发Web框架的能力，并有实际项目经验；
- 精通Javascript编程语言，掌握js面向对象的编程思想；熟悉html5、css3，能利用div+css快速编写HTML代码；
- 精通页面布局；
- 至少熟悉一门非Web前端语言（Java、.NET、PHP、c++）
-
面试内容
- 做过哪些项目？
- 哪些项目是上线的？
- 在这些项目中，你负责了哪一块？
- 在这些项目中，你有没有感觉到有哪些难点
-
总体评价
- 前台小姐姐很漂亮，我很是喜欢，待人温和。人事小姐姐，虽然有点黑，但是笑起来有酒窝，也还是不错的；但是技术不符，人家用angular和react，我只能用vue.js和小程序
- 公司人员大概有20人左右，气氛不错
- 存在加班，待遇也还好，但是交的社保不在上海，好像是在杭州
- 公司位置，周围环境不错，距离地铁口较远，需要骑车过桥
第三次面试
云印技术
-
时间：2019年2月27日（周三） 上午10:40
-
地点：上海市 长宁区 永融国际中心 9楼
-
网址：https://www.zhipin.com/gongsi/4f447ff0ade7cb1c1nR709k.html?ka=personal_interview_brand_4f447ff0ade7cb1c1nR709k
-
技术要求
- 热爱互联网行业，计算机或相关专业专科及以上学历；
- 专职从事前端开发1年以上，精通HTML5、CSS3、JavaScript；
- 熟悉W3C标准与ES规范，熟悉Web语义化；
- 精通JS以及主流JS框架，熟练使用jQuery、vue.js、Element UI；
- 熟悉Node JS、webpack、es6，熟悉前端模块化、工程化开发，有 react 经验者优先考虑；
- 有小程序经验者优先。
-
面试内容
-
vue的生命周期函数
- beforeCreate：这个时期，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；
- create：这个时候可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作；
- beforeMounte：在挂载开始之前被调用：相关的 render 函数首次被调用。
- mounted：挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行
- updated : 如果对数据统一处理，在这里写上相应函数
- beforeDestroy : 可以做一个确认停止事件的确认框
-
nextTick : 更新数据后立即操作dom
-
vue的阻止事件冒泡的方法
- .stop 阻止单击事件冒泡
- .prevent 提交事件不再阻止默认行为
- .capture 用事件捕获模式
- .self 事件在该元素本身（比如不是子元素）触发时触发回调
- .once 只执行一次
-
小程序阻止事件冒泡的方法
- 使用bind的绑定事件，是可以触发冒泡事件的，就是可以触发父view的事件，使用catch是不会触发冒泡事件
-
跨域的原理
- 浏览器的安全基石“同源政策”，基于此产生跨域问题。
- 同源指的是三个相同：协议相同（例如http）、端口相同、域名相同。
-
jsonp的原理
- 首先在客户端注册一个callback，然后把callback的名字传给服务器。此时，服务器先生成json数据，然后以javascript语法的方式，生成function，function名字就是传递上来I带参数jsonp。最后将json数据直接以入参的方式，放置function中，这样就生成js语法的文档，返回给客户端。客户端浏览器，解析script变迁，并执行返回javascript文档，此时数据作为参数，传入了客户端预先定义好的callback函数里。简单的说，就是利用script标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。
-
jsonp和script同为异步请求的区别
-
vue-router的原理
答：内部的执行流程- 1.点击router-link，就会触发路由，到路由中找组件
- 2.路由被触发，根据前的请求的hash值，找到相对应的path绑定的组件
- 3.找到了这个组件，将这个组件的模板内容渲染在路由的出口位置
- 4.页面中的数据发生了改变
-
postion的属性值有哪些？
- absolute 生成绝对定位的元素
- fixed 生成固定定位的元素
- relative 生成相对定位的元素
- static 默认值。没有定位，元素出现在正常的流中
-
css中有哪些样式可以继承
- 所有元素可继承：visibility和cursor
- 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
- 块状元素可继承：text-indent和text-align
- 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
- 表格元素可继承：border-collapse
-
-
总体评价
-
招聘的人事不好，非常的刁钻刻薄
-
面试官没有礼貌，问人问题都不带看人的，语气不屑，时时嘲讽
-
最大问题：vue都忘了，小程序记不起来
第四次面试
奇码数字信息有限公司
-
时间：2019/2/27 下午14:00
-
地点：上海市张江高科技园区科苑路151号4楼南，（在兴业银行和浦发银行中间一幢）
-
网址：https://www.zhipin.com/gongsi/4f447ff0ade7cb1c1nR709k.html?ka=personal_interview_brand_4f447ff0ade7cb1c1nR709k
-
技术要求
- 追求用户体验的极致优化，积极思考用户使用场景
- 精通 HTML5/CSS/javascript，熟练使用业界各类H5制作工具
- 熟悉各类常见的javascript框架，如jquery等
- 熟悉网页优化：如浏览器兼容性优化、Style优化、流量优化等，
- 熟练使用各类前端开发调试工具，如 chrome 开发者工具
- 熟悉使用VUE 。
- 了解angular react 有项目方面经验更好。
-
面试内容
- 做过哪些项目
- 面试题
- 使用过小程序么
- 移动端的适配
- 移动端的样式
第五次面试
蔚来汽车-车联网项目
-
时间：2019.2.28 周四 下午15:00
-
地点：嘉定区安拓路56号11号楼1单元2楼
-
技术要求
- 追求用户体验的极致优化，积极思考用户使用场景
- 精通 HTML5/CSS/javascript，熟练使用业界各类H5制作工具
- 熟悉各类常见的javascript框架，如jquery等
- 熟悉网页优化：如浏览器兼容性优化、Style优化、流量优化等，
- 熟练使用各类前端开发调试工具，如 chrome 开发者工具
- 熟悉使用VUE 。
- 了解angular react 有项目方面经验更好。
-
面试内容
- 两种盒子模型
- 标准盒子
- 怪异盒子
- css实现一个响应式的div，宽高比为1:2
- 给父元素设置一个font-size
- 子元素设置 width：1em; height：2em
- rem是怎么实现的
- 通过设置根元素的font-size的大小实现的
- 判断数据类型为数组
- typeof 数组
- 数组 instandof Array
- 数组.proto == Array.constructor
- 动态绑定事件
- 先获取到元素
- 遍历绑定事件
- 预解析和变量提升
- 函数和变量声明会提前
- 如果函数名和变量名相同，变量被函数临时覆盖，函数的优先级高于变量的
- new做了哪几件事
- 创建了一个新的实例
- 让this指向了这个实例
- 给这个实例添加了新的属性和方法
- 将这个实例返回
- 封装promise
- 了解node么，它是用来干什么的？
- 如何设置动态路由
- routes[path:/item/:id]
- 如何获取路由后面的参数
- $route.refs[]
- prototype和proto以及constructor的作用
- 构造函数通过prototype的方法可以获取到原型对象，实例通过调用proto获取到原型对象，原型对象通过constructor获取到该原型对应的构造函数
- 两种盒子模型
第六次面试
上海极吼吼信息技术有限公司
-
时间：2019/3/1/ 上午10:00
-
地点：上海市长宁区定西路788号4楼4E。
-
技术要求
- 熟悉Javascript技术原理和面向对象编程技术，熟练掌握jQuery/EasyUI等框架的使用开发，熟悉AJAX、JSON、DOM、HTML5、CSS3等前端技术。
- 熟悉Vue，Angular等前端框架。
- 有微信公众号、微信小程序、PC、WebApp（H5）等前端开发经验。
- 熟悉svn、git等工具。
- 熟悉NodeJs，并有过相关开发经验。
- 熟悉组件化和前后端分离的开发方式，对前端工程化有自己的理解。
- 具备一定的UI设计常识及UI产品审美水平。
- 了解或使用过Java或其他后端开发语言者优先，有Web门户开发团队任职经历者优先，熟悉Web性能优化，浏览器兼容性优化，有移动Web开发经验者优先。
-
面试内容
- 小程序的实现
第七次面试
上海岐黄信息技术有限公司
-
时间：2019.03.01 14:00
-
地点：上海市 静安区 新华文化创新科技园 A幢6023
-
技术要求
- 本科学历或以上，4年以上前端开发经验
- 精通HTML、CSS/CSS3、JavaScript，精通H5移动开发，熟练掌握Jquery、zepto等主流前端技术和框架。
- 熟悉移动开发技术，熟悉主流MVC和MVMM框架。
- 有WEBGL、Canvas、Vue开发经验，对页面渲染及执行性能有深入了解。
- 熟悉JSON、XML等跨平台数据格式，熟练掌握前后端数据接口访问和对接。
- 良好的逻辑思维和沟通协作能力；有责任心，学习能力强，抗压能力强。
-
面试内容
- 没有面试
第八次面试
上海彼邑网络科技有限公司
-
时间：3/01 本周五 下午16:30点
-
地点：上海市徐汇区龙华路2577号创意大院16号楼（地铁11、12号线：龙华路站）
-
技术要求
- 2年以上前端开发工作经验,熟练JavaScript、AJAX，熟练应用至少一种JS框架，如jQuery；
- 熟练掌握前端开发技术(HTML5、CSS3、JavaScript)，了解相关核心技术DOM、BOM、Ajax、JSON等；
- 能熟练高效手工编写HTML5及CSS3代码，确保代码对各种浏览器的良好兼容性，有响应式web设计的开发经验 ；
- 良好的编程习惯和团队协作精神，工作积极向上；
- 熟悉使用Photoshop等相关设计软件，对界面有一定的审美能力者优先。
-
面试内容
- 当前的小程序怎么实现的
- 首页加载过慢怎么处理
- h5添加了哪些新的标签和属性
- css中动画的实现
- 用过哪些es6的东西
- 将两个数组合并成一个新的数组，将重复只保留一份
- 小程序和移动端的区别
- 小程序的层级最多可以嵌套几层
-
总体评价
- 常用技术：html5，css3，js
- 需要使用动态样式库
- 做小程序和App一样的东西，就是用小程序实现
- 前端10，后台有6
- 后台使用：java，php，.net，
第九次面试
上海行蕴信息科技有限公司（第一秒电商科技）
-
时间：2019/3/4（下周一）15：30
-
地点：杨浦区控江路1500号联创设计谷2号楼1楼（乘车路线：地铁8号线江浦路站1号口出，步行至马路对面联创设计谷）
-
技术要求
- 3年以上前端开发经验;
- 有使用 VUE, Angular，Backbone框架的实际项目经验;
- 精通HTML5和CSS3开发规范;
- 使用Gulp和Webpack构建工具的实际项目经验;
- 使用SASS或者LESS等CSS模块的实际项目经验;
- 对IONIC有相关经验者优先;
- 熟悉ES6的规范，对TypeScript有一定了解;
- 有移动端或者微信小程序研发背景优先
-
面试内容
-
有没有了解过其他的小程序
- 百度，阿里，腾讯
-
css中的盒子模型的区别
- 标准盒子模型： 真实width(可变)=border(变)+padding(变)+内容width(变)
- 怪异盒子模型： 真实width(固定)=border(变大)+padding(不变)+内容width(变小)
-
css中的rem和em
- rem是设置的html的font-size
- em是当前元素的父级元素的font-size
-
rem那种情况下用的比较多
- 移动端的响应式布局
-
如何通过js实现响应式布局
- window.onresize事件监听
-
让一个盒子水平垂直居中，盒子的高度不固定
-
方式1
transform: translate(-50%,-50%); position: absolute; top: 50%; left: 50%; -
方式2
display:flex; display:-webkit-flex; justify-content:center; align-items:center;
-
-
如何通过flex实现两边固定，中间自适应
#outer{ display: flex; width: 100%; flex-flow: row nowrap; } .left,.right{ width:200px; height:50px; background: red; } .middle{ flex-grow: 1; //决定如何分配剩余空间 background: yellow; } -
鼠标移上去，盒子会慢慢变宽，用css封装动画实现
div#transitionhovertree { width:100px; height:100px; transition:width 2s; } div#transitionhovertree:hover { width:300px; } -
保持登录状态的方法
- cookie中保存
- localStrong保存
-
使用localStrong如何保持登录状态
- 将登陆成功返回的sessionID保存在localStong中
-
使用发送请求如何携带登录信息
- 发送get请求，将数据拼接到请求的地址中
- 发送post请求，将数据作为请求体的内容发送
-
在localStrong中的token怎么发送
- 将token获取并发送
-
如何请求失败，如何判断是前端的问题还是后台的问题
- 通过状态码
-
常见的状态码
- 2XX 响应结果表示从客户端发来的请求在服务器端被正常处理了。
- 200 OK 请求被成功处理，服务器会根据不同的请求方法返回结果：
- 204 No Content 该状态码表示服务器接收到的请求已经处理完毕，但是服务器不需要返回响应体.
- 206 Partial Content 该状态码表示客户端进行了范围请求，而服务器成功执行了这部分的GET请求。
- 3XX 响应结果表明浏览器需要执行某些特殊的处理以完成请求。
- 301 Movied Permanently 永久性重定向。该状态码表示请求的资源已经被分配了新的URI，并且以后使用资源现在所指的URI。
- 302 Found 临时性重定向。该状态码表示请求的资源已被分配了新的URI，希望用户本次能使用新的URI访问。
- 303 See Other 该状态码表示由于请求对应的资源存在另一个URI，应使用GET方法定向获取请求的资源。303与302不同之处在于，302是不会改变请求的方法，如果请求方法是POST的话，重定向的请求也应该是POST。而对于303，使用POST请求的话，重定向的请求应该是GET请求。
但是有一点是需要注意的，许多HTTP/1.1版以前的浏览器不能正确理解303状态码，很多现存的浏览器讲302响应视为303响应，并且使用GET方式访问Location中规定的的URI，而无视原先请求的方法。 - 304 Not Modified 该状态码表示客户端发送附带条件请求时，服务器端允许请求访问资源，但未满足条件的情况。304状态码返回时，不包含任何响应的主体部分。
- 307 Temporary Redirect 临时重定向。该状态码与302和303的有着类似的含义，不同之处在于，307状态码并不会指定客户端要用什么样的请求方法请求重定向地址。(302指定使用原有请求方法，303指定使用GET方法)
- 4XX Client Error 发生错误的原因在客户端
- 400 Bad Reques 表示该请求报文中存在语法错误，导致服务器无法理解该请求。客户端需要修改请求的内容后再次发送请求。
- 401 Unauthorized 该状态码表示发送的请求需要有通过HTTP认证(Basic认证，Digest认证)的认证信息。返回含有401的响应，必须在头部包含WWW-Authenticate以指明服务器需要哪种方式的认证。当客户端再次请求该资源的时候，需要在请求头中的Authorization包含认证信息。
- 403 Forbidden 该状态码表明对请求资源的访问被服务器拒绝了。服务器没有必要给出拒绝的详细理由，但如果想做说明的话，可以在实体的主体部分原因进行描述，这样就能让用户看到了。
- 404 Not Found 该状态码表明服务器上无法找到指定的资源。通常被用于服务器不想透露拒绝请求的原因，或者没有其他的响应可提供。
- 5XX Server Error 响应结果表明服务器本身发生错误，或者没有足够的能力来处理请求。
- 500 Internal Server Error 该状态码表明服务器端在执行请求时发生了错误。也有可能是Web应用存在的BUG或某些临时的故障。
- 503 Service Unavailable 该状态码表明服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。如果事先得知解除以上需要的时间，最好写入Retry-After首部字段再返回给客户端。
- 2XX 响应结果表示从客户端发来的请求在服务器端被正常处理了。
-
对数组的增删改查
- 添加 unshift push
- 删除 splice
- 修改 splice
- 查找 indexOf()和lastIndexOf()，find findIndex
-
splice的用法
- 该方法在添加数组元素的时候需要传入3个以上参数，而其中第2个参数就是用于指定要删除元素的个数的，那时我们传的是数字0。那么，如果单单只需删除元素，我们就只需给splice()传入两个参数，第1个参数用于指定要删除的第一项的位置，第2个参数用于指定要删除元素的个数。
-
es6的reduce的用法
- reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值。
-
下面会输出什么 const obj = {name:"A"}; obj.name="B";console.log(obj.name);
- B，可以修改，但是不能修改属性名
-
小程序的支付流程
-
登陆的流程
- 1首次请求打开授权对话框
- 2.授权成功直接获取数据，并将数据保存到本地缓存中
- 3.如果拒绝授权
- 3.1.下次请求打开授权提示
- 3.2.点击确定进入授权的设置开启授权
- 3.3.授权成功，返回获取数据并保存到本地缓存中
-
openid和unionid的区别 [https://www.jianshu.com/p/cd3f178dee81]
- 微信openid和unionid长度是不一样的
- openid同一用户同一应用唯一，unionid同一用户不同应用唯一。
- 对于拥有多个账号的企业来说，unionid可以帮助识别不同公众账号下的用户是否是同一个人。这样在不同账号下对该用户提供的服务可以连续起来了。
-
小程序页面的生命周期
- onLaunch 生命周期函数--监听小程序初始化 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
- onShow 生命周期函数--监听小程序显示 当小程序启动，或从后台进入前台显示，会触发 onShow
- onHide 生命周期函数--监听小程序隐藏 当小程序从前台进入后台，会触发 onHide
- onError 错误监听函数 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
-
了解node.js么
- node.js是一个运行在chromeJavascript运行环境下（俗称GoogleV8引擎）的开发平台，用来方便快捷的创建服务器端网络应用程序。你可以把它理解为一个轻量级的JSP或PHP环境，但是用来开发Web应用的话，有时要便捷很多。
-
需要用node.js写一个接口怎么做
//1.引入http模块 const http = require('http'); //2.创建服务器 const server = http.createServer(); //3.绑定事件处理请求 server.on('request', function (req, res) {} //4.设置端口，开启服务器 server.listen(9端口号, () => { console.log('服务器已启动'); }); //4. 启动服务器，监听某个端口 server.listen(9999, () => { console.log('服务器已启动，请访问： http://localhost:9999'); } -
-
出现的问题
- 自我介绍问题很大
- 声音太小，不够自信
- 经常笑
-
总体评价
- 三个架构师负责，一个负责pc端（7人），一个负责移动端（10人），一个负责后台（20人左右）
- 公司位置地铁站门口
- 公司福利待遇较好
- 工作环境不错
第十次面试
上海钛捷信息科技有限公司
-
时间：3月5日 上午 10:00
-
地点：上海市徐汇区田林路200号华鑫天地A5（原B2）栋202室
-
技术要求
- 大专或以上学历，计算机等相关专业，有三年以上互联网产品前端实际开发经验，有独立完成的前端作品；
- 熟悉 H5、C3，可快速编写高性能 html 页面；
- 熟练掌握JavaScript、es6，了解es7、http协议、地图开发等一种或多种；
- 熟练掌握 vue全家桶；
- 熟练掌握element ui、mint-ui等前端ui框架中的一种或多种；
- 熟悉前端工具，如webpack、npm、git等；
- 开发过后台管理平台项目；
- 有移动端项目的开发经验；
- 熟悉常见的浏览器的兼容性，熟悉W3C相关标准和Web常用协议、图片文件格式等；
- 具备良好的学习能力、沟通能力、分析及解决问题能力，优秀的团队协作精神；
-
有以下经验或者能力者优先考虑
- 有微信公众号和小程序的开发经验；
- 有angular或react开发经验;
- 有在git上自己分享的项目或者技术；
-
面试内容
-
自我介绍
-
移动端是怎么写的
-
在移动端懒加载是怎么实现的
-
vue中怎么封装懒加载的组件
- 1.安装插件 npm install vue-lazyload --save-dev
- 2.在入口文件main.js中引入并使用
import VueLazyload from 'vue-lazyload' // 直接使用 Vue.use(VueLazyload) // 或者 者添加自定义选项 Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1 }) -
什么是Bootstrap
- Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
- Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
-
flex的应用场景有哪些[https://www.jianshu.com/p/bfcbc57d2486]
-
网友评论