面了70分钟，居然还是挂了，再一次心碎

金色的暴发户
819 阅读7分钟

前言

前两天面了广州的一家公司，当时面试的时候感觉自我良好，问的问题也基本上都答上来了，最起码80%以上都是会的，然后最后一道算法题也做出来了，一共面了差不多70分钟，按理说撑过死亡30分钟应该就有戏了，撑过一个小时那绝对妥妥的有戏了，昨天居然通知我面试挂了，头上顶着一个大大的问号！！！
心情和我上一段面试如出一辙，身体和心灵上的双重打击，面碎了。10分钟不到就挂了——被面试官怼的哑口无言

20170619104625_SCuWR.jpg

vue的生命周期

Vue 的生命周期和钩子函数是 Vue 框架中的重要概念。生命周期描述了组件从创建到销毁的过程，而钩子函数则是在生命周期的不同阶段提供的可自定义的函数。

1. 创建阶段：

  •  beforeCreate ：组件实例创建之前执行。
  •  created ：组件实例创建完成后执行。

2. 挂载阶段：

  •  beforeMount ：组件挂载到 DOM 之前执行。
  •  mounted ：组件挂载到 DOM 完成后执行。

3. 更新阶段：

  •  beforeUpdate ：组件数据更新之前执行。
  •  updated ：组件数据更新完成后执行。

4. 销毁阶段：

  •  beforeDestroy ：组件销毁之前执行。
  •  destroyed ：组件销毁完成后执行。

前端性能优化

这个问题在面试前一点都没了解过，我就凭着感觉随便说了点，可以使用图片懒加载和路由懒加载按需引入，这样可以减轻页面加载的负担，然后还说了一个合理使用前端缓存，把一些静态资源的副本保存在本地，这样浏览器下次再访问该资源时就可以直接从本地获取，不用每次都去服务器下载，这样也可以减少前端的性能开销，虽然没有答全，但是自我感觉还是答了点东西的。

常见的方法

  • 1. 压缩和合并资源：压缩图像、JavaScript、CSS 文件，减少文件大小，并将多个文件合并成一个，减少 HTTP 请求次数。
  • 2. 图片优化：使用合适的图片格式（如 JPEG 或 PNG），根据需要进行图片压缩，并且可以使用懒加载或图片雪碧图技术。
  • 3. 缓存策略：利用浏览器缓存，设置合适的缓存头，减少重复请求。
  • 4. 代码压缩和混淆：压缩 JavaScript 和 CSS 代码，去除不必要的空格和注释，并且可以混淆代码以增加保密性。
  • 5. 按需加载：将页面内容分割成模块，按需加载，避免一次性加载所有资源。
  • 6. 减少 DOM 操作：尽量减少 DOM 的操作次数，例如使用事件委托来减少元素的绑定。
  • 7. 使用 CDN：利用内容分发网络（CDN）来加速静态资源的加载。
  • 8. 优化服务器响应时间：优化服务器配置，使用 Gzip 压缩等技术来提高服务器的响应速度。
  • 9. 性能监测和分析：使用工具如 Google PageSpeed Insights、Lighthouse 等进行性能监测和分析，发现问题并进行优化。

前端缓存

因为上个问题我提到了前端缓存和localStorage，所以下一道题就问我这个了，除了cookie当时说没了解过，其它的都回答出来了。

  • 浏览器缓存：浏览器缓存是指浏览器在本地保存一些静态资源的副本，以便在下次访问相同资源时可以直接从本地获取，而不需要再次从服务器下载。浏览器缓存主要包括以下几种类型：

    • 强缓存：浏览器在请求资源时，会先检查该资源的缓存标识（如 Cache-Control 和 Expires），如果命中强缓存，则直接从缓存中获取资源，不会发送请求到服务器。
    • 协商缓存：如果资源的缓存标识表示资源已经过期（如 Cache-Control 中的 max-age 或者 Last-Modified 和 ETag 等），浏览器会发送请求到服务器，服务器会根据请求头中的条件判断来决定是否返回资源内容，如果返回 304 状态码表示资源未发生改变，浏览器可以使用缓存中的资源。

  • localStorage、sessionStorage和cookie的区别：

    • localStorage：localStorage 存储的数据没有过期时间，除非手动清除，否则会一直保存在浏览器中。
    • sessionStorage：sessionStorage 存储的数据在页面会话结束时被清除，即当页面被关闭时数据也会被清除。
    • cookie：cookie 可设置失效时间，没有设置的话，默认是关闭浏览器后失效

事件委托（事件代理）

这个问题上篇文章也提到了，可以去看看10分钟不到就挂了——被面试官怼的哑口无言

vue2和vue3的区别

这题我只答了一个多了一个组合式API，多了一种setup的语法糖，最大的区别就是这种语法更贴近原生js的写法，性能更好，其它的就没答出来了。

  • 1. 组合式 API：Vue3 引入了组合式 API，允许更灵活地组织和复用代码。
  • 2. 更好的性能：Vue3 在性能方面进行了改进，包括更小的打包大小、更高效的虚拟 DOM 算法等。
  • 3. 响应式系统：Vue3 的响应式系统进行了重构，提供了更清晰的 API 和更好的性能。
  • 4. TypeScript 支持：Vue3 对 TypeScript 的支持更好，提供了更完整的类型定义。
  • 5. Teleport：Vue3 中的 Teleport 组件允许将子组件渲染到父组件之外的 DOM 节点。
  • 6. 更好的 Tree-Shaking：Vue3 支持更有效的 Tree-Shaking，使得在打包时可以排除未使用的代码。

es6新增特性

  • 1. 块级作用域：使用  let  和  const  关键字声明变量，具有块级作用域。
  • 2. 箭头函数：更简洁的函数语法，并且在处理  this  关键字时更加直观。
  • 3. 模板字符串：用于字符串插值的强大功能。
  • 4. 类和类的继承：引入了类的概念，以及类的继承机制。
  • 5. 模块：通过模块系统来组织和管理代码。
  • 6. 迭代器和生成器：提供了迭代和生成值的新方式。
  • 7. 解构赋值：方便地从数组或对象中提取值并赋值给变量。
  • 8. Promise 对象：用于处理异步操作的改进方式。
  • 9. 新增数据类型：如  Map 、 Set  和  WeakMap  等。
  • 10. 模块化编程：支持 CommonJS 和 ES6 模块等多种模块加载方式。

原型链

这个之前的文章里写过，大家可以去看看前端面试必考八股文之——js系列（2

如何实现深拷贝

这个之前的文章里也有，写的也挺详细的，大家可以看看当面试官让你谈谈深浅拷贝，你怎么说？

html5语义化

是什么

HTML 语义化是指在编写 HTML 代码时，使用具有明确语义的标签来描述网页内容，而不仅仅是基于外观或样式。

好处（优点）

  • 提升可访问性：语义化的 HTML 结构有助于辅助技术（如屏幕阅读器）更好地理解网页内容，使用户能够更轻松地访问和使用网页。
  • 增强搜索引擎优化（SEO）：搜索引擎可以更好地理解网页的主题和内容，从而提高搜索结果的相关性和排名。
  • 提高代码可读性：使用具有描述性的标签可以使代码更容易理解和维护，特别是在团队协作环境中。
  • 有利于内容分离：将内容与样式分离，使网页更易于设计和样式定制。
  • 提升跨平台和设备的兼容性：语义化的 HTML 可以更好地适应不同的设备和浏览器，确保网页在各种情况下都能正确显示。

算法

image.png

function output(obj) {
    function quote(key, obj2) {
        for (let item in obj2) {
            if (typeof obj2[item] !== 'object' || obj2[item] == null) {
                console.log(key + '.' + item + ' = ' + obj2[item]);
            }
            else {
                quote(`${key}.${item}`, obj2[item])
            }
        }
    }
    for (let key in obj) {
        if (typeof obj[key] !== 'object' || obj[key] == null) {
            console.log(key + ' = ' + obj[key]);
        } else {
            quote(key, obj[key])
        }
    }
}

image.png

结语

当时问的题目太多了，有好多的没记住，不够基本上都是一些很常见的八股，也不知道是哪里出问题了，害，越战越勇越挫越勇，继续加油吧

avatar
文章
阅读
粉丝