自我介绍

面试管,您好:

  1.     首先感谢贵公司给我的这次面试机会,其次,我简单进行一下自我介绍,希望可以加深对我的认识.
  3.       我叫李雪琴,今天来是面试咱们公司web前端工程师职位的,使用的技术栈是vue和react,之前是在人人车进行工作,从18年的4月份到20的6月份,从20年6月份至今在穷游工作,主要负责移动端,有首页,地区,推荐,商品,我们五个模块,都有参与,主要负责的是商品和我们模块其相关功能,下拉刷新,上拉加载,预加载,用户一键登录等功能的实现,也会负责PC端的后台权限分配.
  5.  平时闲暇时间也会浏览各大技术网页,扩充自己的知识面.加强自己的能力,提升自己自我解决问题的本领,以上便是我的自我介绍,请问您这边还有什么要问的吗?

基本问题

  1. 名字最好是让面试官记住
  2. 疫情期间是否可以现场面试
  3. 目前在哪个区,有无疫情
  4. 什么情况下接触到前端这一行业
  5. 这几家公司分别呆了多长时间
  6. 您目前是在北京还是老家
  7. 上家公司具体位置,公交
  8. 为什么想到来北京发展
  9. .社保现在是在哪里(北京,)
  10. 北京这边的社保上过吗?
  11. 为什么选择我们公司
  12. 有了解过我们公司吗?
  13. 这家公司的社保怎么给你上的,是足额吗?
  14. .那你现在住哪里(大概位置,房租,小区名)
  15. 之前公司工资是怎么核算的,
  16. 福利有哪些(13薪)
  17. 公积金和社保参考点基数是什么
  18. 之前公司使用的框架都有哪些
  19. 长时间打算留在北京吗?
  20. 未来的职业规划有吗?
  21. 长期短期,方便谈一下吗?
  22. 女性,是否单身,
  23. 婚配,生孩子
  24. 在移动端负责的功能有那些
  25. 在移动端开发过程中,遇到那些BUG,
  26. 解决方式思路有哪些
  27. 除此之外,有负责其他部分吗?
  28. 移动端选择的框架有哪些(UI+Vant+element-ui)
  29. react/vue移动端或PC端
  30. 你还做过其他功能吗?
  31. 对我们公司有什么想问的
  32. 前后端是怎么配合的
  33. 咱公司前端哟多少人呢啊,那后端呢
  34. 咱们公司主要负责那些业务啊
  35. 留HR的手机号,微信*
  36. 提前打电话预约时间
  37. 工作中你最看重什么
  38. 期望薪资.最低
  39. 评价一下自己
  40. 离职多长时间了
  41. 你最快多长时间到岗
  42. 年龄 25
  43. 学历学信网可查吗?是统招本科吗?
  44. 身份证年龄,证书编号,
  45. BOSS账号
  46. 评价一下之前的公司
  47. 你最快多长时间能够到岗啊
  48. 有没有在培训机构带过，直接说没有
  49. 你对你另一半有什么样的要求
  50. 之前的公司是PC端多一些,还是移动端
  51. 说一下你离职的原因\
  52. 如何看待加班
  53. 沟通过程中有矛盾怎办
  54. 工作轮岗你怎么看
  55. 与上级有矛盾时,你是怎么解决的
  56. 学会反问
  57. 公司职员跳槽,会影响你的心情吗?

技术问题

  1. 是否可以独立开发
  2. vue和react比较之下哪个更强一点
  3. vue使用的多长时间
  4. 是否可以搭配TS使用
  5. 点击穿透事件怎么样解决
  6. 事件流?(阻止默认事件的两种方式)
  7. 处理兼容的方法
  8. 路由分配是如何实现的
  9. 数据可视化框架使用那些框架 eacharts
  10. 图片上传怎样实现
  11. 怎样实现多个文件上传
  12. 键盘遮挡
  13. 那你跟我说一下七天免登陆的实现原理
  14. 那你跟我说说本地存储
  15. 还有一键登录怎样去实现
  16. 下拉加载更多（懒加载、预加载）的实现原理
  17. 在移动端主要负责的功能有哪些
  18. H5页面中怎样调用底层应用
  19. PC端使用的框架有那些

个人问题

BOSS账户(有无)

是自己的吗?

把应该说的功能具体怎样实现总结出来
（1）每个功能在去说的时候最好也要3-10分钟
（2）你说的功能可能遇到问题，
（3）解决问题的思路
（4）需要的知识点都要哪些

移动端功能实现

两级联动
  • 如何实现(react)
    通过一级的index(索引)关联二级的内容列表,然后将每个小盒子的高度固定，然后获取数量进行累加，就能知道页面的位置
  • 遇到的问题
    当索引获取失败,判断当前二级列表index为0(初始值)
  • 解决思路
    在state中设置buttonIndex:0
    在设置点击事件,this.setState({ ButtonListIndex: index })
  • 需要的知识点
    关于react生命周期的使用 componentWillMount()
    关于scrollTop,offestTop的相关知识

小球抛物线
  • 如何实现
    ball 组件，需要两层，内层水平线性移动，外层垂直贝塞尔曲线运动，实现抛物线效果。
    选中小球从起点开始抛,到指定位置,将小球设置display:none,
  • 遇到的问题
    在是定位置之上抛物线还好,在指定位置之下,抛无线则相反,自下而上
  • 解决思路
    每个div都是相同高度,在抛物的过程中,设置一个点,从A到B再到C,没个div都相同,用到transform 中translate,
  • 需要的知识点
    贝赛尔曲线
    transform相关知识点

加预载
  • 如何实现
    预加载是指在页面加载完成之前，提前将所需资源下载，之后使用
    的时候从缓存中调用
    监听页面lode加载,通过if判断,当列表中的图片没有加载成功后,使用创建的图片或者准备好的图片地址,当列表加载完成后,使用列表地址所传递的图片地址
  • 遇到的问题
    只对一张有效或者无效
  • 解决思路
    查看是否设置了开关 false/ ture
  • 需要的知识点
    vue的生命周期
    预加载相关知识,
    预加载和懒加载的区别
    (预加载是指在页面加载完成之前，提前将所需资源下载，之后使用
    的时候从缓存中调用；懒加载是延迟加载，按照一定的条件或者需求等
    到满足条件的时候再加载对应的资源
    两者主要区别是一是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

原理:
一次性
首先确定图片数量,push到一个数组中,通过for,根据图片数量new Image数量,将地址放进去,通过onload监听,使用count监听次数,onload触发一次,监听成功一次,当加载完成之后,通过存的img的length进行判断,如果相等,则加载成功,之后将之前防抖遮罩层display:none,
如果图片有加载失败的话，或几张没加载出来，或都没加载出来我也可以加all arry，比如说都没加载出来，也会触发all array ，那就证明网络出问题。我需要给他一个默认的图片，默认展示那一面就可以了

下拉刷新

  • 思路/实现
    实现下拉刷新主要分为三步：
    监听原生touchstart事件，记录其初始位置的值，e.touches[0].pageY；
    监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值的差值，大于0表示向下拉动，并借助CSS3的translateY属性使元素跟随手势向下滑动对应的差值，同时也应设置一个允许滑动的最大值；
    监听原生touchend事件，若此时元素滑动达到最大值，则触发callback，同时将translateY重设为0，元素回到初始位置。


    1.获取到列表的dom，刷新显示部分的dom，列表父容器的dom
    2.定义一些需要常用的变量
    3.给列表dom监听touchstart事件,得到起始位置的Y坐标
    4.给列表dom监听touchmove事件，当移动到一定程度需要显示上面的文字
    5.给列表dom监听touchend事件，此时说明用户已经松开了手指，应该进行异步操作了
    在下拉到松手的过程中，经历了三个状态：
    当前手势滑动位置与初始位置差值大于零时，提示正在进行下拉刷新操作；
    下拉到一定值时，显示松手释放后的操作提示；
    下拉到达设定最大值松手时，执行回调，提示正在进行更新操作。

上拉加载
  • 思路/实现
    上拉加载更多数据是在页面滚动时触发的动作，一般是页面滚动到底部时触发，也可以选择在滚动到一定位置的时候触发。
    以滚动到页面底部为例。实现原理是分别获得当前滚动条的scrollTop值、当前可视范围的高度值clientHeight以及文档的总高度scrollHeight。当scrollTop和clientHeight的值之和大于等于scrollHeight时，触发callback。
    页面绑定onscroll事件时加入了节流函数，其作用就是忽略滚动条300毫秒内的连续多次触发。
    样式方面:滚动区域是给固定高度，设置 overflow-y: auto 来实现。
    接下来看看js方面的实现，其实也很简单，触发的条件是：可视高度 + 滚动距离 >= 实际高度 。例子我会使用vue来实现，和原生实现是一样的。
    可视高度(offsetHeight)：通过 dom 的 offsetHeight 获得，表示区域固定的高度。通过 getBoundingClientRect() 来获取高度，因为使用前者会引起浏览器回流，造成一些性能问题。
    滚动高度(scrollTop)：滚动事件中通过 e.target.scrollTop 获取，表示滚动条距离顶部的px
    实际高度(scrollHeight)：通过 dom 的 scrollHeight 获得，表示区域内所有内容的高度（包括滚动距离），也就是实际高度

瀑布流

将整体布局分成两份，那么就意味着我们将讲数据分为两份，
然后根据两边的高度（哪边少往那边加内容）去渲染两个盒子，然后达到一个瀑布流的效果

懒加载
  • 思路/实现
    懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不是一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。
    当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。
    先将图片的src设置为同一张图片或者不设置，同时给img标签设置一个特殊属性，例如：data-src用于存放图片的真实预览地址；若图片未进入可视区域时，展示同一张图片或者直接不展示图片，此时就不会发生http请求，当图片进入可视区域时，将data-src上的值赋给src，此时再发送http请求。

七天免登陆

  • 思路/实现
    1、实现7天免登录原理：将username+password（加密一次）的数据主动通过 setcookie 函数存与浏览器客户端
    2、session失效，重新登录后跳转回原访问页面原理：通过 url 带上一个 req_url 变量，设置成【 req_url=”.$_SERVER[‘REQUEST_URI’] 】，然后在doLogin 方法判断 $req_url 是否含有 【login 】字符串，没有则跳转至 $req_url,另外在访问网站的每个页面时，都要先进行一遍如下函数的检查（放置于父类的构造函数或_init 函数内）。
    - PHP setcookie里的path参数并不是说是让你指定把cookie保存到哪里，而是说在访问指定的path时客户端才会把Cookie信息发送给服务端。
    - 默认值’/‘是代表访问站点的每个path(也就是url)都会把cookie数据发送给服务端， 他对应的就是HTTP请求头部Set-Cookie里的path字段
    - cookie数据不会保存到你网站的根目录里，不管你把path和domain指定成什么，他都是保存在你电脑上的浏览器指定的一个目录里，即上面的物理路径
    - setcookie是服务端设置Cookie记录信息到客户端，客户端在访问服务器时根据设定的path、domain、secure等参数再把客户端的Cookie发送给服务器用。

  • 我们先创建一个cookie对象，然后将其JSEESIONID赋值为req.getSession().getId()，JSEESIONID就相当于一个身份牌，后我们将这个身份牌设置七天的有效期，之后再给session设置七天的有效期，这样客户端的cookie中的jsessionid和服务端的session有效期都是7天，之后每次请求cookie都会带着jsessionid来和session中的jsessionid对比，就可以简单的实现七天免登陆了。

一键登录

  • 实现/思路
    取号方法
    通过调用安卓的getPhoneInfo或iOSgetPhoneNumberCompletion，在用户无感知的情况下进行网络判断、蜂窝数据网络切换和网关取号等操作（以上操作均需消耗一定时间），返回取号是否成功的结果。
    取号所需网络环境：运营商取号能力是通过数据网关实现，取号过程须在数据流量打开的情况下才能进行。因此，用户如果关闭数据流量将无法取号；若当前信号弱或者网络有干扰时，时延会高于平均值，取号成功率降低。
    超时设置：SDK默认超时设置为8000ms，同时提供设置取号超的方法：安卓通过setOverTime设置，iOS通过setTimeoutInterval设置。
    运营商判断：SDK提供判断用户当前网络状态和流量卡所属运营商的方法，通过调用安卓SDK的getNetworkType或iOS的networkInfo可获得以上信息，以便对不同用户选择不同的运营商的SDK进行取号或选择不同的登录方式。
    关于取号缓存：应用取号或者授权成功后，SDK将取号的一个临时凭证缓存在本地，缓存能有效提高取号成功率、降低时延，并允许用户在未开启蜂窝网络时成功取号。SDK本身对缓存有处理逻辑，在某些场景下（如换卡）会让缓存提前失效，但若应用对安全性要求较高，也可以通过SDK提供的方法（安卓的delScrip和iOS的delectScrip）让缓存马上失效。
    本机号码校验
    通过调用安卓的mobileAuth或iOS的mobileAuthCompletion方法，可在不拉起授权页的情况下获得token。此时获得的token不能用于兑换用户的完整号码，只能用于校验本机号码与待校验号码的一致性。
    预取号：安卓的getPhoneInfo或iOS的getPhoneNumberCompletion所形成取号缓存scrip同样适用于本机号码校验，可提前进行取号以提高后续获取token的效率。
    适用场景：可在用户无感知的情况下校验本机号码与待校验号码的一致性，适用于所有基于手机号码进行风控的场景。

    跳转记录位置

  • vue

首先想到的就是keep-alive，首先下载依赖，然后在根组件里 用标签的形式把组件包裹起来，然后在路由选项中配置meta他是一个对象，给他 设置一个keepalive属性，值是一个布尔值，设置为true就是证明这个组件需要 被缓存，这是这个功能基本完整

  • react

将尝试用的是react-keeper插件,首先下载插件,将app.js文件中,之前使用的link替换成Route,并且使用HashRouterus标签包裹整个路由,其中path值为路由,理由/linkage,在列表页中,引入control和cacheLink,使用导入的 CacheLink 包裹我们要点击跳转的模块，CacheLink 具体作用就是可以缓存跳转之前的组件，之后定义一个方法 进行Control.go(/jump)


社保

税率

公司

人人车 北京市朝阳区望京园602号楼11层1220 赵松

  • 车程 620路(天通东苑一区西门—-北苑)——-593路(北苑—-望花路东路)—-步行700米
  • 大约1小时20分钟

穷游 北京朝阳区WeWork(国航世纪)霄云路40号 肖异

  • 车程 628路(天通东苑一区西门—-地铁立水桥南站)——地铁5号线(立水桥南—-惠新西街南口)—-地铁10号线外环(惠新西街南口——亮马桥)—-步行1公里
  • 大约小时20分钟

住址

天通苑东一区

面试题

https://www.yuque.com/books/share/8d14c3f5-9eb0-41c8-9a11-b3b12b4ddb9c?# 《前端面试题》