前端面试总结

面试题链接地址

https://juejin.im/post/5cbff661e51d456e693f48ec#heading-8

https://github.com/yygmind/blog/issues/43

https://blog.csdn.net/Tracy_frog/article/details/88638619

https://blog.csdn.net/xiaoninvhuang/article/details/70257189

webpack面试题

打包优化?

来解决跨域问题?

前端面试总结_第1张图片
跨域

react面试题

https://www.jianshu.com/p/712afe6360a6

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

补充:

父组件状态变化不影响子组件?答:React.memo(Catch)和React.PureComponent

React.PureComponent和React.memo(Catch)区别?答:Pure只能用在class中,memo还可以用到函数中。

redux中间件?

JSX组件首字母为什么大写?

setState触发了哪些生命周期?

什么是纯函数?

一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用,我们就把这个函数叫做纯函数。

为什么redures要定一个纯函数?

Redux只通过比较新旧两个对象的存储位置来比较新旧两个对象是否相同(译者注:也就是Javascript对象浅比较)。如果你在reducer内部直接修改旧的state对象的属性值,那么新的state和旧的state将都指向同一个对象。因此Redux认为没有任何改变,返回的state将为旧的state。

react性能优化使用shouldcomponentupdate防止多次渲染

shouldcomponentupdate性能优化

vue面试题

https://www.jianshu.com/p/2d154494613a

https://www.jianshu.com/p/08c613b534bd

补充:

路由守卫(是否登陆)

在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的

前端面试总结_第2张图片
vue路由守卫

computer和watch用法和区别?

computer:数据是可以进行简单的业务逻辑运算,是存在返回值的。计算出来的数据,是存在缓存中,只要依赖的数据不发生变化就不会重新计算。

computer用法

watch:监听数据的变化,没有返回值,只能通过重新赋值的方式来改变数据。

前端面试总结_第3张图片
watch的用法

双向绑定的原理?

通过defineProperty()方法来获取函数内部的数据,例子如下:

前端面试总结_第4张图片
数据双向绑定

js面试题(包括css)

一、css

less用法

居中的实现方式

前端面试总结_第5张图片
(1)


前端面试总结_第6张图片
(2)

2、什么圣杯布局、双飞翼布局

圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局,三个特点:三列布局,中间宽度自适应,两边定宽;中间栏要在浏览器中优先展示渲染;允许任意列的高度最高。

前端面试总结_第7张图片
圣杯布局


前端面试总结_第8张图片
双飞翼布局

3、常用css3哪些属性

前端面试总结_第9张图片
动画

flex布局常用属性:父(justify-content:center;align-item:center;flex-wrap:wrap;flex-direction:vertical;)子(flex:flex-grow flex-shink flex-basis;父剩余大小比例分配  之和宽度超过父元素时,定义值越大减少该元素越多  宽度,但大于width权限)


二、js

http2.0优点?

哪些加密算法?

jsonp原理?

xss和sql注入?

字符串匹配出字符的个数?

去掉字符串两端的空白字符?

addeventlistener和onclick的区别?

bind原理实现?

1、基本类型:字符串、数字、布尔值、object、undefined、null

2、对闭包的理解,应用场景?

函数内部可以直接读取全局变量,但是在函数外部无法读取函数内部的局部变量。闭包就是能够读取其他函数内部变量的函数。


前端面试总结_第10张图片
闭包1


前端面试总结_第11张图片
闭包2


前端面试总结_第12张图片
闭包3


闭包4

3、原型与原型链

其中每个函数对象都有一个prototype 属性,这个属性指向函数的原型对象


前端面试总结_第13张图片
原型

在构造函数上都有一个原型属性 prototype,该属性也是一个对象;那么在原型对象上有一个 constructor 属性,该属性指向的就是构造函数;而实例对象上有一个 _proto_  属性,该属性也指向原型对象,并且该属性不是标准属性,不可以用在编程中,该属性用于浏览器内部使用。原型链:就是有限的实例对象和原型之间组成有限链,就是用来实现共享属性和继承的。

继承可以用原型链实现

前端面试总结_第14张图片
原型链继承

4、ES6语法

var ,  let  ,  const  区别?

使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象;使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升;使用const声明的是常量,在后面出现的代码中不能再修改该常量的值。

箭头函数与普通函数的区别?

箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域。在箭头函数中调用 this 时,仅仅是简单的沿着作用域链向上寻找,找到最近的一个 this 拿来使用

处理异步的方法?

async.......await  和  promise

5、伪数组

何为伪数组?

伪数组(类数组):无法直接调用数组方法,也无法使用length属性实现什么特殊的行为,但是!可以使用真正数组遍历的方法(for循环配合数组下标)来遍历它们。

说的浅显一些,就是:存在着length属性,可以通过数组下标的方式进行每个元素的访问,但是不能够使用push等数组的方法。

常见的伪数组

arguments参数:arguments是一个对象,而非一个数组。

调用document.getElementsByTagName、getElementsByClassName等各类获取元素的方法。这些方法返回的是一个NodeList(节点列表),也并不是一个数组。

将伪数组转换为数组

可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

6、事件机制

理解事件机制?

假如我们点击一个div, 实际上是先点击document,然后点击事件传递到div,而且并不会在这个div就停下,div有子元素就还会向下传递,最后又会冒泡传递回document

前端面试总结_第15张图片
事件机制

阻止冒泡:event.stopPropagation();    ie:  window.event.cancelBubble = true;

阻止捕获:event.stopImmediatePropagation();

为什么要用事件委托:

一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件处理呢?比如我们有100个li,每个li都有相同的click点击事件,可能我们会用for循环的方法,来遍历所有的li,然后给它们添加事件,那这么做会存在什么影响呢?

在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能;

每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率就越大,自然性能就越差了(内存不够用,是硬伤,哈哈),比如上面的100个li,就要占用100个内存空间,如果是1000个,10000个呢,那只能说呵呵了,如果用事件委托,那么我们就可以只对它的父级(如果只有一个父级)这一个对象进行操作,这样我们就需要一个内存空间就够了,是不是省了很多,自然性能就会更好。

7、apply 和 call

作用与功能:

call和apply可以用来重新定义函数的执行环境

直白一点解释:obj夺舍了Function,拥有了执行Function的能力,并且this是指向obj的(个人认为夺舍这个词是很直观的-来源于网络)


前端面试总结_第16张图片
改变了this的指向

它们的不同之处:

apply:最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里。如果argArray不是一个有效的数组或arguments对象,那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数,那么Global对象将被用作thisObj,并且无法被传递任何参数。

call:它可以接受多个参数,第一个参数与apply一样,后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候,使当前this实例指针保持一致,或者在特殊情况下需要改变this指针。如果没有提供thisObj参数,那么 Global 对象被用作thisObj。

实际上,apply和call的功能是一样的,只是传入的参数列表形式不同。


前端面试总结_第17张图片
基本用法

8、回调机制

Javascript中的回调函数,相信大家都不陌生,最明显的例子是做Ajax请求时,提供的回调函数,

实际上DOM节点的事件处理方法(onclick,ondblclick等)也是回调函数。

 传递函数作为回调

  很容易把一个函数作为参数传递。

function fn(arg1, arg2, callback){

var num = Math.ceil(Math.random() * (arg1 - arg2) + arg2);

callback(num);  //传递结果

}

fn(10, 20, function(num){

console.log("Callback called! Num: " + num);

});    //结果为10和20之间的随机数

9、客户端登录添加token机制

      手机APP登录的时候发送用户名和密码到服务器,服务器验证用户名和密码,

如果成功,以某种方式比如随机生成32位的字符串作为token,存储到服务器中(创建Table),

并返回token到客户端,以后客户端再请求时,验证该token就可以了。将客户端保存的token与服务器存储的token比对,然后服务器端验证token,成功返回所需要的结果,失败返回错误信息,让其重新登录。

其中服务器上token设置一个有效期,每次客户端请求的时候都验证token和有效期。

10、ajax缓存解决有1,2,3种办法:

一、加个随机数 ASP随机函数

xmlHttp.open("GET", "ajax.asp?now=" + new Date().getTime(), true);

二、在要异步获取的asp页面中写一段禁止缓存的代码:

Response.Buffer =True

Response.ExpiresAbsolute =Now() - 1

Response.Expires=0

Response.CacheControl="no-cache"

三、在ajax发送请求前加上xmlHTTP.setRequestHeader("If-Modified-Since","0");可以禁止缓存

xmlHTTP.open("get", URL, true);

xmlHTTP.onreadystatechange = callHTML;

xmlHTTP.setRequestHeader("If-Modified-Since","0");

xmlHTTP.send();

11、跨域问题

跨域问题分享链接

12、缓存问题

缓存原因及方法

13、数组常用的哪些方法

一、push:增加一位,在数组最后

二、pop:删除数组最后一位

三、unshift:添加一位,在数组最前面

四、shift:删除数组第一位

五、join/split:join把数组拼接成字符串,split把字符串组合成数组

六、slice:从数组中返回特定项(可以把伪数组转成数组),是重新克隆一份

Array.prototype.slice.call(arguments)

七、concat:合并数组

四、笔试遇到的问题

前端面试总结_第18张图片
图片发自App


前端面试总结_第19张图片
图片发自App


前端面试总结_第20张图片
图片发自App


前端面试总结_第21张图片
图片发自App


前端面试总结_第22张图片
图片发自App


前端面试总结_第23张图片
图片发自App


前端面试总结_第24张图片
克隆


前端面试总结_第25张图片
发布订阅


前端面试总结_第26张图片
this指向

你可能感兴趣的:(前端面试总结)