前端面试相关问题(20180315)

原创 zxsclq 随笔 前端基础 766阅读 2018-03-16 14:30:00 举报

昨天去一家公司面试,问到的相关问题,这边给大家总结一下,希望对要换工作的朋友有所帮助。
本人毕业3年,做前端算是16年3月份开始的,到现在2年(自学选手,混的惨)。目前主vuejs,ES6这块不是特别熟(伪前端,补课中),所以,面试方面ES6这块,我就忽略了。下面是面试时候的一些问题。
首先是笔试这一块,其实是一些基本的东西,例如HTML5,CSS3有哪些新增的标签啊,js运行结果啊,这些我就不写了,主要说一下面试遇到的问题。

1,闭包是如何形成的?优缺点?引起内存泄漏的原因?

形成原理
嵌套函数被返回,被外部的变量引用,或者作为外部对象的属性时,形
成闭包。 形成闭包之后,原本应该已经被垃圾回收的变量,都能继续使用。
优缺点
1.保护函数内的变量安全,加强了封装性
2.在内存中维持一个变量(用的太多就变成了缺点,占内存)
原因
1.在闭包的作用域链中引用了html元素未释放内存
2.出现了循环引用

2.html页面是如何呈现?JavaScript 回流(reflow)与重绘(repaint)(学渣的我,回流我就蒙了,不记得这专业名称)

如何呈现:
1,HTML文档加载后生成DOM树(包括display:none;元素);
2,在DOM树的基础上配合css样式结构体生成render树(不包含display:none;、head节点,包含visibility:hidden;节点),即页面中的占位确定了,最后绘制页面(也叫渲染),不会改变页面布局的一些属性:color、背景色等。

重绘(repaint):
更新页面元素的属性引起的,如颜色、透明度等不会改变页面布局而需要重新渲染的。
回流(reflow)
render树中部分或全部元素的尺寸、布局、隐藏等(内容、结构、位置)改变引起的。每个页面至少有一次回流(即初始构建页面时),成本较高。

3.JavaScript-数据类型和变量?var let const三者的区别?

数据类型:
Number,字符串,布尔值,null,undefined,Symbol。数组,对象(这俩不知道算不算)
区别:
1、var
var定义全局变量和局部变量,也可以省略var,而且在非严格模式下不会报错,但是实际上在严格模式下,两者的使用有没有区别,可能很多人不清楚。例如循环,跳出循环依旧会有效,不报错。
2、let
let拥有块级作用域,一个{}就是一个作用域,也就是let声明块级变量,即局部变量;
let在其作用域下面不存在变量提升;
let在其作用域中不能被重复声明(函数作用域和块级作用域)。
3、const
const用来声明常量,一旦声明,其值就不可以更改,而且必须初始化。如果你非得修改变量的值,js不会报错,只是默默表示失败(不起作用)。

4,JavaScript之面向对象的属性和特性?

对象的本质:
无序属性的集合,其属性可以包含基本值、对象或者函数。即对象是一组没有特定顺序的值,对象的每个属性或方法都有一个名字,而这个名字都映射到一个值。故对象的本质是一个散列表:其中是一组名值对,值可以是数据或函数。
对象包含:数据属性和访问器属性,他们的区别如下:
数据属性:一般用于存储数据数值,访问器属性不包含数据值;
访问器属性:多用于get/set操作,访问器属性不能直接定义,必须使用Object.defineProperty()来定义,且该属性具有set和ger特性。console对象的时候可看。

5, 前端框架Vue、angular、React的优点和缺点?(这个我百度的,自己没怎么回答)

Vue.js的特性如下:
1.轻量级的框架 2.双向数据绑定 3.指令 4.插件化

优点:
1,简单:官方文档很清晰,比 Angular 简单易学。
2,快速:异步批处理方式更新 DOM。
3, 组合:用解耦的、可复用的组件组合你的应用程序。
4,紧凑:~18kb min+gzip,且无依赖。
5,强大:表达式 & 无需声明依赖的可推导属性 (computed properties)。
6,对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 的各种规定,使用场景更加灵活。
缺点:
1,新生儿:Vue.js是一个新的项目,没有angular那么成熟。
2,影响度不是很大:google了一下,有关于Vue.js多样性或者说丰富性少于其他一些有名的库。

angular:
1良好的应用程序结构
2.双向数据绑定
3.指令
4.HTML模板
5.可嵌入、注入和测试
优点:
1.模板功能强大丰富,自带了极其丰富的angular指令。
2.是一个比较完善的前端框架,包含服务,模板,数据双向绑定,模块化,路由,过滤器,依赖注入等所有功能;
3.自定义指令,自定义指令后可以在项目中多次使用。
4.ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。
5.angularjs是互联网巨人谷歌开发,这也意味着他有一个坚实的基础和社区支持。
缺点:
1,angular 入门很容易 但深入后概念很多, 学习中较难理解.
2,文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
3,对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.

React特性如下: 
1.声明式设计:React采用声明范式,可以轻松描述应用。
2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活:React可以与已知的库或框架很好地配合。
优点:
1,速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
2,跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。
3,模块化:为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。
4,单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。
5,同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。
6,兼容性好:比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
缺点:
1,React本身只是一个V而已,并不是一个完整的框架,所以如果是大型项目想要一套完整的框架的话,基本都需要加上ReactRouter和Flux才能写大型应用。

6,对比一下jquery和vuejs

jquery:对HTML的操作。绑定事件。请求数据。更多是以事件为入口去处理HTML。操作细腻。不过维护起来累
vuejs:逻辑简单,代码量少,组件化。根据页面的功能定义,构造出属于它的数据。需要事件触发,再编写起方法。方法是基本是数据的处理。

7,JavaScript对数组的操作有哪些?

  1. 数组建立(new)
  2. 数组元素的访问(循环)
  3. 数组的元素添加(push末尾,unshift开头)
  4. 数组元素的删除(pop最后,shift开头,splice(startIndex , deletSize)指定位置)
  5. 数组元素拷贝和复制(slice(start,end)返回一个新数组,其中以start开始,end结束且不包括end;
  6. concat(element1[element2[]]…);将多个数组重新连成一个新的数组),
  7. 数组元素顺序(sort();数组排序。
  8. reverse();数组反转。)
  9. 数组转化为字符串(oin(seperater))

8,数组排序的方法?

冒泡排序,js 利用sort进行排序,快速排序,希尔排序,插入排序。这个自己去理解,我写一个简单的。

9,JavaScript的作用域和作用域链?

作用域
全局作用域(Global Scope)
在代码中任何地方都能访问到的对象拥有全局作用域,
1,最外层函数和在最外层函数外面定义的变量拥有全局作用域
2,所有末定义直接赋值的变量自动声明为拥有全局作用域
3,所有window对象的属性拥有全局作用域
局部作用域
与全局作用于相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部
作用域链:
在函数执行过程中,每遇到一个变量,都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从作用域链头部,也就是从活动对象开始搜索,查找同名的标识符,如果找到了就使用这个标识符对应的变量,如果没找到继续搜索作用域链中的下一个对象,如果搜索完所有对象都未找到,则认为该标识符未定义。

10,双向绑定的实现原理?

简单来说,就是监听dom事件,例如change,或者键盘回车,获取改变后的值,赋值给指定的职位,整个都是在函数中完成。

有的框架,基本思路是使用Object.defineProperty对数据对象做属性get和set的监听,当有数据读取和赋值操作时则调用节点的指令,这样使用最通用的=等号赋值就可以了。

11,CSS选择器(最少五个),权重计算?

  1. id选择器(#id)
  2. 类选择器(.className)
  3. 元素选择器(E)
  4. 群组选择器(selector1,selector2,...,selectorN)
  5. 通用兄弟选择器(E ? F)
  6. 相邻兄弟元素选择器(E + F)
  7. 子元素选择器(E>F)
  8. 后代选择器(E F)
  9. 通配符选择器(*)
  10. 伪类选择器
  11. 伪元素选择器
  12. 属性选择器

权重计算

第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为0100。
第三等:代表类,伪类和属性选择器,如.content,权值为0010。
第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

!important 可以提升权重

除去ES6之外,问到的就这些了,有一些答得出来,有一部分自己后来查的,大家可以参考。至于浏览器兼容啊,跨平台啊等等,暂未涉及到,有相关的,我会再更新。如果有问题,希望大家看完之后给我留言,我做修改,谢谢。

最后,祝大家找到好工作,ES6还是得认认真真的好好学。(我先哭一会儿)

评论 ( 3 )
最新评论
18384240220 21 天前 3F

很好 字体颜色 标注明确 回答完善 收藏了

zxsclq 1F 23 天前 2F

你这问得好直白啊 12+

miro777 23 天前 1F

面试的这家给多少啊