前端面试日记：理想日常

4.15 一面

面试公司：理想

面试岗位：前端

很好，感觉双非选择走日常后前途一片光明（？）

反正暑期也进不去，进去也大概率没法转正，不如去找个日常摸了……

感谢理想的面试官，面试很温柔，说话温声细语，考的也是八股狂欢，手撕也给的非常简单，第一次看到一眼秒的手撕TUT

就是面试时间太折磨了，从来没有面过那么长时间的面试，整整80分钟，面到后面嘴巴冒烟了不说，脑子都CPU过载了，而且一回想就脑子一片空白TUT，甚至精神错乱地说了一堆奇奇怪怪的话后自言自语说“我tm在乱说些啥”。看来菜，还得多练。

老样子，问题来源于面试官，反思来源于我，常见的八股就不放回答了。

1、项目简单拷问

2、盒子模型

3、简述下flex布局，以及它的常见属性。

4、简述下css选择器优先级。

5、css响应式布局实现的几种方案。知道css in js吗？（no， 好像是react的库，这个确实没接触过）

6、语义化标签的作用？

7、script的defer和async属性区别？

8、浏览器的缓存机制。

9、常见的跨域方式。

10、知道SSE吗？

答案：在web端消息推送功能中，由于传统的HTTP协议是由客户端主动发起请求，服务端才会响应。基本的ajax轮询技术便是如此。而在SSE中，浏览发送一个请求给服务端，通过响应头中的Content-Type:text/event-stream等向客户端声名这是一个长连接，发送的是流数据，这样客户端就不会关闭连接，一直等待服务端发送数据。

如果服务器返回的数据中包含了事件标识符，浏览器会记录最后一次接收的事件的标识符。如果与服务器的连接中断，当浏览器再次进行连接时，会通过头来声明最后一次接收的事件的标识符。服务器端可以通过浏览器发送的事件标识符来确定从哪个事件来继续连接

反思：因为确实没怎么接触过后端，所以链条这块基础非常薄弱，看看实习期间强化下。

12、简述ES6的新特性。

13、简述箭头函数和普通函数区别。

14、简述Promise和async/await区别。

15、简述时间循环机制。

16、简述数组的常用函数？知道reduce吗，讲解下使用场景。

17、简单讲一下vue的响应式原理。

18、vue中如何实现路由懒加载？

19、vue中的v-if和v-show的区别？

20、简述vue中的通信方式。

21、vue中如何缓存一个组件？

22、vue中computed和watch使用场景？

23、vue2/3的区别？

24、vue router中hash和history的区别？

25、vue中将模版渲染到dom上，中间经过了哪些步骤？

回答：

反思：这一块确实没准备到，答得不是特别好，回头也多阅读下相关的知识。

26、讲一下虚拟列表的技术实现？（这一块还是讲的有点乱，再理一理）

27、简述下图片懒加载的实现方式（3种以上）。

回答：

1. 基于滚动事件

这是最基础的方式。我们给图片设置一个 data-src 属性，用来存储图片的真实地址。然后监听页面的滚动事件，每次滚动的时候，检查图片是否进入了可视区域。如果进入了，就把 data-src 的值赋给 src，图片就开始加载了。这种方式简单直接，但缺点是滚动事件可能会频繁触发，性能上有点问题，不过可以通过防抖或者节流来优化。

2. 使用 Intersection Observer API

这是现在比较推荐的方式。它是一个浏览器原生的 API，可以用来监听元素是否进入可视区域。我们只需要创建一个 IntersectionObserver 实例，把图片元素传进去，当图片进入可视区域的时候，它会自动触发回调函数，我们在这个函数里加载图片就行。这种方式性能很好，而且代码也很简洁，唯一的缺点是老版本浏览器可能不支持，不过可以用 Polyfill 来解决。

3. 使用第三方库

比如 lazysizes，这是一个很流行的懒加载库。我们只需要在页面上引入这个库，然后给图片加上对应的类名和 data-src 属性，它就会自动帮我们实现懒加载。这种方式的优点是功能很强大，而且兼容性很好，不用自己写太多代码，缺点就是多了一个外部依赖。

反思：只知道第一种，看来以后第三方库也要多学习学习TUT

28、前端的性能优化常见的方式？

29、如何查看web应用的性能？常见的性能指标？

回答：

web应用的性能

（1）浏览器开发者工具（DevTools）：这是最常用的方式。几乎所有现代浏览器（如 Chrome、Firefox、Safari）都内置了开发者工具。

性能面板：可以用来分析页面加载时间、资源加载时间、CPU 使用情况等。

网络面板：可以查看每个资源的加载时间、大小、状态码等。

Lighthouse：这是 Chrome DevTools 内置的一个性能分析工具，可以快速生成性能报告，给出优化建议。

（2）性能监控工具：比如 Google 的 PageSpeed Insights，它可以分析页面性能，并给出优化建议。还有一些第三方工具，比如 WebPageTest，它可以模拟不同网络环境下的页面加载情况。

（3）前端代码分析工具：比如 Webpack Bundle Analyzer，可以分析打包后的资源大小，找出哪些模块占用了过多空间。还有 Source Map Explorer，可以查看代码的打包结构，帮助优化代码。

性能指标

首屏加载时间（First Contentful Paint, FCP）：这是页面上第一个内容（如文字、图片）渲染完成的时间。它反映了用户看到页面内容的等待时间。

最大内容绘制时间（Largest Contentful Paint, LCP）：这是页面上最大内容块（如图片、文本块）渲染完成的时间。它更能反映页面主要内容的加载速度。

总阻塞时间（Total Blocking Time, TBT）：这是页面加载过程中，主线程被阻塞的时间总和。它反映了页面加载时的卡顿情况。

时间到交互（Time to Interactive, TTI）：这是页面完全可交互的时间，即用户可以开始正常使用页面的时间。

反思：我的错，明明写了性能优化却对指标不了解，后面要在这方面多下功夫。

手撕：

1、简单的异步，函数返回闭包， 里面套settimeout等操作，多次执行询问结果。

2、复杂的异步，给出promise, settimeout, async/await等嵌套的函数，分析输出结果。（本来因为前面回答头都晕了，看这个异步头更晕了，甚至漏了某个函数调用，还是被提醒才发现）

3、leetcode 20, 有效括号，easy。但是因为面头晕了竟然出奇奇怪怪的bug（拼写错误， 数组混用等），于是被面试官打断说思路，说了思路没问题后就结束了。

反思：首先就是下午一定睡饱，为此上午一定要睡好，为此前一天晚上一定要早睡，不然面试到中途就会精力不够，脑袋缺氧，人都是胡的。其次就是多准备些性能优化上的事情，多学多练。最后就是也差不多尾声了，可以开始锻炼身体了，不然感觉身体有些吃不消了。