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

时间：2024-03-01 08:46:49

题目来源: 牛客

如何理解前端这个岗位

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

浏览器如何渲染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 个 2^{32}-1个 232−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数组有最大长度吗？

新人发文，礼貌球馆❤️

相关文章