胡哥面试视频手录
admin
2024-01-25 10:14:31

胡哥面试视频手录

    • 胡哥面试手录
      • 1. 如何提高工作效率？
      • 2. 面试的时候怎么自我介绍比较好？
      • 3. 面试官问：“你还有什么想问的吗？”，这个时候该怎么回答？
      • 4. 面试的简历，应该从这五大方面去写：
      • 5. 你的近期和长期的职业规划是怎样的？
      • 6. 前端工作中该如何与同事相处、沟通？
      • 7. 面试官问，入职之后将如何开展工作，应该怎么回答？
      • 8. 面试官：对于加班你怎么看？
      • 9. 请描述一下，你以前公司的开发流程是怎么样的？
      • 10. Web 前端岗位工资的基本构成和发放。
      • 11. 公司面临一些问题，我们该何去何从？
      • 12. 前端找工作，被公司工资压价怎么办？
      • 13. async 和 await 的区别
        • 1. 区别
        • 2. 优点
        • 3. 补充
      • 14. 打包之后 dist 目录过大，该如何解决
      • 15. 接口安全该如何回答
        • aes加密工具：crypto.js 对称加密
        • rsa加密工具：jsencrypt 算法
        • 对称加密与非对称加密的区别是什么
      • 16. keep-alive
      • 17. vuex 如何回答？
      • 18. 防抖节流
      • 19. 时间复杂度和空间复杂度(非胡哥)
      • 20. webpack的工作原理(打包原理)
        • webpack的核心概念(天禹＋熊键)
      • 21. 数组扁平化算法
      • 22. setTimeout时间为0_，程序发生了什么？
      • 23. setTimeout时间误差的解决办法
      • 24. js面向对象的相关总结
        • es5：
        • es6：
      • 25. 高阶函数
      • 26. 浏览器引擎Chrome(v8)
      • 27. 浏览器是如何渲染页面的
      • 28. js程序的执行顺序是怎样的？
      • 29. vue-loader的作用
      • 30. node可以通过哪些方法可以防止程序奔溃
      • 31. http 和 https的区别
      • 32. XSS攻击是什么？如何避免？
      • 33. csrf 攻击(非胡哥)
      • 34. css hack
      • 35. src和href的区别
      • 36. link和@import的区别？(非胡哥)
      • 37. 胡哥快排
      • 38. 边界塌陷(外边距重合)
      • 未完待续。。。

胡哥面试手录

1. 如何提高工作效率？

我是做前端工作的，我会把工作分为三个部分。

比如说：项目前、项目中期和项目后期。

  1. 在项目前期，我们作为前端一定要和 UI 和产品经理进行深度的沟通，争取把每一个需求都弄明白。这样做的好处是避免了咱们后边分工。分工其实是最大的成本的浪费。
  2. 项目中期，在项目开始的时候，不仅仅是个人编写的现有的代码，我们需要把以前的工具包、插件、组件等等跟工作相关的一系列常用的东西都收集好，这样在工作中效率就会提高很多。在工作中，先做重要的工作，再做次要的工作，先实现功能，再进行优化，可以避免期限到了功能还没有实现的局面。
  3. 在项目后期，最重要的是项目的维护，以及项目 bug 的修改。在这个过程当中，如果咱们前期和中期弄得不错，沟通得好、解决得好，那么其实到了项目后期，bug 的出现会明显的降低。即使产生了，解决速度也会变快。后期一定要和后台人员进行充分的沟通，把项目争取用最短的时间部署到咱们的服务器上。

这样的话，我们在前、中、后期三个节点上面的效率就会得到最大的提升。

2. 面试的时候怎么自我介绍比较好？

注：你做自我介绍的时候，兴趣爱好、学历啥的简历上都有，不用拿来介绍。

我叫xxx，我掌握的技能有哪些？如：H5、C3、js、element-plus、node、vue等等。

在工作中我的打包工具用的是什么？如：webpack、vite。

我的版本控制工具(分布式)用的是什么？如：git

说完这些之后，最好加一些，在以前的工作当中，我们前端经常遇到的是什么问题？比如说接口安全的问题、常见的一些攻击的问题、适配的问题等等。

3. 面试官问：“你还有什么想问的吗？”，这个时候该怎么回答？

在这个时候，对于成熟的前端人员来说的话，想问的相对来说多一些：

  1. 咱们公司除了工资以外，还有没有什么补助？
  2. 公司节假日是怎么安排的？
  3. 考勤是怎么计算的？
  4. 五险一金是怎么来计算的？
  5. 咱们公司大概有多少技术部的同事在一起工作？

4. 面试的简历，应该从这五大方面去写：

  1. 个人信息：以简洁明了为主。姓名、学历、毕业院校、电话、邮箱，不要超过6项。

  2. 专业技能：以充实为主。把会的技能多写上一些。

  3. 过往的经历：过往的公司和时间要搭配，不要有空窗。

  4. 项目介绍：一到两年(包装2-3个项目)、三年(3-4个项目)。你工作3年就只有这3个项目吗？回答：我放到简历上的项目，是我认为比较好的，其实其他的一些小的项目，有一些雷同的地方，我没有往上写，所以从中挑选了基本较好的项目。

    注意点：

    1. 一定要有前缀，比如说：京东商城项目。
    2. 针对人群，客户群是什么？
    3. 开发项目的周期？(四个月？五个月？)
    4. 项目中用到的技术栈有哪些？(vue？三个项目可以都用vue，不是三个项目一定要选择三个不同的技术栈)
    5. 写完以上四点内容之后，底下要写150字-200字的项目总述。
    6. 最后，再把你项目中的各个模块，或者你做了哪些模块，你的岗位职责是什么什么样的，你做的模块实现了什么功能？等等这些东西你要写进去。

  5. 自我评价：本人比较善于沟通，团队协作能力比较强，能够完成领导交待前端相关的工作任务。

5. 你的近期和长期的职业规划是怎样的？

注意：聊的时候，一定不要跟人家谈年限，最近两年要干什么。。。

回答：我作为一个前端来说，我近期的职业规划是把咱们公司的项目做好，另外呢，学无止境，把我的技术得以提升。多学一些组件、插件，多学一到两款框架。

对于中长期的规划来说的话，我打算呢将来我再研究一门后台语言，比如说像Java、PHP、Python这些我研究一门，争取研究一门之后，可以更加方便咱们前端跟后端去沟通，为咱们公司更好的去服务。另外呢，我也相信，咱们公司有合理的晋升机制和制度。所以呢，如果将来公司有这样的机会，这种机会放在我跟前，我也是会毛遂自荐，服务好公司。

这就是我近期、中期和长期的一个职业规划。

6. 前端工作中该如何与同事相处、沟通？

  1. 如果工作中遇到问题了，需要和 UI、后台人员去沟通，那么注意了，如果人间帮助你解决了问题了，那你无论如何下班要请人家吃顿饭，而且马上就得兑现，俗话说：“报恩不隔夜”。
  2. 如果是在平时，UI 那小伙子跟我关系不错，后台某个小帅哥跟你关系也不错，平时怎么和人家沟通呢？尽量组织或者参与一些这样同事之间的社交活动，以加深同事之间的友谊。

7. 面试官问，入职之后将如何开展工作，应该怎么回答？

  1. 如果公司录用我了，我将会带着我以前的技术和经验，把这些东西带到咱们的项目中，让咱们的项目更好，更人性化。

  2. 我会快速的掌握咱们现在所写的项目。包括它的路由是怎么架构的，接口的请求是怎么来处理的，还有它里面的一些难点重点的技术，我以前有没有处理过。
    这些都是我们前端人员在刚入职的时候要做的事情。以避免后边在开展工作中遇到这些问题，再去处理就比较难处理了。

  3. 要考虑我是不是需要后台或者其他的技术人员去配合，这个也要有一个正确的评估。为啥要评估这个呢？如果问题到了跟前再去跟后台沟通，这样的话，很可能会打乱后台的工作计划。

进入公司以后，我打算基于以上三个方面开展工作。

8. 面试官：对于加班你怎么看？

注意点：

  1. 咱们互联网 IT 公司加班是一种常态，包括有些公司执行的996或者大小周。
  2. 咱们国家在 IT 行业，一般来说所有人加班基本上都是免费的。可能在一些少数的一些大公司中加班是有加班费的。

回答：

我可以接受加班，不管是自己的原因还是其他的一些什么原因，都是可以免费接受的。

9. 请描述一下，你以前公司的开发流程是怎么样的？

在我们公司以前技术部分这么几个角色：

产品经理、UI、前端人员、后台(后台是一个统称：Java、PHP、Android、iOS都是在写后台的业务逻辑)，以上这些角色去进行项目开发。

前端在项目中的地位和工作流程：

产品经理： 当一个项目进来，最先跟这个项目客户去接触的一般是产品经理，产品经理的作用是：和客户进行聊天，聊天的过程中，他会做一个产品需求文档(说白了，就是客户想要什么？)，在这里面有一个重要的职责，有时候客户很盲目，他不知道自己的需求到底是什么(比如说他想做一个卖菜的网站，他可能不知道什么是APP，但是他们会使用)，这个时候产品经理要做的就是正确引导客户需求。然后，产品经理需要把这些需求跟UI、前端等技术人员去讲明白。

UI： 出了需求文档之后，产品经理会把文档给到UI、前端、后台各一份。UI 把需求文档做成原型图(黑白的，像黑白照片)和设计图，UI在整个工期里面大概要占到三分之一。当设计稿出来后，同时交给前端和后台，因为基本上前端和后端干活是并行的。

前端： 开始根据页面去制作各种各样的效果。或者是DIA(diagram 图表)或者是小程序。在这个过程中后台也在干活。

后台： 后台就要开发它对应的数据管理部分。除此之外，后台还需要去做 API 接口的东西，这个接口是为前端去开发的。

等到前端的页面布局完了，后台的接口也写完了，剩下的就是前端去渲染数据，调用接口里面相对应的数据就可以了。这些完了之后，就是一个测试阶段。

测试阶段： 测试阶段是 UI、前端、后台都需要参与的，如果有专业的测试，他们的工作量就稍微会少一点。都参与可以保证出现问题可以及时得到处理。

部署： 测试完成之后，再把这个项目部署到客户的服务器上去。

基本上整个工作流程就是这样子的。

10. Web 前端岗位工资的基本构成和发放。

如：10k为例，我上家公司是这样发放的：

  1. 基本工资：5000

  2. 岗位工资：如前端 3000

  3. 绩效工资：2000左右(总工资的15%-20% )

    绩效工资是一个考核标准，干得好才有，你负责的部分出了问题会扣一部分或者扣除全部。

  4. 补贴补助：1000以内(话补、餐补、车补等等)。

  5. 社保公积金：一般情况下公积金+社保占 10%左右。

  6. 扣税：5000以上需要交税

真正到手的大概是九千左右的一个范围

11. 公司面临一些问题，我们该何去何从？

  1. 如果这个时候我走了，我会得到什么，我会失去什么？

    我得到了：我得到的肯定是一份新工作，需要吃饭穿衣嘛这个很正常。

    我失去了：我会失去老板和领导对我的信任，俗话说：“患难见真情”，如果我跟他们共渡难关，在工作中共同努力克服了困难，挺过这一关，那我在这个公司的价值会大大提升。而且我的口碑也会好很多。

  2. 每一个员工应该各司其职，尽职尽责把自己的工作做好，做好之后，才能够让公司踏踏实实，放心去解决问题。当然在自己的事情完成得很好的情况下，在力所能及的范围之内去帮助其他的同事。如果一个团队、一个公司的人都有这样的想法，我觉得老板和领导一定会想尽办法去解决公司的困难。

12. 前端找工作，被公司工资压价怎么办？

注：我说15000，HR压榨成9000

做两手准备：

这个时候跟 HR 去较劲，很大概率是会谈崩的。

  1. 回复HR：行，咱们公司既然觉得我是值这个价，那肯定是没有问题的，我也相信我进入公司之后，我会用技术去把咱们的项目做得更好，这个时候我相信公司也会给我涨工资的。
  2. 如果入职了，继续观望市场，如果有更好的机会摆在面前，立马跳槽。

13. async 和 await 的区别

1. 区别

Async：

async 用来定义函数的，异步函数，打印函数名会得到一个promise对象。可以使用函数名称来调用.then方法，如：函数名称.then

async 内部实现，有返回值。其实是内部调用了 promise.resolve()，然后把它转换成一个promise对象。如果出错的话，调用的是promise.reject()。它用catch捕获了一下

Await：

await 理论上来说后面可以跟任意的表达式。但是一般是跟promise的表达式

async function add() {const res = await 123console.log(res) // 123return res
}
console.log(add()) // 成功的promise，值是123

await 等待后边的promise对象执行完毕，拿到了promise.resolve()的返回值之后，在往后继续去执行后边的代码，所以await有一个等待的意思。

await关键字只能写在async的函数里。

await 后边的表达式可能是失败的，await 只能拿到成功的结果，如果失败会向浏览器控制台抛出错误。所以建议把await的代码放到try…catch语句中捕获错误会比较好。

async function test() {const res = await Promise.reject(123)return res
}
console.log(test()) // Uncaught (in promise) 123

async function test() {try {const res = await Promise.reject(123)} catch (error) {console.log('error', error) // 2. error 123}
}
console.log(test())
console.log(111) // 1. 111

2. 优点

  • async和await属于ES2016(ES7)的语法。
  • async和await是异步执行的，但是写代码的时候是同步的
  • async和await方式更容易让开发人员维护

3. 补充

promise 和 async await 区别：

  • promise 属于es6的语法，promise是链式调用的
  • promise中包含了catch，而async和await是在函数内自己定义catch
  • promise 提供方法要多一些。如：all, race, any, finally(原型方法), then(原型方法), catch(原型方法)

​

14. 打包之后 dist 目录过大，该如何解决

命令：npm run build

需要在vue.config.js中配置 entry, output

处理方案：

  1. 打包后，会在dist下生成.map文件，那么这个文件其实是不必要的

    解决：在vue.config.js中配置文件中：productionSourceMap: false。这样就不会生成.map文件了。

  2. 使用组件和路由懒加载

    组件和路由懒加载是按需加载的，这样会降低一些文件的大小。

  3. 对于文件和图片，最好压缩一下。可以使用这个组件(此组件需要安装)：compression-webpack-plugin

    1. 导入组件：compression-webpack-plugin

    2. 配置：

      • 最小化代码配置 minisize(true)
      • 分割代码 splitChunks
      • 超过限定值的文件进行压缩 threshold: 文件大小(字节为单位)

15. 接口安全该如何回答

安全问题是一个很宽泛的问题，如：xss和csrf攻击等等。

这里主要谈论的是接口的安全问题。

接口安全：防止传输过程中，数据被抓包。我们会在数据传输的时候(前台传给后台，后台传给前台)进行加密和解密。

常用的加密算法：

aes rsa SHA1 SHA256 md5 … 有很多的算法

胡哥用过的有 aes rsa

aes加密工具：crypto.js 对称加密

aes加密工具的使用：

  1. 安装：npm i crypto-js –save -dev

  2. 在utils工具文件夹下创建crypto.js文件

  3. crypto.js中写入

    import cryptojs from 'crypto-js'
export default {encrypto(str) { // 加密// 生成秘钥// 秘钥是前端和后端都知道的，但是网络上是不知道的，所以他们截取去了也没有用。比如说我们前端生成秘钥是11111，那么后端也要用11111去解密let key = crytojs.enc.utf8.parse('11111') // 生成偏移量 --- 一般都是传进来的字符串// 生成偏移量作用：如果字符串内容长度不够，会自动补齐let srcs = cryptojs.enc.utf8.parse(str)// 加密 --- 参数：偏移量，秘钥，配置加密的参数let encrypted = cryptojs.AES.encrypt(str,key,{mode: cryptojs.mode.ECB, // 加密模式// ECB 表示等量加密，就是说长度跟你的str相同padding: crytojs.pad.pkcs7 // 加密、解密的标准})return encrypted.toString()},decrypto(str) { // 解密let key = crytojs.enc.utf8.parse('11111') // 解密不需要偏移量// 加密 --- 参数：偏移量，秘钥，配置加密的参数let decrypted = cryptojs.AES.decrypt(str,key,{mode: cryptojs.mode.ECB, // 加密模式// ECB 表示等量加密，就是说长度跟你的str相同padding: crytojs.pad.pkcs7 // 加密、解密的标准})return decrypted.toString()}
}

    注意：

    1. 前端不论加密还是解密都是padding: crytojs.pad.pkcs7，而后端是padding: crytojs.pad.pkcs5
    2. 秘钥长度是8的整数倍(8 的倍数)
    3. 秘钥前后端统一
    4. 详细使用步骤看这个文档，步骤不多

rsa加密工具：jsencrypt 算法

jsencrypt 算法是一种非对称加密算法，它得生成一对秘钥，即公钥和私钥。前后端一样的，加密的时候使用公钥，解密的时候使用私钥。

长度可以能是1024也可能是2048。已知破解的密码长度为：768位。

rsa加密工具的使用：

  1. 安装：npm i jsencrypt

  2. 在utils工具文件夹下创建jsencrypt.js文件

  3. jsencrypt.js文件中写入：

    这里是生成公钥 - 加密

    function enjsencrypt(str) {var jsObj = new jsencrypt()var pubkey = ""jsObj.setPublicKey(pubkey)return jsObj.encrypt(str)
}

    这里是生成私钥 - 解密

    function denjsencrypt(str) {var jsObj = new jsencrypt()var prikey = ""jsObj.setPublicKey(prikey)return jsObj.dencrypt(str)
}

  4. 详解博客地址

对称加密与非对称加密的区别是什么

  1. 对称加密中加密和解密使用的秘钥是同一个；非对称加密中采用两个密钥，一般使用公钥进行加密，私钥进行解密。
  2. 对称加密解密的速度比较快，非对称加密和解密花费的时间长、速度相对较慢。
  3. 对称加密的安全性相对较低，非对称加密的安全性较高。

16. keep-alive

keep-alive 组件缓存，刷新的时候保持状态。

keep-alive 缓存组件，避免组件内的数据重复渲染，直接可以在页面中调用。

注意看描述：我有一个导航栏，一级导航栏新闻、房产两个。二级导航栏，新闻下有体育、财经。我给整个一级导航栏新闻做了组件缓存。如：。

问题：我先点击新闻，然后点击体育，我再点击房产。当我点击新闻的时候，我希望它能回到上一次的状态体育。但是它不会。直接停留到新闻页面了。

需求：点击新闻–》点击体育–》点击社会–》回到新闻下的体育页面

解决：

当点击新闻的时候，有两个方法会触发：activated 和 deactivated

在新闻组件中写:

let url;
beforeRouteLeave() {url = this.$route.path
}
activated() {this.$router.push(url)
}

胡哥当前视频地址

17. vuex 如何回答？

vuex存放数据的状态

需要安装：npm i vuex

state 公共数据 组件中this.$store.state.变量名

mutations 同步方法 更新state中的数据

actions 异步方法，组件通过this.$store.dispatch(‘方法名’， 参数)

getters 读取state中的数据

commit 状态提交，对mutation进行提交

vuex页面刷新，数据会重置。这里涉及到持久化的问题

解决：

  1. 把vuex中的数据放到localStorage中

  2. 插件vuex-persistedstate 这个插件需要安装，然后在vuex中添加配置。

    plugins: [createPersistedState({storage: window.sessionStorage
})]

    persistedstate 本质是使用了localStorage

18. 防抖节流

返回顶部：到达一定距离才会出现。

监听浏览器的滚动时间，返回当前滚动条与顶部的距离。

里面的内容足够多，让其有滚动条出现

  • 节流

    个人感觉这里用节流会更好(沛华的代码)

    原理：在一定时间内只执行一次，降低触发频率

    实现：闭包

    里面的内容足够多，让其有滚动条出现