博主目前在蚂蚁集团-体验技术部，AntV/S2 是博主所在团队的开源项目——多维交叉分析表格，欢迎使用，感谢到 S2 github 仓库点赞 star，有任何关于前端面试、就业、技术问题都可给在文章后留言。
一面（2021/3/17）：
1、电话面试：简单聊项目、个人经历。
2、两道算法题。
- JavaScript 实现数字格式化：整数部分每3位加一个逗号，如1,923,456.58。
二面（2021/3/19）:
1、自我介绍。
2、怎么接触前端的。
研究生项目需要。
3、做中石油系统时间很紧，怎么安排的，具体的过程，遇到哪些困难。
- 根据中石油提出的需求和业务，将任务分为4大模块；
- 和后端对接，明确具体的功能和展示的指标内容，确定好接口，避免不必要的界面调整和代码删改。
- 开发过程中，抽取公用的组件，少写重复的代码，使用view UI、Echarts、Vue 内置的库更加方便快捷的开发。
遇到的困难：
- 界面首页需要有一个地图，使用 inMap 地图库，内网不能访问，打算下载 inMap 资源离线使用，失败；在 Echarts 中找到一个 chartMap.js 文件离线使用。
- token 的获取，携带 token 发送请求，token过期时的处理。采用 HTTP Basic 认证，对着这种认证方式的不了解，做登录界面时，用户名、密码的传入方式错误，导致页面出现弹框提示，通过深入了解这种认证方式并设置请求拦截解决该问题。token 过期后，无法获取后台的数据，页面无法自动刷新，刚开始把 token 的过期时间设长一点，但是不能从根本上解决问题，后来通过设置相应拦截，通过返回的状态码来判断 token 是否过期，如果返回401，则重新请求获取 token 的接口。
- canvas 的使用。
4、地图，后台数据更新，前端怎么接收。
- 轮询：客户端定时向服务端发送Ajax请求，服务端收到请求后立即响应信息并关闭连接。优点：后端程序比较容易编写；缺点：请求中大半是无用的，浪费带宽和服务器资源；适用场景：小型应用。
- 长轮询：客户端向服务端发送Ajax请求，服务端收到请求后保持连接，直到有新消息才响应信息并关闭连接，客户端处理完响应后再向服务端发送新的Ajax请求。优点：在无新消息的情况下不会频繁的请求，耗费资源小；缺点：服务器保持连接会耗费资源，返回数据顺序无法保证，难以管理维护。适用场景：Web QQ。
- WebSocket：WebSocket 是 HTML5 开始提供的一种浏览器和服务端之间进行全双工通信的一种网络技术，依靠这种技术可以实现客户端与服务端的长连接，双向实时通信。使用 WebSocket 建立的连接是实时的，也是永久的，除非显式的关闭。当服务端想向客户端发送数据时，可以直接将数据推送到客户端的浏览器中，无需再重新建立连接。只要客户端有一个打开的 socket 与服务端连接，服务端就会把数据发送到这个 socket 中，而无需轮询客户端的请求，由被动变为了主动。特点：事件驱动，异步，使用ws 或 wss 的客户端 socket，能够实现真正意义上的推送功能；缺点：少数浏览器不支持。适用场景：多人在线游戏网站、在线聊天室、实时体育或新闻评论网站等。
- 创建 WebSocket 对象，参数是 url，url 是以 ws 或 wss 开头的，例如：
var ws = new WebSocket("ws://localhost:8080/socket");
- 发送数据，WebSocket 只能发送文本数据，如果是对象的话，要先转化成文本再发送，例如：
var obj = {name: "zs", age: 25};
ws.send(JSON.stringify(obj));
- 通过 onopen 事件句柄监听 WebSocket 的连接状态：
ws.onopen = function() {
// 开始通信时的处理
}
- 通过 onmessage 事件句柄来接收服务端发送过来的数据：
ws.onmessage = function(event) {
console.log(event.data);
}
- 通过 onclose 事件句柄来监听 WebSocket 的关闭状态：
ws.onclose = function() {
// 关闭时的处理
}
- 关闭 WebSocket：
ws.close();
5、A、B、C三个函数，涉及到setTimeout()，执行顺序；如果A、B、C中有异步任务，怎么让A、B、C顺序执行。
参考 JavaScript setTimeout 的相关题目；
顺序执行异步任务：
6、让页面中一个物体，从左边移动到右边，怎么实现，不影响页面布局。
通过 CSS3 的动画实现，使用 @keyframes 创建动画，并绑定到一个选择器，animation 定义动画名称和动画的持续时间。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 动画</title>
</head>
<body>
<div class="div1">
<p>css3 动画</p>
</div>
<div class="div2">
<p>右边 div</p>
</div>
</body>
<style>
.div1 {
width:200px;
height: 200px;
background: green;
position: relative;
float: left;
animation: mydiv 3s;
animation-iteration-count: infinite; /* 动画播放的次数 */
animation-direction: alternate; /* 动画在下一周期逆向播放 */
}
p {
text-align: center;
line-height: 200px;
}
@keyframes mydiv {
0% {
left: 0;
top: 0;
}
100% {
left: 500px;
top: 0;
}
}
.div2 {
width:200px;
height: 200px;
background: red;
position: relative;
float: left;
margin-left: 50px;
}
</style>
</html>
7、浏览器中的开发者工具
Elements、Console、Sources、Network、Performance、Memory、Application、Security、Lighthouse等。
8、浏览器内存泄漏怎么监测。
通过浏览器开发者工具的performance，勾选上Memory，点击开始录制，一段时间后结束录制，分析不同曲线的走势，主要关注 JS 堆内存、节点数量、监听器数量，如果在不断的增大，则可能存在内存泄漏。
参考一、参考二、参考三
9、单页应用，首屏白屏时间长，怎么减少这种情况
多页应用： 每次页面跳转，都会返回一个新的HTML文档，路由由后端来写。优点：首屏时间快，SEO效果好；缺点：页面切换慢。
单页应用： 页面刷新请求一个HTML文件，页面切换并不会重新请求一个新的HTML文件，只是页面内容发生了变化，路由由前端来控制。优点：页面切换快；缺点：首屏时间长，SEO效果差。
解决办法：
- 使用CDN加载，减少服务器带宽压力。在 index.html 中引入CDN资源，修改webpack配置externals，去掉入口文件、路由文件中 import 的相关内容。
- 路由懒加载。在每个路由对象中引入路由组件，而不需要一次性全部引入。
- 按需加载第三方资源。比如 ViewUI，按需引入使用到的组件。
- 如果使用 nginx 代理，可以开启 gzip 压缩减少网络传输的流量大小。
- webpack 开启 gzip压缩，需要 nginx 开启 gzip 压缩。webpack 在打包时借助 compression webpack plugin 来实现gzip压缩，进行相应的配置。
- 图片懒加载。在 vue 项目中：安装 vue-lazyload 插件，在 main.js 中引入并配置：
import Vue from "vue";
import VueLazyload from "vue-lazyload";
Vue.use(VueLazyload, {
loading: require("img/loading.png"), // 加载中图片
error: require("img/error.png") // 加载失败图片
});
在组件中使用图片懒加载：
<img v-lazy="imgItem.image1" :key="imgItem.image1"> // 将 :src 改为 v-lazy，:key 是为了防止刷新页面或图片更改时图片不更新
- 若首屏为登录页，可以做成多入口，登录页单独分离为一个入口。
扫一扫
3512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
