题目来源: 牛客
如何理解前端这个岗位
简单地说就是设计师做好网页效果图，前端将效果图转化成页面，之后交给后端程序员，中间的这段工作就是前端
浏览器如何渲染HTML
- 将载入的HTML文件解析成DOM树，并且将各个标记标识解析成DOM树的各个节点
- 将解析成的DOM树和CSS规则树进行关联生成渲染树
- 进入布局阶段，为DOM树的每个节点分配在屏幕上出现的确切坐标
- 进入绘制阶段，在这里渲染引擎的工作就结束了，接下来就交给后端对渲染树的每个节点进行绘制，呈现出页面效果
重绘会引起重排么
重绘是指某些元素的外观被改变，重拍是指重新生成布局排列元素。单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重拍之后，将会重新绘制受到此次重排影响的部分。也就是说：重绘不一定导致重排，但重排一定会导致重绘
使用scale属性会引起重绘还是重排
scale只能引起重绘而不是重排，transform的所有属性都不会引起重排
浏览器事件循环
- 执行同步代码
- 执行宏任务
- 将微任务添加到任务队列
- 宏任务执行完毕后，执行任务队列
图片懒加载
简单来说，就是如果可视区域里面看不到图片，就先不加载图片
js
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 个 2^{32}-1个 232−1个元素
附件的上传和下载怎么实现
- 上传: 先获取到文件对象然后利用表单FormData对象进行传输
- 下载: 手动新建一个a标签然后自动触发下载
获得树中某个节点的层级
js
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数组有最大长度吗？
新人发文，礼貌球馆❤️