开放面试题（山月）

linux 有哪些发行版，你最喜欢哪一个

原文：https://q.shanyue.tech/open/open/38.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 38(opens new window)

Author

回答者: zhangzl419(opens new window)

我最喜欢的 Linux 发行版是 Centos，第二喜欢的是 Ubuntu。Centos 在服务器上很好用，Ubuntu 做开发环境很好用。

Author

回答者: shfshanyue(opens new window)

我最喜欢的 Linux 发行版是 Centos，第二喜欢的是 Ubuntu。Centos 在服务器上很好用，Ubuntu 做开发环境很好用。

用的人多，就好用了。（不过我装 tmux 和 vim 都需要从源码编译

linux 的发行版，可以在 https://distrowatch.com 查询

因为平常工作都在 windows 环境下，只有部署的时候才会用到 linux 我司用到的 linux 为 centos 7 版本，比较稳定 我最喜欢的是 deepin，在业余时间接触过这个，图形化的界面很舒服，唯二的缺点是驱动问题和软件源问题

你们项目中的计划任务是如何组织的

原文：https://q.shanyue.tech/open/open/61.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 61(opens new window)

Author

回答者: shfshanyue(opens new window)

TODO

计划任务？这种？

网站性能优化都有哪些点

原文：https://q.shanyue.tech/open/open/84.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 84(opens new window)

Author

回答者: wjw-gavin(opens new window)

减少 http 请求次数： CSS Sprites, JS、CSS 源码压缩、图片大小适当控制； 网页 Gzip，CDN 托管，data 缓存 ，图片服务器。 尽量减少内联样式 将脚本放在底部 少用全局变量、缓存 DOM 节点查找的结果 图片预加载 按需加载

Author

回答者: shfshanyue(opens new window)

可参考 Google 的文档 https://developers.google.com/web/fundamentals/performance/get-started(opens new window)

Author

回答者: hwb2017(opens new window)

https://developers.google.com/web/fundamentals/performance/get-started

根据谷歌 Web 开发者网站总结的性能优化点:

• 资源加载优化
  • 衡量性能指标
    • Lab Data, 在规范的特定条件下，对 Web 应用的各项指标进行评估，典型工具如谷歌的 lighthouse
    • RUM，基于真实用户的性能指标监控，包括 FCP，FID，CLS 等，参考 https://web.dev/user-centric-performance-metrics/
    • 瀑布图，借助 performance API 记录整个站点和各个资源的加载时长
  • 优化资源大小(字节数)
    • 评估各资源的用途并评估是否可以直接移除
    • 通过压缩技术(minimize 和 compress)减少文本类资源(CSS,JavaScript,HTML)大小
    • 选择合适的图片格式、裁剪图片、懒加载图片等，通过 picture 标签响应式地返回图片，参考 https://www.jianshu.com/p/607567e488fc
    • 预加载和长期缓存字体，参考 https://web.dev/optimize-webfont-loading/
  • 减少 HTTP 请求次数
    • 合并文本资源，比如使用 webpack 这样的 bundle 技术
    • 合并图片资源，比如雪碧图
    • 内联内容较小的资源到 html 中，比如 data url
  • 善用 HTTP 缓存
    • 本地缓存命中顺序，内存缓存 => Service Worker 缓存 => HTTP 缓存(磁盘缓存) => HTTP/2 Push 缓存，参考 https://calendar.perfplanet.com/2016/a-tale-of-four-caches/
    • https://web.dev/http-cache/
  • 优化 JavaScript
    • JavaScript 的处理过程：下载(fetch) => 解压 => 解析(代码转换为 AST) => 编译(AST 转换为字节码) => 执行
    • 死代码消除(Tree Shaking)，减小总体传输文件大小
    • Code Spliting + 基于路由的按需加载，减小首次渲染的传输文件大小
  • 优化首次渲染路径
    • 渲染路径: DOM 树构建 => CSSOM 树构建 => Render Tree 构建 => 样式计算 => 布局 => 绘制位图 => 合成图层
    • 通过媒体查询避免首次渲染时加载不必要的 CSS 文件
    • 将对页面结构无影响的 JS 文件标记为 async 和 defer，避免阻塞 html 解析
• 渲染优化
  • 使用 requestAnimationFrame 代替 setTimeout 和 setInterval 来更新视图，减少卡顿
  • 将计算密集型的 JavaScript 代码移动到 Web Worker 中执行，避免占用主线程
  • 使用复杂度更低、class 风格的 CSS 选择器；减少频繁变动的 CSS 样式的影响元素个数
  • 使用性能更高的 flex 布局代替 float 布局
  • 避免对 offsetHeight 等 dom 属性的频繁访问，导致重绘和重排操作队列的频繁同步执行
  • 在 performance profiling 之后，将频繁变动的动画部分所属的 dom 元素标记为 will-change，独立构成一个图层

你们的前端代码上线部署一次需要多长时间，需要人为干预吗

原文：https://q.shanyue.tech/open/open/95.html

更多描述

更短的部署时间，更少的人为干预，更有利于敏捷开发

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 95(opens new window)

Author

回答者: shfshanyue(opens new window)

TODO

Author

回答者: DoubleRayWang(opens new window)

Jenkins+docker

Author

回答者: Carrie999(opens new window)

需要 1 个小时，需要

Author

回答者: shfshanyue(opens new window)

@Carrie999 一个小时！！！？这也太久了吧

你在工作中遇到最有挑战的事情是什么

原文：https://q.shanyue.tech/open/open/104.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 104(opens new window)

Author

回答者: fmleing(opens new window)

一个人 3 天负责完成本来评估 1 周工作量的需求变更，在刚接手项目进行维护的前提下，不熟悉需要更改的业务代码实现。

Author

回答者: Carrie999(opens new window)

没有

Author

回答者: Carrie999(opens new window)

我觉得都挺简单的，实现页面，对接接口，完美，但是有的时候用户会反馈问题就很烦，有的时候首屏家在速度慢就很烦，动效啥的也简单的，配置都是配置好了，容错机制，监控报错加上，就很棒了

你在工作中遇到最受挫折的事情是什么

原文：https://q.shanyue.tech/open/open/105.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 105(opens new window)

Author

回答者: Carrie999(opens new window)

就是钱少干的多委屈

你为什么从上家公司离职

原文：https://q.shanyue.tech/open/open/106.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 106(opens new window)

Author

回答者: Carrie999(opens new window)

俺觉得主要是钱多，去哪里其实都差不多

如何看待 toB 与 toC

原文：https://q.shanyue.tech/open/open/114.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 114(opens new window)

Author

回答者: xwxgjs(opens new window)

从职业方向取舍的角度看，我认为纠结这两个点没必要，toB 的业务可能很简单，toC 的业务也可能很复杂，两个端的壁垒也没有那么大。

从传统观点上看： toB：业务复杂，表单和定制化需求较多，需要给出一整套解决方案，但对体验和交互要求没有那么重要 toC：偏向用户体验的内容稍多，移动端的内容稍多。对性能的要求略高，每个产品的功能不复杂，业务开始只需要满足用户的一个痛点

但随着前端能力的增加，很多工具类软件都可以由前端承载，代码的复杂度也随之上升，前端从传统的辅助地位逐渐走向了客户端工程师的地位，内容也逐渐变得更有挑战性。

但如果从公司的角度看，toB 的公司一般面向政府、企事业单位，以供应商的身份提供技术咨询、定制化开发、业务支持等服务，回款周期较长，如果外部环境不好，资金流不畅，很容易拖欠工资。 但是，节奏没有那么快，一切都有较长的排期，相对更规范一些。

toC 的公司，一般都自负盈亏，现金流相对会快一些。但是现在的互联网企业都搞什么敏捷开发，基本上一周或者两周就一个版本，面向市场需要小步快跑

你对未来的工作有什么期待

原文：https://q.shanyue.tech/open/open/217.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 217(opens new window)

你对未来的三年规划和五年规划是什么样的

原文：https://q.shanyue.tech/open/open/218.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 218(opens new window)

Author

回答者: Bob4F(opens new window)

三年高级五年架构

Author

回答者: GitHubJiKe(opens new window)

三年高考五年模拟

当你入职后发现压力过大怎么办

原文：https://q.shanyue.tech/open/open/219.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 219(opens new window)

Author

回答者: Carrie999(opens new window)

没有过大，只有钱给的少

工作中你有没有很佩服的人

原文：https://q.shanyue.tech/open/open/220.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 220(opens new window)

Author

回答者: maya1900(opens new window)

月哥

作为技术负责人，你每天的工作是什么样的

原文：https://q.shanyue.tech/open/open/222.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 222(opens new window)

你相比去年，有哪些成长

原文：https://q.shanyue.tech/open/open/226.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 226(opens new window)

Author

回答者: Akishimo(opens new window)

体重有所成长，胖了不少

你如何看待 996

原文：https://q.shanyue.tech/open/open/228.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 228(opens new window)

1. 违法
2. 开历史的倒车
3. 容易使员工养成加班文化。最近一新闻提到苏州微软抵制从阿里离职的在职员工搞 996、在工作群里互相攀比加班时间的现象
4. 使员工更不值钱。996 工作制下只有拿到当前工资的 2.275 倍，才在经济账上不吃亏。
5. 对遵循八小时工作制的员工不公平
6. 工作 996，生病 ICU(opens new window)

你周末都喜欢做些什么

原文：https://q.shanyue.tech/open/open/232.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 232(opens new window)

Author

回答者: HoweZhang(opens new window)

打篮球，看电影，看不下书怎么办

Author

回答者: shfshanyue(opens new window)

打篮球，看电影，看不下书怎么办

丰富而有意义的生活啊，有这样的美好生活，还看书干嘛？工作日再看呀

打篮球，看电影，看不下书怎么办

看不下就休息，不要勉强自己

Author

回答者: rplss(opens new window)

这取决于媳妇儿喜欢做什么

当一个排期五天的任务需要在两天后上线如何解决

原文：https://q.shanyue.tech/open/open/264.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 264(opens new window)

1. 分析任务 这个任务是活动页面开发？还是常规需求？ 如果是常规需求，可以考虑延期 如果是活动页面，尤其是节假日、特殊纪念日的活动，可以考虑降低用户体验、砍需求等从而降低工作量，继而保证正常上线。因为运营活动的时效性较高
2. 在排期阶段多估算时间，预计是常规工作时间的 1.5 倍
3. 通过加班等方式弥补工期的缺失

你做前端有多少时间花在写 css 上

原文：https://q.shanyue.tech/open/open/340.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 340(opens new window)

Author

回答者: Innocentw(opens new window)

非常多

如果说是开发阶段，我会用 20%-30% 的时间写 CSS。

比你想象的时间更少？

1. 我们开发的是一套内部的管理系统。
2. 其中一个原因是在 UI 设计时遵循了 element-ui 的规范，而开发使用的 UI 框架为 element-ui，因此大多数的界面并不需要写大量的 CSS，因为预设样式已足够使用。
3. 另外一个不得不提的原因是，针对业务场景，我们开发了一批公共组件，剩余的开发部分只需要对组件进行排列组合即可。
4. 最后是，我们的系统对动效的要求不高，不需要花费大量时间去调整动效。

你有没有造过轮子

原文：https://q.shanyue.tech/open/open/387.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 387(opens new window)

你最近学习了哪些新技术

原文：https://q.shanyue.tech/open/open/388.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 388(opens new window)

Author

回答者: shfshanyue(opens new window)

20200804

今天看到了 tailwindcss，感觉贼好用，很喜欢。基本上是 class 即 style，相比 css modules，style-jsx，可以说是更高层的抽象。虽然从 bootstrap 既可以看到这种雏形，但是 tailwindcss 做的更彻底，与现代框架集成的也更好

https://tailwindcss.com/docs/installation/(opens new window)

20200805

next.js 最近升级到了 v9.5.0，已正式支持了 custom-routes 的配置文件写法，详情可以参考文档 Next.js rewrites(opens new window)。而在以前，只能在 server.js 中使用 koa/express 进行路由拦截来达成目的。

有时原理虽说比较重要，但此时往往忽略了 API Design 的重要性，假设你要设计一个 Route 的 rewrite/redirect，你会怎么设计 API？可以参考 nginx、koa-routes、react-routes 等

由于 next.js 升级，因为也升级了我的 next app 的模板: https://github.com/shfshanyue/next-app(opens new window)

https://github.com/vercel/next.js/releases/tag/v9.5.0(opens new window)

作为 TL 如何管理团队

原文：https://q.shanyue.tech/open/open/400.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 400(opens new window)

你最近看的三本书是什么

原文：https://q.shanyue.tech/open/open/417.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 417(opens new window)

Author

回答者: Asarua(opens new window)

1. 鸟哥的 linux 私房菜
2. node.js 来一打 c++扩展
3. 深入理解 Typescript

Author

回答者: shfshanyue(opens new window)

@Asarua 第二本书感觉怎么样

Author

回答者: Asarua(opens new window)

@Asarua 第二本书感觉怎么样

emm，说实话，我不咋会 c++，看到第四章开始就看不太明白了，但是光前三章的还是很不错的

你最喜欢的三个 js 库是什么

原文：https://q.shanyue.tech/open/open/488.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 488(opens new window)

Author

回答者: shfshanyue(opens new window)

这三个库是我喜欢也用的相当多的库，如果是自己的项目基本上都用了:

1. next(opens new window)
2. swr(opens new window)
3. graphql(opens new window)

此外，npm.devtool(opens new window) 中收集了最流行的 1000 个库，可以去瞧瞧

next

Vercel 出品

The React Framework for Production.

好用！一点基于它的 SSR，一点基于它的开箱即用。

1. SSR，如果你想提高你的前端水平，那就使用 Next 做一个同构的项目吧，其中遇到的问题比纯客户端渲染更有挑战力，更加棘手。严格来说这是一个需要部署在服务器上的服务器项目，你需要对服务器端开始了解，可能遇到内存爆掉，需要记录服务器日志，需要 Metric 监控内存、CPU 等，需要报警等。而这些在平常的前端项目接触不到。同构要求一份代码既能在 Node 环境中运行，又能在浏览器中运行，其中也会遇到一些问题，比如一个库客户端可以加载服务端不行，或者相反。或者一个疏忽让客户端打包了一个特别大的包(其实仅仅服务端需要)，造成页面加载过慢。
2. 开箱即用，内置路由、ts 支持、webpack 配置等等。即使你想扩展你的 webpack 配置，仅仅需要在 next.config.js 添加几行代码。而不像 create-react-app 基本上都要 eject，从而需要管理许多配置

swr

const { data: projects, error } = useSWR("/api/projects"); 

或者一个可选的库: React-Query。

同样也是 Vercel 出品

最大的好处就是通过 hooks 形式加载数据，简单方便。与 React-Query 相比，个人感觉:

1. react-query 对于 mutation 可使用 hooks，支持更多选项 (如 keepPreviousData)，功能更多，更适合 API 复杂的项目
2. swr 相对轻量，可随处使用，不像 react-query 需要在父组件设置 Provider 等，只有读请求的小项目可以用 swr

graphql

GraphQL，按需请求数据。可以简单对接数据库、第三方服务，并扔到客户端，由于面向字段(field)，所以更容易针对字段进行缓存。

同时也更有利于客户端，graphql 的强类型很容易通过 AST 转化为 types，因此客户端请求数据时的 ts 可以根据 query 自动生成。

现在，Github 最新的 API 也是 graphql 形式的

Author

回答者: illumi520(opens new window)

lodash 封装了很多有用的库 axios 体积小，比原生好用太多 react-query 通过 hooks 封装，把请求还做了缓存

列举 Number、String、Array、Object、Promise 有哪些 API

原文：https://q.shanyue.tech/open/open/636.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 636(opens new window)

Author

回答者: shfshanyue(opens new window)

Number

• Number.isNaN()
• Number.isInteger()
• Number.isInfinite()
• Number.isSafeInteger()
• Number.prototype.toFixed()

String

• String.fromCharCode()
• String.raw()
• String.prototype.charAt()
• String.prototype.charCodeAt()
• String.prototype.concat()
• String.prototype.startsWith()
• String.prototype.endsWith()
• String.prototype.includes()
• String.prototype.indexOf()
• String.prototype.lastIndexOf()
• String.prototype.charAt()
• String.prototype.charCodeAt()
• String.prototype.trim()
  • 如何手写实现 trim
• String.prototype.trimStart()
• String.prototype.trimEnd()
• String.prototype.repeat()
• String.prototype.replace()
• String.prototype.slice()
• String.prototype.split()
• String.prototype.substring()
• String.prototype.padStart()
• String.prototype.padEnd()
• String.prototype.search()
• String.prototype.match()
• String.prototype.toLowerCase()
• String.prototype.toUpperCase()

Array

• Array.isArray()
• Array.from()
  • 如何生成 [0, 1, 2, ..., 99] 的数组
• Array.of()
• Array.prototype.slice()
• Array.prototype.splice()
• Array.prototype.sort()
• Array.prototype.reverse()
• Array.prototype.indexOf
• Array.prototype.lastIndexOf()
• Array.prototype.includes()
• Array.prototype.push()
• Array.prototype.pop()
• Array.prototype.shift()
• Array.prototype.unshift()
  • 如何给数组首项添加元素
• Array.prototype.map()
• Array.prototype.reduce()
• Array.prototype.forEach()
• Array.prototype.filter()
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.flat()
• Array.prototype.flatMap()
• Array.prototype.toString()

Object

• Object.create()
• Object.assign()
• Object.defineProperties()
• Object.defineProperty()
• Object.keys()
• Object.values()
• Object.entries()
• Object.fromEntries()
• Object.is()

你们项目中使用了哪些依赖/第三方库

原文：https://q.shanyue.tech/open/open/654.html

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 654(opens new window)

Author

回答者: Mikerui(opens new window)

lodash axios echarts file-saver patch-package qs sortablejs vue-clipboard2 xlsx watermark-dom

---

我们一直在努力

apachecn/AiLearning

---