阿里专有钉钉前端面试指南

大家好,我是若川。今天推荐这篇掘金高赞文章,欢迎留言交流。

经作者子奕大佬授权转载,原文链接:https://juejin.cn/post/6986436944913924103

作者介绍

子弈[1],专有钉钉前端团队成员,负责专有钉钉 PC 客户端的工程化、端上应用、端上模块插件化的开发。

前言

本文主要给大家带来组内一面面试官子弈的面试题,用于给大家进行知识扫盲,希望对正在求职的同学以及正在准备秋招的应届生有所帮助。需要注意,本文不会提供所谓的标准答案,希望大家能够自行 Google 找到心中想要的答案。

温馨提示:这里不会过多讲解阿里的校招和社招流程,如果你对校招流程感兴趣,可以阅读专有钉钉校园招聘指南[2],如果你对社招流程和数据感兴趣,可以查看在阿里我是如何当面试官的[3]

考察内容


专有钉钉的一面面试主要考察以下三个方面的内容:

  • 基础知识:考察面试者是否掌握扎实的前端基础知识体系

  • 业务思考:考察面试者的业务深度

  • 笔试实践:考察面试者基本知识的实践能力,并考察代码风格和逻辑思维能力


需要注意,如果你觉得某些面试题有些突兀,不要觉得惊讶,这些面试题是在不断深入沟通的过程中层层递进被带出来的,其中某些面试题可能相对较偏,纯粹是加分项面试题。

基础知识

基础知识主要包含以下几个方面:

  • 基础:计算机原理、编译原理、数据结构、算法、设计模式、编程范式等基本知识了解

  • 语法:JavaScript、ECMAScript、CSS、TypeScript、HTML、Node.js 等语法的了解和使用

  • 框架:React、Vue、Egg、Koa、Express、Webpack 等原理的了解和使用

  • 工程:编译工具、格式工具、Git、NPM、单元测试、Nginx、PM2、CI / CD 了解和使用

  • 网络:HTTP、TCP、UDP、WebSocket、Cookie、Session、跨域、缓存、协议的了解

  • 性能:编译性能、监控、白屏检测、SEO、Service Worker 等了解

  • 插件:Chrome 、Vue CLI 、Webpack 等插件设计思路的理解

  • 系统:Mac、Windows、Linux 系统配置的实践

  • 后端:Redis 缓存、数据库、Graphql、SSR、模板引擎等了解和使用

基础

  • 列举你所了解的计算机存储设备类型?

  • 一般代码存储在计算机的哪个设备中?代码在 CPU 中是如何运行的?

  • 什么是指令和指令集?

  • 复杂指令集和精简指令集有什么区别?

  • JavaScript 是如何运行的?解释型语言和编译型语言的差异是什么?

  • 简单描述一下 Babel 的编译过程?

  • JavaScript 中的数组和函数在内存中是如何存储的?

  • 浏览器和 Node.js 中的事件循环机制有什么区别?

  • ES6 Modules 相对于 CommonJS 的优势是什么?

  • 高级程序设计语言是如何编译成机器语言的?

  • 编译器一般由哪几个阶段组成?数据类型检查一般在什么阶段进行?

  • 编译过程中虚拟机的作用是什么?

  • 什么是中间代码(IR),它的作用是什么?

  • 什么是交叉编译?

  • 发布 / 订阅模式和观察者模式的区别是什么?

  • 装饰器模式一般会在什么场合使用?

  • 谈谈你对大型项目的代码解耦设计理解?什么是 Ioc?一般 DI 采用什么设计模式实现?

  • 列举你所了解的编程范式?

  • 什么是面向切面(AOP)的编程?

  • 什么是函数式编程?什么是响应式编程?什么是函数响应式编程?

  • 响应式编程或者函数响应式编程的使用场景有哪些?

语法

  • 如何实现一个上中下三行布局,顶部和底部最小高度是 100px,中间自适应?

  • 如何判断一个元素 CSS 样式溢出,从而可以选择性的加 title 或者 Tooltip?

  • 如何让 CSS 元素左侧自动溢出(... 溢出在左侧)?

  • 什么是沙箱?浏览器的沙箱有什么作用?

  • 如何处理浏览器中表单项的密码自动填充问题?

  • Hash 和 History 路由的区别和优缺点?

  • JavaScript 中的 const 数组可以进行 push 操作吗?为什么?

  • JavaScript 中对象的属性描述符有哪些?分别有什么作用?

  • JavaScript 中 console 有哪些 api ?

  • 简单对比一下 Callback、Promise、Generator、Async 几个异步 API 的优劣?

  • Object.defineProperty 有哪几个参数?各自都有什么作用?

  • Object.defineProperty 和 ES6 的 Proxy 有什么区别?

  • ES6 中 Symbol、Map、Decorator 的使用场景有哪些?或者你在哪些库的源码里见过这些 API 的使用?

  • 为什么要使用 TypeScript ? TypeScript 相对于 JavaScript 的优势是什么?

  • TypeScript 中 const 和 readonly 的区别?枚举和常量枚举的区别?接口和类型别名的区别?

  • TypeScript 中 any 类型的作用是什么?

  • TypeScript 中 any、never、unknown 和 void 有什么区别?

  • TypeScript 中 interface 可以给 Function / Array / Class(Indexable)做声明吗?

  • TypeScript 中可以使用 String、Number、Boolean、Symbol、Object 等给类型做声明吗?

  • TypeScript 中的 this 和 JavaScript 中的 this 有什么差异?

  • TypeScript 中使用 Unions 时有哪些注意事项?

  • TypeScript 如何设计 Class 的声明?

  • TypeScript 中如何联合枚举类型的 Key?

  • TypeScript 中 ?.、??、!.、_、** 等符号的含义?

  • TypeScript 中预定义的有条件类型有哪些?

  • 简单介绍一下 TypeScript 模块的加载机制?

  • 简单聊聊你对 TypeScript 类型兼容性的理解?抗变、双变、协变和逆变的简单理解?

  • TypeScript 中对象展开会有什么副作用吗?

  • TypeScript 中 interface、type、enum 声明有作用域的功能吗?

  • TypeScript 中同名的 interface 或者同名的 interface 和 class 可以合并吗?

  • 如何使 TypeScript 项目引入并识别编译为 JavaScript 的 npm 库包?

  • TypeScript 的 tsconfig.json 中有哪些配置项信息?

  • TypeScript 中如何设置模块导入的路径别名?

框架

  • React Class 组件有哪些周期函数?分别有什么作用?

  • React Class 组件中请求可以在 componentWillMount 中发起吗?为什么?

  • React Class 组件和 React Hook 的区别有哪些?

  • React 中高阶函数和自定义 Hook 的优缺点?

  • 简要说明 React Hook 中 useState 和 useEffect 的运行原理?

  • React 如何发现重渲染、什么原因容易造成重渲染、如何避免重渲染?

  • React Hook 中 useEffect 有哪些参数,如何检测数组依赖项的变化?

  • React 的 useEffect 是如何监听数组依赖项的变化的?

  • React Hook 和闭包有什么关联关系?

  • React 中 useState 是如何做数据初始化的?

  • 列举你常用的 React 性能优化技巧?

  • Vue 2.x 模板中的指令是如何解析实现的?

  • 简要说明 Vue 2.x 的全链路运作机制?

  • 简单介绍一下 Element UI 的框架设计?

  • 如何理解 Vue 是一个渐进式框架?

  • Vue 里实现跨组件通信的方式有哪些?

  • Vue 中响应式数据是如何做到对某个对象的深层次属性的监听的?

  • MVVM、MVC 和 MVP 的区别是什么?各自有什么应用场景?、

  • 什么是 MVVM 框架?

工程

  • Vue CLI 3.x 有哪些功能?Vue CLI 3.x 的插件系统了解?

  • Vue CLI 3.x 中的 Webpack 是如何组装处理的?

  • Vue 2.x 如何支持 TypeScript 语法?

  • 如何配置环境使得 JavaScript 项目可以支持 TypeScript 语法?

  • 如何对 TypeScript 进行 Lint 校验?ESLint 和 TSLint 有什么区别?

  • Node.js 如何支持 TypeScript 语法?

  • TypeScript 如何自动生成库包的声明文件?

  • Babel 对于 TypeScript 的支持有哪些限制?

  • Webpack 中 Loader 和 Plugin 的区别是什么?

  • 在 Webpack 中是如何做到支持类似于 JSX 语法的 Sourcemap 定位?

  • 发布 Npm 包如何指定引入地址?

  • 如何发布开发项目的特定文件夹为 Npm 包的根目录?

  • 如何发布一个支持 Tree Shaking 机制的 Npm 包?

  • Npm 包中 peerDependencies 的作用是什么?

  • 如何优雅的调试需要发布的 Npm 包?

  • 在设计一些库包时如何生成版本日志?

  • 了解 Git (Submodule)子模块吗?简单介绍一下 Git 子模块的作用?

  • Git 如何修改已经提交的 Commit 信息?

  • Git 如何撤销 Commit 并保存之前的修改?

  • Git 如何 ignore 被 commit 过的文件?

  • 在使用 Git 的时候如何规范 Git 的提交说明(Commit 信息)?

  • 简述符合 Angular 规范的提交说明的结构组成?

  • Commit 信息如何和 Github Issues 关联?

  • Git Hook 在项目中哪些作用?

  • Git Hook 中客户端和服务端钩子各自用于什么作用?

  • Git Hook 中常用的钩子有哪些?

  • pre-commit 和 commit-msg 钩子的区别是什么?各自可用于做什么?

  • husky 以及 ghook 等工具制作 Git Hook 的原理是什么?

  • 如何设计一个通用的 Git Hook ?

  • Git Hook 可以采用 Node 脚本进行设计吗?如何做到?

  • 如何确保别人上传的代码没有 Lint 错误?如何确保代码构建没有 Lint 错误?

  • 如何在 Vs Code 中进行 Lint 校验提示?如何在 Vs Code 中进行 Lint 保存格式化?

  • ESLint 和 Prettier 的区别是什么?两者在一起工作时会产生问题吗?

  • 如何有效的识别 ESLint 和 Prettier 可能产生冲突的格式规则?如何解决此类规则冲突问题?

  • 在通常的脚手架项目中进行热更新(hot module replacement)时如何做到 ESLint 实时打印校验错误信息?

  • 谈谈你对 SourceMap 的了解?

  • 如何调试 Node.js 代码?如何调试 Node.js TypeScript 代码?在浏览器中如何调试 Node.js 代码?

  • 列举你知道的所有构建工具并说说这些工具的优缺点?这些构建工具在不同的场景下应该如何选型?

  • VS Code 配置中的用户和工作区有什么区别?

  • VS Code 的插件可以只对当前项目生效吗?

  • 你所知道的测试有哪些测试类型?

  • 你所知道的测试框架有哪些?

  • 什么是 e2e 测试?有哪些 e2e 的测试框架?

  • 假设现在有一个插入排序算法,如何对该算法进行单元测试?

网络

  • CDN 服务如何实现网络加速?

  • WebSocket 使用的是 TCP 还是 UDP 协议?

  • 什么是单工、半双工和全双工通信?

  • 简单描述 HTTP 协议发送一个带域名的 URL 请求的协议传输过程?(DNS、TCP、IP、链路)

  • 什么是正向代理?什么是反向代理?

  • Cookie 可以在服务端生成吗?Cookie 在服务端生成后的工作流程是什么样的?

  • Session、Cookie 的区别和关联?如何进行临时性和永久性的 Session 存储?

  • 设置 Cookie 时候如何防止 XSS 攻击?

  • 简单描述一下用户免登陆的实现过程?可能会出现哪些安全性问题?一般如何对用户登录的密码进行加密?

  • HTTP 中提升传输速率的方式有哪些?常用的内容编码方式有哪些?

  • 传输图片的过程中如果突然中断,如何在恢复后从之前的中断中恢复传输?

  • 什么是代理?什么是网关?代理和网关的作用是什么?

  • HTTPS 相比 HTTP 为什么更加安全可靠?

  • 什么是对称密钥(共享密钥)加密?什么是非对称密钥(公开密钥)加密?哪个更加安全?

  • 你觉得 HTTP 协议目前存在哪些缺点?

性能

  • 在 React 中如何识别一个表单项里的表单做到了最小粒度 / 代价的渲染?

  • 在 React 的开发的过程中你能想到哪些控制渲染成本的方法?

插件

  • Vue CLI 3.x 的插件系统是如何设计的?

  • Webpack 中的插件机制是如何设计的?

系统

  • \r\n(CRLF) 和 \n (LF)的区别是什么?(Vs Code 的右下角可以切换)

  • /dev/null 的作用是啥?

  • 如何在 Mac 的终端中设置一个命令的别名?

  • 如何在 Windows 中设置环境变量?

  • Mac 的文件操作系统默认区分文件路径的大小写吗?

  • 编写 Shell 脚本时如何设置文件的绝对路径?

后端

  • Session、Cookie 的区别和关联?如何进行临时性和永久性的 Session 存储?

  • 如何部署 Node.js 应用?如何处理负载均衡中 Session 的一致性问题?

  • 如何提升 Node.js 代码的运行稳定性?

  • GraphQL 与 Restful 的区别,它有什么优点?

  • Vue SSR 的工作原理?Vuex 的数据如何同构渲染?

  • SSR 技术和 SPA 技术的各自的优缺点是什么?

  • 如何处理 Node.js 渲染 HTML 压力过大问题?

业务思考


业务思考更多的是结合基础知识的广度和深度进行的具体业务实践,主要包含以下几个方面:

  • 工程化:代码部署、CI / CD 流程设计、Jenkins、Gitlab、Docker 等

  • 通用性:脚手架、SDK、组件库等框架设计

  • 应用框架:Hybrid 混合、微前端、BFF、Monorepo

  • 可视化:

  • 低代码:通用表单设计、通用布局设计、通用页面设计、JSON Schema 协议设计等

  • 测试:E2E 测试、单元测试、测试覆盖率、测试报告等

  • 业务:数据、体验、复杂度、监控

工程化

  • 你所知道的 CI / CD 工具有哪些?在项目中有接触过类似的流程吗?

  • 如果让你实现一个 Web 前端的 CI / CD 工程研发平台,你会如何设计?

  • 如果我们需要将已有项目中的线上产物资源(例如图片)转换成本地私有化资源,你有什么解决方案?

  • 如何使用 Vue CLI 3.x 定制一个脚手架?比如内部自动集成了 i18n、 axios、Element UI、路由守卫等?

  • Jenkins 如何配合 Node.js 脚本进行 CI / CD 设计?

通用性

  • 如果让你设计一个通用的项目脚手架,你会如何设计?一个通用的脚手架一般需要具备哪些能力?

  • 如果让你设计一个通用的工具库,你会如何设计?一个通用的工具库一般需要具备哪些能力?

  • 假设你自己实现的 React 或 Vue 的组件库要设计演示文档,你会如何设计?设计的文档需要实现哪些功能?

  • 在设计工具库包的时候你是如何设计 API 文档的?

应用框架

  • 谈谈 Electron、Nw.js、CEF、Flutter 和原生开发的理解?

  • 谈谈桌面端应用中 HotFix 的理解?

  • 你觉得什么样的场景需要使用微前端框架?

业务

  • 什么是单点登录?如何做单点登录?

  • 如何做一个项目的国际化方案?

  • 如何做一个项目的监控和埋点方案?

  • 如何建设项目的稳定性(监控、灰度、错误降级、回滚...)?

  • 一般管理后台型的应用需要考虑哪些性能方面的优化?

  • 简述一些提升项目体验的案例和技术方案(骨架屏、Loading 处理、缓存、错误降级、请求重试...)?

  • 假设需要对页面设计一个水印方案,你会如何设计?

低代码

  • 如何设计一个通用的 JSON Schema 协议使其可以动态渲染一个通用的联动表单?

  • 一般的低代码平台需要具备哪些能力?

笔试实践

笔试更多的是考验应聘者的逻辑思维能力和代码书写风格,主要包含以下几个方面:

  • 正则表达式

  • 算法

  • 数据结构

  • 设计模式

  • 框架的部分原理实现

  • TypeScript 语法

  • 模板解析

数据结构

  • 使用 TypeScript 语法将没有层级的扁平数据转换成树形结构的数据

// 扁平数据
[{name: '文本1',parent: null,id: 1,
}, {name: '文本2',id: 2,parent: 1
}, {name: '文本3',parent: 2,id: 3,
}]// 树状数据
[{name: '文本1',id: 1,children: [{name: '文本2',id: 2,children: [{name: '文本3',id: 3}]}]
}]

模板解析

  • 实现一个简易的模板引擎

const template = '嗨,{{ info.name.value }}您好,今天是星期 {{ day.value }}';const data = {info: {name: {value: '张三'}},day: {value: '三'}
};render(template, data); // 嗨,张三您好,今天是星期三

设计模式

  • 简单实现一个发布 / 订阅模式

正则表达式

  • 匹配出字符串中 const a  = require('xxx') 中的 xxx

参考资料

[1]

子弈: https://juejin.cn/user/3227821870163176/posts

[2]

专有钉钉校园招聘指南: https://juejin.cn/post/6933141572238671880

[3]

在阿里我是如何当面试官的: https://juejin.cn/post/6844904093425598471


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


推荐阅读

我在阿里招前端,该怎么帮你(可进面试群)
毕业年限不长的前端焦虑和突破方法

前端抢饭碗系列之Vue项目如何做单元测试
老姚浅谈:怎么学JavaScript?

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

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

点击方卡片关注我、加个星标

今日话题

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

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

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

相关文章

安全态势感知产品对比_设计中的对比和人的感知

安全态势感知产品对比In this article, we’re going to explore the concept of contrast and its fundamental role in UX and visual design.在本文中,我们将探讨对比度的概念及其在UX和视觉设计中的基本作用。 Let’s start by defining what contrast is.让我…

在字节做前端一年后,有啥收获~

大家好,我是若川。今天分享这篇,相信读完会有些收获。本文经作者授权转载,原文链接:https://juejin.cn/post/6980671091526074404个人简介19年底12月进入字节实习, 第二年7月毕业转正。到前几天正好全职一周年。进入公…

app用户隐私协议相关法律_隐私图标和法律设计

app用户隐私协议相关法律During its 2020 Worldwide Developers Conference, Apple spent time on one of today’s hottest topics — privacy. During the past couple of years, Apple has been rolling out various public campaigns aiming to position itself as a compa…

35 点击全图后发现地图“不见了”

相信很多用ArcGIS软件作图的时候会习惯用全图按钮,但是有的时候工程文件是他人提供的,也不太清楚是怎么做的,一点全图,软件界面就一片空白,找数据找半天,很是苦恼啊 这虽然不是什么大问题,但还是…

成为优秀沟通者的要素_如果您想成为更好的设计师,请成为更好的沟通者

成为优秀沟通者的要素Little changes that go a long way.小变化大有帮助。 I started my career in motion design.我的职业生涯始于运动设计。 My focus was on the visual and technical skills required to make emotionally compelling work. I believed great design s…

我读源码的经历~

你好,我是若川。最近来了一些读者朋友,在这里简单介绍自己的经历,也许对你有些启发。可以点击 ruochuan12 加我微信进群交流。这是我的公众号卡片,可以加下星标。我是谁我是若川,毕业于江西高校,《面试官问…

php建一个表按删除就删除,php怎样删除数据库表_后端开发

php删除数据库表的要领:起首建立一个PHP示例文件;然后衔接mysql数据库;末了经由过程“DROP TABLE runoob_tbl”语句删除MySQL数据表即可。引荐:《PHP视频教程》php MySQL 删除数据表MySQL中删除数据表是异常轻易操纵的&#xff0c…

字节招人

大家好,我是若川。这应该是第五次发招聘了,友情帮一个朋友宣传。普通高校的很多大学生因为信息差导致慢一两年才醒悟过来,原来大三就有校招了。如果能早些知道早做准备,结果可能会更好。而知名高校,身边很大学长学姐进…

人工智能和Adobe Sensei

Adobe概述 (Adobe Overview) The design process changes from person to person, practice to practice, and profession to profession. As we advance further into the 21st century, the design process for many people leans heavily on technology. Adobe leads the ch…

梳理了一下前端面试必考知识点

大家好,我是若川。最近收到不少朋友留言说,前端面试越来越难,尤其是技术面。既要熟悉各种框架,又要精通每个知识点的底层逻辑,甚至连前端工程化的内容都拿来考察。哪怕是有 3-5 年经验的老前端,都极有可能翻…

笔记本徽标键不起作用_为什么我们(不应该)关心徽标

笔记本徽标键不起作用Back in my art director days—when I was attempting to build a brand for myself on Instagram—I would often come across posts comparing two logos, side-by-side, prompting the community to comment on which was better: Version 1 or versio…

用手机EchoEcho问询朋友所在的位置

“我的朋友,你现在在哪儿?”这个简单的问题,在移动互联网时代能得到怎样的解答呢? EchoEcho就是这样一款新型的 LBS 服务,它跟 Google 纵横和 4SQ 签到都不太一样,能更准确地告知朋友们的位置。可以说&…

Error merging: refusing to merge unrelated histories

解决方案:git pullgit pull origin mastergit pull origin master --allow-unrelated-histories idea提交git提交文件的时候报错。因为是刚刚在码云上初始化,然后要把本地的项目提交上去,所以出现了 最上边两行黄色部分是向远程码云上提交的错…

小学接触web的我是如何拿下蚂蚁实习 Offer的

大家好,我是若川。我经常说在校生要尽早准备,消除信息差。如果你是在校生或者毕业年限不长就关注了我的公众号,大概率说明你比很多人优秀且热爱学习。比如很多加我微信 ruochuan12 好友的大学生都是在大厂实习的。本文就是小学就接触到了web的…

群晖第三方套件存储库_如何包装以及在何处存储品牌标识套件

群晖第三方套件存储库At Pics.io, we are lucky to support dozens of creative teams, offering digital asset management solutions. When we chat with designers, marketing managers, or videographers, we hear a lot about the issues teams face (drowning in multipl…

【WP7进阶】——扩展框架组件

组件描述 该组件为Windows Phone 7 本身C#框架扩展了一系列方法,可以使你在编写代码的时候减少重复复制,并且增加了许多通用功能,使你的编写代码的时候可以更加流畅和得以应手。 扩展类别 该组件是将我们日常常用到的数据类型或者集合等操作再…

尤大是如何发布vuejs的,学完可以应用到项目

大家好,我是若川。本文是读者NewName 投稿,看了我推荐的vuejs如何发布的源码(200余行),并成功写了一个小工具。推荐的当晚看到挺晚,这执行力这努力程度超过很多人啊。我本来是打算自己写一篇这个文章的&…

(转)从零实现3D图像引擎:(6)向量函数库

1. 数学分析 1) 基本定义&#xff1a; 向量由多个分量组成&#xff0c;2D/3D向量表示一条有向线段。下面的ux,uy就是两个分量。 向量u <ux, uy>&#xff0c;如果从点P1(x1, y1)指向点P2(x2, y2)&#xff0c;则&#xff1a; U p2 - p1 (x2-x1, y2-y1) <Ux, Uy> …

chrome黑暗模式_黑暗模式-并非时尚

chrome黑暗模式In this post I’ve shared my research and views on how the extremely popular “Dark Mode” has moved beyond it’s initial label of “The App Design Fad of 2019”.在这篇文章中&#xff0c;我分享了我的研究和看法&#xff0c;探讨了非常受欢迎的“黑…

花了一天精选了20多篇好文,只为与你分享

大家好&#xff0c;我是若川。很多小伙伴因工作繁忙而没有很多自己的时间去学习新知识&#xff0c;更多的是通过一些碎片化的时间来阅读一些他人的技术文章来提升自己的技术视野以及扩展自己的知识储备。这次我精心整理了一批大佬们的优秀文章&#xff0c;感兴趣的可以阅读关注…