滴滴前端一面必会面试题汇总

实现 LazyMan

题目描述:

实现一个LazyMan，可以按照以下方式调用:
LazyMan(“Hank”)输出:
Hi! This is Hank!

LazyMan(“Hank”).sleep(10).eat(“dinner”)输出
Hi! This is Hank!
//等待10秒..
Wake up after 10
Eat dinner~

LazyMan(“Hank”).eat(“dinner”).eat(“supper”)输出
Hi This is Hank!
Eat dinner~
Eat supper~

LazyMan(“Hank”).eat(“supper”).sleepFirst(5)输出
//等待5秒
Wake up after 5
Hi This is Hank!
Eat supper

前端进阶面试题详细解答
实现代码如下:

class _LazyMan {
   
  constructor(name) {
   
    this.tasks = [];
    const task = () => {
   
      console.log(`Hi! This is ${
     name}`);
      this.next();
    };
    this.tasks.push(task);
    setTimeout(() => {
   
      // 把 this.next() 放到调用栈清空之后执行
      this.next();
    }, 0);
  }
  next() {
   
    const task = this.tasks.shift(); // 取第一个任务执行
    task && task();
  }
  sleep(time) {
   
    this._sleepWrapper(time, false);
    return this; // 链式调用
  }
  sleepFirst(time) {
   
    this._sleepWrapper(time, true);
    return this;
  }
  _sleepWrapper(time, first) {
   
    const task = () => {
   
      setTimeout(() => {
   
        console.log(`Wake up after ${
     time}`);
        this.next();
      }, time * 1000);
    };
    if (first) {
   
      this.tasks.unshift(task); // 放到任务队列顶部
    } else {
   
      this.tasks.push(task); // 放到任务队列尾部
    }
  }
  eat(name) {
   
    const task = () => {
   
      console.log(`Eat ${
     name}`);
      this.next();
    };
    this.tasks.push(task);
    return this;
  }
}
function LazyMan(name) {
   
  return new _LazyMan(name);
}

懒加载与预加载的区别

这两种方式都是提高网页性能的方式，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

• 懒加载也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户需要访问时，再去加载，这样可以提高网站的首屏加载速度，提升用户的体验，并且可以减少服务器的压力。它适用于图片很多，页面很长的电商网站的场景。懒加载的实现原理是，将页面上的图片的 src 属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的 src 属性，以此来实现图片的延迟加载。
• 预加载指的是将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。 通过预加载能够减少用户的等待时间，提高用户的体验。我了解的预加载的最常用的方式是使用 js 中的 image 对象，通过为 image 对象来设置 scr 属性，来实现图片的预加载。

CSS预处理器/后处理器是什么？为什么要使用它们？

预处理器， 如：less，sass，stylus，用来预编译sass或者less，增加了css代码的复用性。层级，mixin， 变量，循环， 函数等对编写以及开发UI组件都极为方便。

后处理器， 如： postCss，通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。

其它css预处理器语言：Sass（Scss）, Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css。

使用原因：

• 结构清晰， 便于扩展
• 可以很方便的屏蔽浏览器私有语法的差异
• 可以轻松实现多重继承
• 完美的兼容了CSS代码，可以应用到老项目中

分片思想解决大数据量渲染问题

题目描述:渲染百万条结构简单的大数据时 怎么使用分片思想优化渲染

实现代码如下:

let ul = document.getElementById("container")