• 面试公司：上海云简业财
  • 面试岗位：前端工程师
  • 面试时间：2025/02/09/13:30
  • 面试时长：（笔试 1道题） +（一面技术 40min）+（二面hr 40min）
  • 面试体验：一般

线上笔试

一面：技术（40min）

  • 自我介绍
  • 项目相关提问
  • 技术问题

项目提问

我看到你简历上介绍了一些可视化内容，能说一说具体是哪些项目用到了可视化呢

答：

  • 高轨卫星态势项目中，需要实现一个能够实时追踪卫星轨迹的可视化地图
    • 是用到ECharts进行渲染
  • 在广联科技公司里主要负责可视化项目的组织和开发
    • 其中比较有代表性的有：徐矿智慧校园驾驶舱系统、企业工时监控大屏
    • 选择的技术栈大多为ECharts、Threejs，对一些要求比较特殊的图表，会用到D3进行实现
  • 在最近的一个App项目中
    • 尽管是Android和IOS原生开发的App，可视化和游戏部分依旧由我负责开发，通过webview的方式嵌入到app中

在以往的项目中，哪一个让你觉得收获最大呢

那就这个项目可以展开说说吗，说说具体的功能点

那在这个系统中，是如何进行权限管理的呢

那么能谈谈这个系统的登录是如何实现的吗？

技术问题

如何加快首屏加载的速度呢？

如何获取首屏加载时间呢？

  • DOMContentLoad
  • performance
  • chrome控制台的performance性能监听

加载慢的原因

  • 网络延时
  • 资源文件体积过大
  • 重复请求加载资源文件
  • 加载脚本时，渲染内容堵塞

解决方法

  • 减小入口文件体积/网络请求次数
    • 路由懒加载
    • 图片懒加载，只加载用户视口可见的数据
    • script标签资源异步加载，使用async和defer加载
  • 静态资源本地缓存
    • 采用http缓存，设置cache-control、last-modified、etag等响应头
  • UI框架按需加载
    • 按需引入UI库
  • 图片资源的压缩
    • 进行适当压缩
    • icon可使用字体图标
    • 小图标可以使用雪碧图的方式合并到同一张图上
  • 组件重复打包
    • A.js文件被多个路由引用时，造成了重复下载
    • webpack的config文件中，设置CommonsChunkPlugin的minChunks，
    • 打包数量大于等于minChunks的包会被抽离到公共依赖文件中
  • 开启GZip压缩
    • 安装compression-webpack-plugin插件，进行包体积压缩
    • 服务器端也要做相应配置
    • css/js/html/image等文件都是可以压缩的
  • 使用CDN进行加速
  • 利用webpack的splitChunks进行代码分割，对js进行分片
  • SSR，服务器端渲染
    • 相当于后台将页面结构和数据准备好，浏览器端只需要进行渲染即可
  • 体验方面
    • 增加骨架框
    • 增加loading动画效果

script的async标记的使用条件是什么

  • 使用条件
    • 适用于独立脚本、第三方脚本
    • 脚本之间无依赖关系
    • 脚本不操作dom或不依赖其他脚本
      • 因为脚本可能在dom完全加载之前执行
      • 如果是对于需要操作dom的脚本，可使用defer
  • defer和async的区别
    • async执行顺序不确定
    • defer执行顺序确定

display:inline 和 display:inline-block的区别

答：不清楚

  • block
    • 元素独占一行
    • 宽度自动填满父元素宽度
    • 可以设置width、height
    • 可以设置margin、padding属性
    • inline
      • 不会独占一行
      • 设置width/height无效
      • 水平方向的margin/padding有效，垂直方向无效
    • inline-block
      • 将对象呈现为inline对象
      • 对象的内容作为block对象呈现
      • 可以使一个元素既具备inline的同行特性，又有block的宽高特性

问：所以你用的都是flex、grid之类的布局方式吗

答：也有float方式的布局

absolute和translate的区别是什么

  • translate
    • 动画性能更优
    • 保留文档流，不会影响元素布局，对需要保持元素之间相对位置的场景有用
    • 根据自身定位
    • 支持3d变换
  • absolute
    • 相对于祖先元素（非静态定位）进行定位
    • 使用top/left等属性进行定位
    • 需要通过z-index设置堆叠顺序
    • 完全从文档流中移除

html中，如何使用label和checkbox，实现文字和多选框同时绑定呢

  • label标签添加for属性
  • 能绑定for属性值为checkbox的id
1
2
3
4
<div>
    <input type="checkbox" id="check1">
    <label for="check1" id="lab1">123</label>
</div>

property和attribute的区别是什么

一个html标签在浏览器中解析为dom元素时，
生成的dom元素上定义的属性及property，
其中有一个attributes属性，包含了所有的特性

  • attribute

    • 特性
    • 值永远是字符串/null
    • 大小写不敏感
    • 不存在时返回null
    • 操作特性的api
      • hasAttribute/getAttribute/setAttribute/removeAttribute

  • property

    • 属性
    • 值可以是任意合法js类型
    • 大小写敏感
    • 不存在时返回undefined

  • 当标准特性attribute更新时，属性property也会更新

  • input.value只能由attribute修改property

    • attribute的value更像是defaultValue这个property

  • 使用data-开头的attribute会映射到DOM的dataset中，划线格式会变成驼峰格式

checkbox勾选和未勾选的标记是什么

答：勾选上value为true

问：那value是property还是attribute呢

答： 可能是property吧

补充回答：回答错了

  • checked属性：反映checkbox是否被选中
    • checked属于property
    • value是checkbox对应的值，用于表单数据的提交
      • value属性attribute

css如何解决不同浏览器样式兼容的问题

  • 使用normalize.css标准化样式库
  • 使用浏览器私有属性
  • 使用css兼容工具，比如Autoprefixer
  • 使用postcss
    • 可以进行css后处理，自动添加浏览器前缀
    • postcss-px2rem能够实现 可以将代码里的px单位转换为rem单位，在vue.config.js中作为插件引入

有一个异步数组，如何让这个异步数组中的请求能够顺序执行

1
2
3
4
5
6
7
8
9
10
11
const list = []
// 装载异步请求
let num = 0
async function fetchAll(){
    while(num < list.length){
        await(list[num]().then(res=>{
            num+=1
        }))
    }
}
fetchAll()

那么如果想使用4个线程池同时执行这个异步数组的话，如何实现？

1
2
3
4
5
6
7
8
9
10
11
12
13
const list = []
// 装载异步请求
let num = 0
async function fetchAll(){
    while(num < list.length){
        await(list[num]().then(res=>{
            num+=1
        }))
    }
}
for(let i = 0; i< 4;i++){
    fetchAll()    
}

问：如果我想用8个呢？

答：循环数换成8

问：浏览器可以同步执行8个请求吗？

答：最多6个

问：uniapp实现的App中有调用过原生SDK吗

可以说一下下面2种定义函数的区别吗

1
2
3
4
5
6
7
8
foo()
// 第一种 自定义函数
function foo(){
}

foo() //Error
// 第二种 表达式，给foo赋值一个匿名函数
var foo = ()=>console.log(123)
  • 第一种写法会被解析器自动提升到代码的头部（函数声明提升）
  • 第二种，虽然var定义可以进行变量提升，但赋值不会被提升，所以会报错

你平常常用的部署工具有哪些

使用nginx时部署常用的配置项有哪些

使用nginx部署单页面应用时，会做哪些特殊配置

  • SPA应用
    • 只有一个html文件index.html
    • 需要将所有路由请求重定向到index.html
      • try_files $uri $uri/ /index.html
      • 即当请求文件不存在时，返回index.html
  • MPA应用
    • 路由由服务器端处理
    • 每个页面对应一个html文件
    • 请求资源不存在，返回404文件
      • try_files $uri $uri/ -404

使用git比较多还是svn，是习惯用命令行还是第三方工具？常用git指令有哪些？

常用git指令

  • git clone
    • 初始仓库
  • git checkout test
    • 切换分支
  • git checkout
    • 放弃分支修改
  • git status
    • 查看当前git状态
  • git add .
    • 将修改加入缓存区
  • git commit -m “备注修改”
    • 提交内容到本地仓库
  • git reset HEAD
    • 撤销加入缓存区的文件
  • git reset HEAD~
    • 撤销提交到本地仓库的文件
  • git pull
    • 拉取远程仓库代码
  • git log
    • 查看提交日志
  • git reset
    • 回滚操作

如果我已经git push上去了，想要修改push的信息应该如何做

  • 方法1：再次提交，修改提交信息
    • 使用git commit –amend，修改提交信息
  • 方法2：回退commit
    • git reset –soft/hard
      • soft：保留工作目录
      • hard：工作区和暂存区的内容都被抹掉
    • git reset HEAD || git reset –mixed HEAD
      • 改变的差异在工作区

二面：hr（40min）

可以简单的介绍一下过去的工作经历吗

在北京的工作经验中有吸取到什么经验吗？

那你为什么会想到上海来工作呢？

能具体说说是什么原因导致你有了“业务比技术更加重要”的感悟吗？

问：我没听懂，可以再详细的说说吗

那你未来的职业规划是什么呢？

可以谈一谈你上一个项目，以及在上一个项目中的角色吗

说一说你上一个项目中遇到的最难得问题，以及你是怎么解决它的

你上一份工作的工作节奏如何

答：非常快

问：有多快呢？比如说具体是什么样的呢？

答：晚上基本都7、8点下班，赶版本的时候9、10点常态

那你对这种节奏体验如何呢？

答：我个人是比较能适应这种快节奏的工作的

你对未来工作的期待是什么呢，请说具体一些

分享文章

快来参与讨论吧~