快刷每日面经😋

前言

看今年行情前端似乎有点回暖了，各位友友趁着春招好好在提升一下，看下八股,练下算法，看看面经，拿下自己满意度offer。

1.浏览器是怎么把页面熏染出来的

1.首先浏览器会解析HTML文件并构建DOM树
2.同时浏览器也会加载并解析css文件，CSS 会根据选择器规则应用样式，这个过程生成一个 CSSOM 树
3.当DOM树和CSSOM树都解析完成之后，浏览器会将它们合并成为Render树
4.然后浏览器会根据Render树进行重绘和重排，将元素的位置大小和效果渲染在页面上。
5.最后，浏览器将所有绘制和合成的内容渲染到屏幕上。

2.css动画和js动画的区别

1.实现方式的不同

css动画:css动画一般通过transform或者@keyframes实现，其是由浏览器的渲染引擎控制的，动画的执行和优化通常由浏览器自动处理。

js动画：使用 JavaScript 来手动控制动画的执行。可以通过 requestAnimationFrame、setInterval 或 setTimeout 等方法来更新元素的样式。js动画可以精细控制每一帧，但需要自己手动管理动画的时间和间隔，结束条件等。
2.性能

css动画：css动画一般更高效，因为其是由浏览器引擎渲染的，可以使用GPU进行加速提高性能。 js动画：性能较差，特别是在复杂动画或频繁更新元素样式时。JS动画会阻塞主线程，可能会影响页面的响应速度。
3.试用场景

css动画：适用于简单，重复的动画，例如按钮的悬停效果、元素的淡入淡出、页面过渡动画、旋转等。

js动画：适合复杂、动态或用户交互密集的动画，例如拖拽动画、基于数据变化的动画、时间轴控制的动画。

3.在浏览器加载页面的过程中有什么方法可以加快加载速度

1. 减少HTTP请求
- 每个静态资源都会在渲染的时候都会发送一次http请求，所有我们可以尽可能的将静态资源放在一个文件中来减少http请求
- 使用SVG：图形使用矢量图（SVG）代替位图（如 PNG、JPG）可以减少图片请求并提高可扩展性。
1. 压缩和优化资源
- 压缩js和css文件，减少文件体积
1. 使用懒加载和延迟加载
- 懒加载图片和视频：图片和视频可以在用户滚动到它们所在的位置时才加载，避免一开始就加载所有资源。
- 异步加载 JavaScript ：通过 async 或 defer 属性来异步加载 JavaScript 文件，避免阻塞页面渲染。async 会在文件加载完后立即执行，而 defer 会在文档解析完成后执行。
1. 利用浏览器缓存
- 利用浏览器缓存可以避免用户每次访问时都重新加载所有资源，从而加速页面加载。
1. 减少重绘重排
- 浏览器会在页面渲染过程中进行布局（reflow）和绘制（repaint）。频繁的重排和重绘会导致性能下降。
- 减少对dom操作
1. 减少重定向

4.vue如何实现懒加载

1. 组件懒加载
- 使用import()动态导入组件

ini 复制代码

   const MyComponent = () => import('./components/MyComponent.vue');

1. 图片懒加载
- 使用 Vue 插件vue-lazyload实现图片懒加载

javascript 复制代码

npm install vue-lazyload --save//安装vue-lazyload
//使用vue-lazyload
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload, {
 preLoad: 1.3, // 图片预加载的比例
 error: 'path/to/error-image.jpg', // 图片加载失败时显示的图片
 loading: 'path/to/loading-image.jpg', // 图片加载时显示的占位图片
 attempt: 1 // 尝试加载次数
});
//组件中使用懒加载图片
<template>
 <div>
   <img v-lazy="'/path/to/image.jpg'" alt="Lazy Loaded Image"/>
 </div>
</template>

5.说一下浏览器的缓存机制

浏览器的缓存机制是指浏览器在加载网页时，将网页中的静态资源保存到本地，以便在下次访问同一个资源时能够直接从本地读取，而不是重新从服务器加载。这样可以显著提高页面加载速度，减少带宽消耗，并减轻服务器的负担，其主要依赖于 HTTP 缓存（通过 HTTP 头部字段控制）和本地存储。

1. 缓存的类型
- 强缓存：表示浏览器会直接使用缓存中的资源，而不去请求服务器。这是最快的缓存方式，因为浏览器不会向服务器发起任何请求。
- 协商缓存：当缓存资源过期或浏览器找不到强缓存时，浏览器会向服务器发起请求，判断缓存是否有效。如果缓存有效，服务器返回 304 状态码，表示可以继续使用本地缓存。如果缓存无效，服务器返回新的资源。
1. 缓存的工作流程
- 首次请求： 浏览器向服务器发起请求，服务器返回资源并设置缓存头（Cache-Control、Expires、ETag 等）。
- 缓存存在且有效： 浏览器根据缓存头（如 max-age、Expires）决定是否使用缓存。如果缓存有效，浏览器直接从本地读取资源，不再请求服务器。
- 缓存过期或无缓存： 如果缓存过期或没有缓存，浏览器会向服务器发起请求。如果使用协商缓存，浏览器会带上 If-Modified-Since 或 If-None-Match 头进行资源验证。
- 资源验证：
  
  如果资源未修改，服务器返回 304 状态码，表示浏览器可以继续使用缓存。
  
  如果资源已修改，服务器返回新的资源，并更新缓存。

流式输出实现原理

流式输出 是一种常见的处理大规模数据的方式，它允许在数据还没有完全准备好时就开始逐步输出，避免了等待所有数据处理完成后再进行输出的延迟。

实现原理：流式输出的核心思想是将数据划分为数据块，逐步传输和输出。
实现步骤：
- 1. 分块读取或读取数据：将大数据分成多个小的块，逐块进行处理和输出。
- 1. 逐步处理并输出：一旦某一部分数据处理完毕，就可以立即进行输出，无需等待整个数据集处理完成。
- 1. 实时输出：流式输出允许在数据的处理过程中逐渐呈现结果，而不需要等待所有数据加载完毕。

ai相关的问题

面试官现在都比较关注你有没有玩过ai,在项目中有没有运用到ai大模型，对prompt了解多少！就比如在面试中让我介绍一下prompt engineering

prompt engineering:是指帮助语言模型设计优化输入提示，让大模型回答更准确，相关的问题，减少错误提高效率。

在引导模型的时候我们可以给定其一个角色，明确的提示，提供上下文，多步引导等技巧来使模型达到我们预想的结果。

总结

可能在面试的时候有些问题我们并不知道，甚至都没有听过！但是不要慌，可以向面试官要点提示，在根据自己知道的能讲多少就讲多少，面试其实是一个多方面的考察。我们可以多讲一些自己对ai的看法与学习，可以讲一下自己最近在研究的新技术等，尽量展示出自己的闪光点！