大前端面试经验技巧通用模板

1.标题:大前端面试经验技巧通用模板

个人价值观: 我们现在不谈技术,不谈bug,就谈人生价值观,从小我就喜欢学习钻研一些东西,将摩托车拆掉(肯定是装不起来的),将冰箱锤烂(目的是向看看里面到底是什么组成的),到了大学,不知道怎么滴就不爱学习了,到处乱逛,期末排名成绩一把索到了倒数可以用手指头抠明白的名次,毕业之后危机慢慢降临,俗话说不是不报,时候未到,用歇斯底里的最后一口气将自己从地狱拯救出来,接触了前端开发,一根生死绳,慢慢地往上爬,相信终将有所收获,致一起死磕在前端道路上的朋友,谢谢

2.自我需要准备

1.做简历:
	1.1:个人信息
	1.2:项目经验(作为技术人员: 主要内容) 重点
	1.4:平时积累(博客,开源项目)
	1.3:求职展望(个人目标计划积极性)
	
2.自我介绍:
	2.1: 基本信息(姓名,年龄,专业)
	2.2:临时应对方面(与应聘公司职位相关联职位信息)
	2.3:技术方面(自己擅长和喜欢的领域, 以前如何对待学习和工作)
	2.4:性格方面(如何对待同事朋友工作)
	大概用时:5分钟

3.面试官问题:

问题1:css3和html5增加了哪些新东西?

h5部分:

1.语义化标签:
header ,footer,main ,section ,aside,article,nav
2.表单输入类型
email,url,number,range,data 
3.视频音频 video radio
4.画布canvas	
5.伸缩矢量图 svg
6.拖拽事件draggable
7.地理定位
8.web存储:localStorage和sessionStrorage
9.类名操作 :classList
10.文件读取:fileReader
11.事件:input 
12.应用程序缓存
13.文件通讯协议

c3部分:

1.选择器:nth-of-type :checked  :disabled
2.盒模型:box-sizing 
3.背景:brackground-origin 
4.渐变:linear-gradient  radial-gradient
5.边框:border-radius  border-image
6.盒子阴影:box-shodow
7.2D/3D转换  transform
8.过渡:transition
9.动画:animation
10.弹性布局 display:flex
11.媒体查询

问题2:你对前端的理解,Strorage,h5多线程,服务器推送,跨域

你对前端的理解:

如果想做一名合格的前端开发工程师,那么最基本的是要掌握好html,css,js 
而这三门技术最重要的还是js,一定要掌握好jquery,像目前流行的基于mvvm开发的
前端三驾马车angelar,react,vue,操作起来就会得心应手,特别是vue,了解vue的双向数据绑定等等功能,

关于html和css就需要去了解和熟悉各种ul框架和插件,比如响应式布局bootstrap 
最接近原生app体验的高性能前端框架mui ,基于jquery的全屏滚动插件 fullpage, 
针对现代高级浏览器的Javascript库zeptor , 具有预编译功能的less,sass更让css
具有了变量,函数,继承,运算等等功能,

而外的还要了解如何与后台人员交流,这就必须去了解一些后台语言比如处理
高并发的node.js 和php 语言 ,express有四大函数 application(app),request(req),
response(res) router(路由),express主要是使用在node.js中,另外还需要知道设计模式,
非关系型数据库mongodb,请求与响应,数据结构(冒泡排序,数组去重) ,Git 和 svn 版本
控制系统的工具使用,github等代码托管平台,

最后还需要各种浏览器的调试工具以及插件的使用.

Storage:

localStorage和sessionStorage ,本地存储的window的一个属性,
localStorage可以使用getItem添加内容,setItem设置,removeItem清除内容,
clear清空存储,sessionStorage就是一个短命的localStroage,浏览器一关闭就没了

h5多线程的概念和引用:

取名:Web workers
相关api:Worker:构造函数,加载分线程的js文件
	   onmessage:用于接收另一个线程的回调函数
	   postMessage:向另一个线程发送消息
不足之处:
	   worker内代码不能操作dom
  	   不能跨域加载js
有兼容性问题
应用场景:比如求使用递归调用斐波那契数列

服务器推送:

方式一:ajax轮询就是简单的开启一个定时器,定时向服务器请求数据
方式二:ajax长轮询,当后端数据发送变化之后再通知前端发送请求
方式三:使用webSocket技术
跨域:

跨域的解决方案:

方式一:jsonp 利用script天然跨域特性
方式二:cors 跨域资源共享
方式三:服务器代理方式
详情跨域解决方案:请看我上一期的文章:如何解决跨域请求方式

问题3:html5的语义化?

语义化:用合理,正确的标签来展示内容
优点:
1.易于阅读,见名知意,让页面结构更加清晰
2.利于seo,搜索引擎根据标签来确定上下文关键字权重
3.便于开发和维护,语义化可读性更强

问题4:js水平怎样?

面试的时候,问到这个问题,估计很多人就懵逼了,不要慌,就把之前知道的统统一
股脑说出来,面试官自然心里会给你打分,但是要说得有水平才行
1.js的五种基本数据类型:string , number , boolean , null , undefined
2.两种复杂数据类型:array  ,  object 
3.js内置方法:String ,	Number , Boolean ,Object , Math , Date , Function
4.检测数据类型的方法
5.in关键字的三个作用  1.遍历对象  2.判断对象的属性名是否存在,3.判断数组的是否包含某个下标
6.delete关键字的作用: 1.删除对象名 2.删除没有var 声明的变量
7.熟悉js的隐式类型转换
例如:  
console.log(1+’true’) 
console.log(1+true)
console.log(1+null)
console.log(1+undefined)
8.面向对象的三大特征:继承 , 封装 , 多态
9.了解js原型链
10.继承的方式:1.混入式, 2.替换原型 3.混合式 4. 借用构造函数式
11.闭包 :一个可以在函数外部访问函数内部的变量的函数
12.上下文模式  call , apply , bind 
13.递归 :函数自己调用自己
14.正则表达式的使用

问题5:es6的新特性

1.Default Parameters(默认参数)
2.Template Literals(模板对象)
3.Multi-line String (多行字符串)
4.Destructuring Assignment (解构赋值)
5.Enhanced Object Literals(增强的对象字面量)
6.Arrow Functions (箭头函数)
7.Promises 
8.Block-Scoped Constructs Let and Const (块级作用域和构造let 和 const)
9.Classes (类)
10.Modules (模块)

问题6:微信小程序的了解

微信小程序采用了javascript,wxml ,wxss 三种技术进行开发,
javascript:首先javascript的代码是运行在微信app中的,并不是运行在浏览器中,因此一些h5技术的应用,需要微信app提供对应的api支持,而这也限制了h5技术的应用,但是微信也提供了一些独有的api
wxml:是基于xml语法开发的,因此开发时,只能使用微信提供的现有的标签
wxss: 具有css大部分的特性,但并不是都支持css
微信的架构是数据驱动的架构模式,它的ui和数据是分离的,所有页面更新,都需要通过对数据的更新实现,
小程序分为两个部分webview和appService,其中webview 主要用来展示ui , appService用来处理业务逻辑,数据及接口调用,他们在两个进程中运行,通过系统层JSBridge实现通信,实现ui的渲染,事件的处理

问题7:项目中担任什么角色

根据项目负责人安排

问题8:项目中使用了什么框架 而且项目要突出自己做了什么,解决了哪些棘手的问题,并且项目成果是什么

之前开发过一款电商app项目,使用了mui框架去搭建了整个项目,我主要是负责页面
的搭建和功能效果的实现,当时遇到最棘手的问题就是下拉刷新和上拉加载,因为当
时参考了mui官网提供的文档,遇到一个就是上拉刷新之后没有重置,官网的重置没
有效果,结果去百度一下,原来很多人都遇到过这个坑,所有当时就比较兴奋,可以解
决掉这个问题,还有一个问题就是mui框架的下拉刷新上拉加载不能在同一个页面
实现多次初始化,因为当时使用了模板引擎,每发一次ajax请求,用同一个模板,三次
初始化,但是这样不行,只能写三个模板,三个初始化,初始化代码也必须使用另外
一种初始化方式,这个官网也是没有提供说明的,需要自己去百度上找答案,最后的
成果就是将一个页面,三个tab栏实现数据的异步刷新

问题9:vue 和 node 的核心

node是一个基于谷歌v8引擎的后台开发语言,是一种单线程,事件驱动,非阻塞I/O
的语言,node.js被设计用来开发大规模高并发的网络应用,正是由于node.js基于事件驱动
的编程模型,将I/O操作分派至各异步处理模块,即解决了单线程模式下I/O阻塞的问题,
又避免了多线程模式下资源分配及抢占的问题
vue是一个构建用户界面的的渐进式框架,典型的mvvm框架,开发数据驱动视图,实现
数据双向绑定,模板编译,操作虚拟dom

问题10:前端代码如何优化?

网页内容:

1.减少http请求
2.减少dns查询次数
3.避免页面跳转
4.缓存ajax
5.延迟加载
6.提前加载
7.减少dom元素数量
8.根据域名划分内容
9.减少iframe数量
10.避免404

服务器:

1.使用cdn
2.添加expires或cache-Control报文头
3.Gzip压缩传输文件
4.配置ETags
5.尽早flush输出
6.使用Get ajax请求
7.避免空图片src

Cookie

扫描二维码关注公众号,回复: 5253806 查看本文章
1.减少Cookie大小
2.页面内容使用无cookie域名

Css

1.将样式表置顶
2.避免css表达式
3.使用link代替@import 
4.避免使用filters

Javascript

1.将脚本置顶
2.使用外部的javascript和css文件
3.精简化javascript和css
4.去除重复脚本
5.减少dom访问
6.使用智能事件处理

图片:

1.优化图片
2.优化css Sprite
3.不要在html中放图片
4.使用小且可缓存的favicon.ico

移动客户端

1.保持单个内容小于25kb
2.打包组建成符合文档

问题11:开源项目或者博客积累

开源项目:代码托管平台github , npm
博客:国内知名博客论坛

结束面试

总结:

面试内容千奇百怪,但是万变不离其宗,上面我只是根据情况适当的做了些总结,祝大家都能面试通过

猜你喜欢

转载自blog.csdn.net/weixin_43949407/article/details/86661406
今日推荐