【每日前端面经】2023-02-29

题目来源: 牛客

如何理解前端这个岗位

简单地说就是设计师做好网页效果图，前端将效果图转化成页面，之后交给后端程序员，中间的这段工作就是前端

浏览器如何渲染HTML

将载入的HTML文件解析成DOM树，并且将各个标记标识解析成DOM树的各个节点
将解析成的DOM树和CSS规则树进行关联生成渲染树
进入布局阶段，为DOM树的每个节点分配在屏幕上出现的确切坐标
进入绘制阶段，在这里渲染引擎的工作就结束了，接下来就交给后端对渲染树的每个节点进行绘制，呈现出页面效果

重绘会引起重排么

重绘是指某些元素的外观被改变，重拍是指重新生成布局排列元素。单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重拍之后，将会重新绘制受到此次重排影响的部分。也就是说：重绘不一定导致重排，但重排一定会导致重绘

使用scale属性会引起重绘还是重排

scale只能引起重绘而不是重排，transform的所有属性都不会引起重排

浏览器事件循环

执行同步代码
执行宏任务
将微任务添加到任务队列
宏任务执行完毕后，执行任务队列

图片懒加载

简单来说，就是如果可视区域里面看不到图片，就先不加载图片

addEventListener("scroll", () => {const images = document.querySelectorAll('img');images.forEach(image => {const clientHeight = document.documentElement.clientHeight;const scrollTop = document.documentElement.scrollTop;if (image.offsetTop < clientHeight + scrollTop) {image.setAttribute('src', image.getAttribute('data-src'));}});
});

路由懒加载

当打包构建应用时，JS包会变得非常大，影响页面加载。如果把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了

Vue异步组件
ES6标准import()
webpack的require/ensure

路由鉴权

路由拦截
动态路由

请求拦截器

HandlerInterceptor: 拦截的目标为请求的地址
ClientHttpRequestInterceptor: 拦截的目标为请求的方法
RequestInterceptor: 对RestTemplate的请求进行拦截
AsyncClientHttpRequestInterceptor: Feign拦截器，也就是一个HTTP拦截器

堆栈和队列

堆栈：最后一个放入堆栈中的物体总是最先被拿出来，这个特性通常被称为后进先出
队列：先进入队列中的元素总是最先被拿出来，被称为先进先出

对链表的理解

链表是一种物理存储单元上非连续、非顺序的存储结构，数据元素的逻辑顺序是通过链表中的指针链次序连接的，由一系列结点组成。分为单链表、循环链表、双向链表、双向循环链表等

数组和链表的存储结构

数组的内存空间是连续的，可以通过索引快速访问任意位置的元素，适合于按照顺序存储和快速访问数据的场景
链表的空间可以是不连续的，适合在中间位置插入或删除元素，适合与频繁变动数据集合的场景

数组的长度限制

根据ES5的规范，数组的最大长度由一个无符号32位整数绑定，因此最长的数组由 $2^{32}-1个$ 元素

附件的上传和下载怎么实现

上传: 先获取到文件对象然后利用表单FormData对象进行传输
下载: 手动新建一个a标签然后自动触发下载

获得树中某个节点的层级

class Node {value: string;lchild: Node;rchild: Node;
}function getLevel(head, target, level=1) {if (head === null) return 0;if (head.value === target.value) {return level;} else {l = getLevel(head.lchild, target, level + 1);if (l !== 0) return l;return getLevel(head.rchild, target, level + 1);}
}

前端开发是做什么的？工作职责有哪些？
浏览器是如何解析和渲染HTML的🔥🔥🔥
重排(reflow)和重绘(repaint)
css zoom和scale的使用
浏览器事件循环看这一篇就够了
浅析图片懒加载(三种实现方法与两种优化方式)
vue-router路由懒加载以及三种实现方式
vue-鉴权的两种方法之路由拦截
几种常见的拦截器使用
数组与链表：数据存储结构的比较
面试官：说说你对链表的理解？常见的操作有哪些？
GuoXY
7-5 求二叉树中指定节点的层次
js数组有最大长度吗？