三年经验前端社招——朴朴科技

大家好,我是若川,祝大家中秋节快乐。最近组织了源码共读活动《1个月,200+人,一起读了4周源码》,已经有超50+人提交了笔记,群里已经有超1200人,感兴趣的可以点此链接扫码加我微信 ruochuan12 参与。

本文经作者@lxcan 授权转载,未经授权请勿直接转载。
原文标题:《三年经验前端社招——朴朴科技》
原文链接:https://zhuanlan.zhihu.com/p/405785932
文末点击阅读原文直达

前言

本人毕业学校是双非二本,非计算机科班出身,大学时自学的前端相关技能。截止2021年8月,有3年前端开发经验,技术栈为 vue 全家桶,求职意向城市是深圳。想着找一个更大的平台寻求发展(技术沉淀、涨薪),所以出来接受社会的毒打了。。。

本文的目的是记录自己的面试经历,各位路过的兄dei也可以参考一下,也让自己有个回顾和反思。路漫漫其修远兮,吾将上下而求索

下面的题目,都会标明每一题的性质,部分题目也会给出一些参考思路和参考回答,希望各位大佬不吝赐教~

  • 描述:对概念、过程的描述,纯理论性问答题为主

  • 举例:说出应用场景,或者是自己团队实践的情况

  • 伪代码:写代码,但不需要跑起来,甚至可以随便写伪代码,主要目的是描述思路

  • 编程:真正的写代码,需要跑起来,有测试用例,要看到效果

HR面的话,是一些日常、项目回顾(少说技术细节)、职业规划、你的优势和缺点、为什么跑路、为什么选择这边、目前薪资和职级、期望薪资,HR面基本离不开这些问题。

一面

1、项目问题,深挖细节,说几个做过的项目中,你觉得比较复杂的功能【描述】

2、h5 首页为什么做成了服务端渲染?【描述】

3、打包结果优化,具体做了哪些优化【描述】【举例】

4、vue 中 beforeCreate 和 created 的区别【描述】

5、vue 中用过哪些修饰器?【举例】
事件修饰符
.stop
.prevent
.capture
.self
.once
.passive

按键修饰符
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

其他常用的修饰符
.trim
.number
.lazy
.sync

6、vue 中 computed 和 watch 的区别【描述】

  • computed 一般用于简化模板中变量的调用

  • watch 一般用于监听数据的变化,做一些逻辑处理或者异步处理,可以深度监听、立即执行

  • computed 和 watch 在源码里都是通过 Watcher 类创建出来的

  • 初始化时,先创建 computed 再创建 watch 。数据改变时,先执行 computed 再执行 watch

7、vue 中 key 的作用是什么?【描述】
Key 的作用:
主要用来在虚拟 DOM 的 diff 算法中,在新旧节点的对比时辨别 vnode ,使用 key 时,Vue 会基于 key 的变化重新排列元素顺序,尽可能的复用页面元素,只找出必须更新的DOM,最终可以减少DOM操作。常见的列子是结合 v-for 来进行列表渲染,或者用于强制替换元素/组件。
设置 Key 的好处:
(1)数据更新时,可以尽可能的减少DOM操作;
(2)列表渲染时,可以提高列表渲染的效率,提高页面的性能;

8、比如,在 v-for 时写了 key ,将第二个元素和第三个元素交换了顺序,实际的 diff 算法怎样的【描述】

9、有没有做过组件的抽离和组件库的开发?具体做了什么工作【描述】

10、内部组件库,怎么本地开发和调试?怎么上线?本地调试有哪些方式【描述】【举例】

11、聊一聊浏览器的渲染机制,浏览器是怎么解析和渲染html的?【描述】

12、js 异步加载的方式?defer 和 async 的区别?【描述】
(1)defer 是在HTML解析完之后才会执行,如果是多个,按照加载的顺序依次执行
(2)async 是在加载完之后立即执行,如果是多个,执行顺序和加载顺序无关

13、重定向的状态码有哪些?它们的区别是什么?【描述】【举例】

14、https 相较 http ,是怎么体现安全性的?【描述】
http: 超文本传输协议(Hypertext Transfer Protocol),是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),它是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约定和规范。
https 的全称是 Hypertext Transfer Protocol Secure , 它用来在计算机网络上的两个端系统之间进行安全的交换信息(secure communication). HTTPS 是 HTTP 协议的一种扩展,它本身并不保证传输的安全性,那么谁来保证安全性呢?在 HTTPS 中,使用传输层安全性(TLS)或安全套接字层(SSL)对通信协议进行加密。也就是 HTTP + SSL(TLS) = HTTPS。
(TLS(Transport Layer Security) 是 SSL(Secure Socket Layer) 的后续版本,它们是用于在互联网两台计算机之间用于身份验证和加密的一种协议。)
http 和 https 的区别

  • https 协议需要 ca 证书,费用较高

  • http 数据信息是明文传输,https 则是具有安全性的 ssl 加密传输协议。

  • 使用不同的链接方式,端口也不同,一般而言,http 协议的端口为 80 , https 的端口为 443

  • http 的连接很简单,是无状态的;https 协议是由 http + ssl 协议构建的可进行加密传输、身份认证的网络协议,比 http 协议安全

15、https 证书的作用是什么?【描述】
CA 的全称是 Certificate Authority,证书认证机构,你必须让 CA 颁布具有认证过的公钥,才能解决公钥的信任问题。

存在一个数字签名的认证问题。因为私钥是自己的,公钥是谁都可以发布,所以必须发布经过认证的公钥,才能解决公钥的信任问题。

16、讲一下js原型链【描述】

17、由构造函数创建的实例对象,和构造函数本身,他们的原型链有什么区别?【描述】

18、讲一下闭包?实际开发中有什么应用?【描述】【举例】

19、flex 布局相关都有哪些属性?含义是什么?flex 属性对应哪几个属性【描述】

20、flex-grow 和 flex-shrink 代表什么含义【描述】
flex-grow 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

21、CommonJS 与 ESModule 的区别【描述】

22、Tree-shaking 原理【描述】

23、ESModule 模块化是怎么解决循环引用的问题的【描述】
参考 https://es6.ruanyifeng.com/#docs/module-loader#%E5%BE%AA%E7%8E%AF%E5%8A%A0%E8%BD%BD

24、你对 react 怎么看待?【描述】

25、你是通过什么手段去学习前端技术的?【描述】

二面

1、最近在学习什么新技术?Vue3.0做了哪些优化【描述】

2、说一个你做过印象最深刻的项目【描述】

3、对于首屏加速,你有哪些方案【描述】

4、路由懒加载有哪些方式【描述】

5、说一下你对模块化的理解,CommonJS 和 ESModule 有什么区别?【描述】

  • CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。

  • CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。

  • CommonJS 模块的 require() 是同步加载模块,ES6 模块的 import 命令是异步加载,有一个独立的模块依赖的解析阶段。

6、打包结果里面出现重复包的情况,怎么解决【描述】

7、有哪些手段可以加快 webpack 打包速度【描述】

  • 使用高版本的webpack (使用webpack4)

  • 多线程/多实例构建:HappyPack(不维护了) thread-loader

  • 缩小打包作用域

  • 充分利用缓存提升二次构建速度

  • DLLPlugin 提前打包、分包,避免反复编译浪费时间

8、移动端开发,是怎么适配的?有没有办法在打包时将 px 转换为 rem【描述】

9、描述一下 Vue 中 template 模板编译的过程【描述】

10、说下 vue-router 的实现原理【描述】

11、有没有方案,当 history.pushState 改变了浏览器地址栏后,监听到地址改变【描述】
- 利用观察者模式
- 重写 history 方法,并添加 window.addHistoryListener 事件机制

12、你觉得怎样才算是一个高标准的组件库【描述】

13、组件库的文档是怎么开发的?【描述】

  • 手工维护方案:建工程手动引用组件,书写示例和说明

  • elementUI 方案:示例和说明按照一定规则写在md文件中,调用md-loader将md文件转成相应的页面

  • Storybook 方案:Storybook是UI组件的开发环境。它允许您浏览组件库,查看每个组件的不同状态,以及交互式开发和测试组件。

14、组件库怎么进行本地开发调试?【描述】
(1)本地写demo
(2)本地编译,拷贝到业务系统,替换 node_module 下的静态资源进行测试
15、求实现:有个请求,10秒内可以重试3次,如果3次都失败,就抛出异常【伪代码】
利用 setTimeout 和 Promise.race 实现
16、说一下你的职业规划【描述】

最后

朴朴科技致力于研发新零售即时电商领域的标杆系统,朴朴超市定位于一站式移动端30分钟即时配送购物平台。公司技术栈主要是 React+TS,两轮技术面试官挺强的,问的问题覆盖前端各方面,专业,准备约HR面谈薪资的,因为有其他更合适的offer了,被我委婉拒绝了。
往期回顾:

  • 三年经验前端社招——Shopee

  • 三年经验前端社招——腾讯微保

  • 三年经验前端社招——丰巢科技

  • 三年经验前端社招——众安保险

  • 三年经验前端社招——有赞

天生我材必有用,千金散尽还复来


最近组建了一个湖南人的前端交流群,如果你是湖南人可以加我微信 ruochuan12 私信 湖南 拉你进群。


推荐阅读

1个月,200+人,一起读了4周源码
我读源码的经历

老姚浅谈:怎么学JavaScript?

我在阿里招前端,该怎么帮你(可进面试群)

13f20cd57e6aa27fefa1cf915412d625.gif

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》10余篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,最近组织了源码共读活动,帮助1000+前端人学会看源码。公众号愿景:帮助5年内前端人走向前列。

2cf1b54740d60bf992ac8a761e5fc688.png

识别方二维码加我微信、拉你进源码共读

今日话题

略。欢迎分享、收藏、点赞、在看我的公众号文章~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275404.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

EL表达式和JSTL标准标签库

一、EL表达式 什么是EL表达式 EL(Express Lanuage)表达式可以嵌入在jsp页面内部减少jsp脚本的编写EL出现的目的是要替代jsp页面中脚本的编写。EL表达式的作用 EL最主要的作用是获得四大域中的数据// 1. pageContext ${pageScope.key}; // 2. request ${r…

(转)细说Cookie

原文地址:http://www.cnblogs.com/fish-li/archive/2011/07/03/2096903.htmlCookie虽然是个很简单的东西,但它又是WEB开发中一个很重要的客户端数据来源,而且它可以实现扩展性很好的会话状态, 所以我认为每个WEB开发人员都有必要对…

三年经验前端社招——丰巢科技

大家好,我是若川。最近组织了源码共读活动《1个月,200人,一起读了4周源码》,已经有超50人提交了笔记,群里已经有超1200人,感兴趣的可以点此链接扫码加我微信 ruochuan12 参与。本文经作者lxcan 授权转载&am…

数字集成电路物理设计_数字世界的物理词汇

数字集成电路物理设计Nineteen Eighty-Four is my favourite novel; I must have read it half a dozen times. There are many reasons why I believe it to be a work of literary genius, but recently I’ve been thinking about one specific aspect of it that has a ver…

yum安装Docker失败No package docker available

2019独角兽企业重金招聘Python工程师标准>>> 原因:yum没有找到docker包,更新epel第三方软件库。 yum install epel-release再yum安装docker: yum install -y docker转载于:https://my.oschina.net/yuantangxi/blog/3033800

黑客宣言_情感设计宣言

黑客宣言重点 (Top highlight)I have a feeling that this article is going to be slightly different from the rest of the articles I’ve recently seen or read. Everybody seems to be fighting on topics such as “UX designer or Product Designer”? “UX/UI is ok…

[转]VS2010中的单元测试

本文转自:http://zxianf.blog.163.com/blog/static/30120701201101011757499/ 在VS2010中,单元测试的功能很强大,使得建立单元测试和编写单元测试代码,以及管理和运行单元测试都变得简单起来,通过私有访问器可以对私有方法也能进行…

三年经验前端社招——Shopee

大家好,我是若川。最近组织了源码共读活动《1个月,200人,一起读了4周源码》,已经有超50人提交了笔记,群里已经有超1200人,感兴趣的可以点此链接扫码加我微信 ruochuan12本文经作者lxcan 授权转载&#xff0…

简易拨号器iCall

iCall是由哥开发的一款android平台的电话拨号小工具&#xff0c;简单不能再简单的Android手机拨号程序。 代码不过几行&#xff1a; <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/…

苹果手机隐私分析数据是什么_苹果公司以用户为中心的隐私保护方法能教给我们什么?

苹果手机隐私分析数据是什么重点 (Top highlight)Moving beyond the rollercoaster of excitement and controversy Apple has been in for the last week, there was one thing in the WWDC keynote that stood out for me. One thing I really appreciated seeing. There is …

为什么 Vue2 this 能够直接获取到 data 和 methods ? 源码揭秘!

1. 前言大家好&#xff0c;我是若川。最近组织了源码共读活动《1个月&#xff0c;200人&#xff0c;一起读了4周源码》&#xff0c;已经有超50人提交了笔记&#xff0c;群里已经有超1200人&#xff0c;感兴趣的可以点此链接扫码加我微信 ruochuan12之前写的《学习源码整体架构系…

钮扣电池电压电量_纽扣厂

钮扣电池电压电量S. is a designer and works at the button factory. Despite its scary look, S. goes there every day, and he loves his routine, never missing a day!S.是一位设计师&#xff0c;在按钮工厂工作。 尽管看上去很恐怖&#xff0c;S。每天都去那里&#xff…

18秋学期《计算机网络》在线作业,18秋北交《计算机应用基础及计算机网络与应用》在线作业一-2辅导资料.docx...

18秋北交《计算机应用基础及计算机网络与应用》在线作业一-2辅导资料.docx18 秋北交计算机应用基础及计算机网络与应用在线作业一-21、B 2、D 3、B 4、A 5、B 一、单选题共 10 题&#xff0c;40 分1、决定局域网特性的主要技术 要素包括( )、传输介质与介 质访问控制方法。A 所…

三年经验前端社招——慧择网

大家好&#xff0c;我是若川。最近组织了源码共读活动《1个月&#xff0c;200人&#xff0c;一起读了4周源码》&#xff0c;已经有超50人提交了笔记&#xff0c;群里已经有超1200人&#xff0c;感兴趣的可以点此链接扫码加我微信 ruochuan12本文经作者lxcan 授权转载&#xff0…

港口遭遇小MM

港口&#xff0c;遭遇小MM 刚开始&#xff0c;丫头看见我拍她&#xff0c;对我毫不客气地说&#xff1a;“侵犯肖像权&#xff0c;除非立刻买两份冰淇淋来&#xff01;”后来&#xff0c;她就一直跟在我屁股后面&#xff0c;求我给她拍。轮到我说话了&#xff1a;“拍一张&…

印发 指南 通知_通知设计的综合指南

印发 指南 通知重点 (Top highlight)Peripheral messages in digital products, collectively known as notifications, should never harm the user experience. Instead, they must contribute to an experience that helps people accomplish a goal. Addressing notificati…

三年经验前端社招——众安保险

大家好&#xff0c;我是若川。最近组织了源码共读活动《1个月&#xff0c;200人&#xff0c;一起读了4周源码》&#xff0c;已经有超50人提交了笔记&#xff0c;群里已经有超1200人&#xff0c;感兴趣的可以点此链接扫码加我微信 ruochuan12本文经作者lxcan 授权转载&#xff0…

现代人的压力和焦虑_设计师如何建立减少焦虑和压力的体验

现代人的压力和焦虑From my Brooklyn apartment in New York City, I watch Gov. Andrew Cuomo share the daily Covid-19 death toll with the nation. I watch his broadcast every day, around 11 a.m. I dubbed Cuomo America’s #crisisdaddy and have posted so many Ins…

我是如何零基础入门前端开发的(2021 版)

大家好&#xff0c;我是若川。最近组织了源码共读活动《1个月&#xff0c;200人&#xff0c;一起读了4周源码》&#xff0c;已经有超50人提交了笔记&#xff0c;群里已经有超1200人&#xff0c;感兴趣的可以点此链接扫码加我微信 ruochuan12大家好&#xff0c;我是山山而川&…

去贵阳参观大数据到哪参观_您必须参观的四个世界

去贵阳参观大数据到哪参观Video games have always aimed to create a world separate from our own, with experiences gamers couldn’t get anywhere else. As technology has raced forward with time, these worlds have become more realistic, more believable, and at …