总结
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端面试题汇总
JavaScript
前端资料汇总
因为测试环境测试不出生产环境的问题,生产环境订单量较大,我看了一下订单加在一起有三千多万条,因此部署到生产环境之后导出功能出现了两个问题,一个是内存溢出,另一个是导出超时。
二、解决步骤
1.思路:
因为导出的数据格式和查询的数据格式相同,因此开发时,导出的逻辑是在线程池中分页查询每一页数据然后组装完成Excel,因此我优化导出功能时其实是包含着优化查询功能,查询的逻辑是线程池按时间分段查询数据。
2.解决步骤:
(1)第一阶段
上生产之后报内存溢出(OutOfMemory:Heap Space)我首先检查了一下代码,主要考虑堆溢出的原因,发现了一些没有必要的或者肉眼可见的问题进行了第一次优化,具体内容如下:
- 数据库方面:从查询sql字段由“*”减少到只查询需要展示的几个字段,提高查询速度,降低内存容量。
- Excel生成工具:因为Excel生成工具我用的是HSSFWorkbook,这个生成的数据流是往内存中写的,当数据量过大时,肯定会超出内存承受能力。从HSSFWorkbook改成SXSSFWorkbook,SXSSFWorkbook是专门用于大数据量时使用,SXSSFWorkbook是streaming版本的XSSFWorkbook,它只会保存最新的rows在内存里供查看,在此之前的rows都会被写入到硬盘里,因此可以降低内存的消耗(解决堆溢出问题)。
- 减少创建对象的数量:在每页生成Excel行数时,每个SXSSFCell我都创建了一个cell对象来设置换行样式和数据信息,因为是堆溢出,说明对象创建的太多了。而且我生成Excel数据流时使用的是线程池,需要内存同时存放多个线程的cell对象,这样太费内存了,因此我去掉了用对象接收cell,而是直接createCell,然后设置有样式使用getCell。降低了内存的压力。
- 使用Redis缓存:针对用户相同的查询条件,将查询条件和查询结果缓存到Redis中,这样,下次用户进行分页查询时就不需要再去访问数据库重新组装数据了,降低数据库访问压力。
第一阶段优化结果:经过上面第一阶段的优化,我又重新上了生产,再次测试一万以上的数据导出,好吧,超时(一分钟为最大访问时间)。
于是,我进行了第二阶段的优化:
(2)第二阶段
- 逻辑上:之前因为导出的数据格式和查询的数据格式相同,因此开发时,导出的逻辑是在线程池中分页查询每一页数据然后组装完成Excel。但是直接调用查询方法会重复调用相同逻辑,比如查询时,每次都会检查Redis中是否已存在相同的查询条件,这个检查也是比较耗时的。于是我改成了不直接调用查询方法,在组装Excel数据前,先检查Redis中数据是否已存在,若存在,则直接使用数据去循环组装每页数据,这样节省了查询Redis的时间。
这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」,内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中,共计111道
HTML
-
HTML5有哪些新特性?
-
Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?
-
如何实现浏览器内多个标签页之间的通信?
-
⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元 素和块级元素有什么区别?
-
简述⼀下src与href的区别?
-
cookies,sessionStorage,localStorage 的区别?
-
HTML5 的离线储存的使用和原理?
-
怎样处理 移动端 1px 被 渲染成 2px 问题?
-
iframe 的优缺点?
-
Canvas 和 SVG 图形的区别是什么?
JavaScript
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
问:0.1 + 0.2 === 0.3 嘛?为什么?
-
JS 数据类型
-
写代码:实现函数能够深度克隆基本类型
-
事件流
-
事件是如何实现的?
-
new 一个函数发生了什么
-
什么是作用域?
-
JS 隐式转换,显示转换
-
了解 this 嘛,bind,call,apply 具体指什么
-
手写 bind、apply、call
-
setTimeout(fn, 0)多久才执行,Event Loop
-
手写题:Promise 原理
-
说一下原型链和原型链的继承吧
-
数组能够调用的函数有那些?
-
PWA使用过吗?serviceWorker的使用原理是啥?
-
ES6 之前使用 prototype 实现继承
-
箭头函数和普通函数有啥区别?箭头函数能当构造函数吗?
-
事件循环机制 (Event Loop)