2020-12月份前端面试题整理

266 阅读5分钟

最近到面试了一波,记录下一些面试题,大概只记得一下问题,其实大部分都是可以在网上找到的,大家自己康康吧。

1.手写bind可以使用call apply?

2.实现千分位转换 1000000.001 -> 1,000,000.001

这个是很常见的题目了

3.实现一个clone函数

这个需要注意引用自己的问题,和爆栈问题

4.浏览器解析html过程

这个就是越详细越好咯

5.vue响应式原理

尽量用自己的理解来回答,详细一些

6.diff算法过程,对比两个DOM树过程和使用到什么算法?

7.从数组[1,2,3,4,5,6,7,8] 取出下标[i, j]的数据之和,例如[0,1] => 3,要求时间复杂度最小

8.如何实现一个迭代器?

考察 Symbol.iterator

9.loader 和 plugin区别,如何配置模块拆分

10.http缓存配置有哪些?

回到的越详细越好,可以从http1.0缓存和http1.2,说出优缺点

11.小程序如何做性能优化?

自由发挥

12.小程序微信登录流程

13.this的指向规则

参考你不知道的this

14.nodejs事件循环机制

15.vue和react区别

自由发挥

16.小程序开发与h5开发区别

说出不同点,优缺点

17.节流和防抖实现原理和应用场景

18.vue-router实现原理

19.BFC是什么?

20.双飞翼布局(两边固定,中间自动伸缩)方案有哪些?

21.JavaScript原型链是什么?

按自己的理解回答

22.JavaScript作用域?

23.ES6有哪些新API?

回答详细一些

24.小程序有哪些不一样和h5相比的组件?

围绕原生组件回答

25.onload和DOMContentedLoaded的区别?

26.rem布局原理,字体设置rem有什么影响吗?

27.1px如何实现,有哪些方案?

28.Vue composition API 和 React Hook区别?

自由发挥

29.网页优化方案有哪些?

自由发挥

30.跨域请求解决方案有哪些?

cors jsonp nginx 说出区别和优缺点

31.小程序wxss与css什么不同地方有哪些?

32.diff key的作用,为什么不能使用index作为key

33.为什么需要动态创建script来加载js,设置defer和async的作用?

34.协商缓存和强缓存?

安利一份参考答案:
强缓存:
在http1.0版本是通过设置响应头字段Expires 设置一个时间戳,客户端第一次请求服务器会下发一个时间错,客户端再次请求
之前会对比当前时间早于Expires时间,那就直接使用缓存,反之更新数据
Expires为负数则相当于是no-cache

缺点:
依赖客户端时间对比,如果客户端时间修改了就不准确了
客户端GMT时间和服务器不同就会出现偏差

http1.1版本通过设置cache-control,cache-control Max-Age优先级比Expires高并且同时设置的话会覆盖Expires
取值:private public max-age no-cache no-store must-revalidate
privare:私有缓存 只能被浏览器缓存,不能用户之间共享,不能被代理服务器缓存
public: 共有缓存 代理服务器可缓存,例如CDN 多用户可以共享
max-age: 秒为单位 缓存内容在改值后过期
no-cache: 表示使用协商缓存
no-store: 不缓存
must-revalidate: 必须再次验证信息是否过期 返回状态码是304

协商缓存:
Last-Modified If-Modified-Since
第一次请求服务器会返回last-modified 再次请求客户端会将这个值携带在if-modified-since中,由服务器来对比,
判断资源在这个时间后是否有变化,没有返回304并且不会返回资源,客户端会取缓存的资源 反之更新缓存和修改last-modified
优点:这种方式弥补了Expires客户端对比的问题
缺点:多时间内修改多次,1秒修改两次,就无法准确标注修改时间,如果有些文件是内容没有变化只是时间变化也是不合适的。

所有就引出了ETag,If-None-Match
浏览器第一次请求,服务器返回ETag,ETag是根据文件内容生成不同的Hash值
浏览器响应记录ETag值,再次请求会携带If-None-Match值为ETag,服务器会根据资源内容再次生成ETag 然后进行对比,
相同表示没变化,返回304缓存,不同则返回资源,更新ETag

ETag生成规则:
Apache 中,ETag 的值,默认是对文件的索引节(INode),大小(Size)和最后修改时间(MTime)进行混淆后得到的;
MDN 使用 wiki 内容的十六进制数字的哈希值

ETag优先级比Last-Modified高,它也有一个问题:
相同资源,两台服务器产生的ETag是不一样的,如果是集群服务器就不能使用ETag.

优先级:Cache-Control > Expires > ETag > Last-Modified

Ctrl+F5会强制刷新缓存,浏览器会跳过强缓存和协商缓存
F5刷新页面只会跳过强缓存,会进行协商缓存

35.disk-cache 和 monery-chache区别,浏览器是如何判断?

当页面加载后,浏览器会将html或者其他资源缓存在内存和磁盘中,当用户刷新页面会优先取内存中的缓存,在用户关闭页面会内存的缓存会被清空
用户再次打开网页时只能取磁盘缓存了。

36.Vue.$nextTick()实现原理使用了那些方式?

37.Vue update生命周期 使用场景?

38.setTimeout 等异步的错误如何捕获?

39.Vue listenerslisteners attrs 是什么?使用场景?

40.cdn如何做解析优化?

41.资源使用cdn除了可以提升加载速度还有什么优势?

增加浏览器并发,减少请求头

41.兄弟组件通信方式?

42.Vue provide inject 通信有什么缺点?

43.事件总线通信EventBus 有什么优缺点?

44.HTTP2.0 有了解?

45.批量执行setData() Vue是怎么处理的?

46.Webpack打包怎么优化?

47.手写代码ES5,ES6实现继承方式?

48.TypeScript泛型是什么?

49.实现布局:左边固定200px右边铺满?多种方式

50.组合继承如何实现?

欢迎大家在评论区说出你的答案?[dog]