前端的面试题（下）

7、手写函数防抖和函数节流

函数节流

函数节流是让这个函数在间隔某一段时间执行一次
以输入框为例，假设你想查询xxxx,你想实现当我开始输入多少秒之后，执行查询操作。（并不一定要输入完毕）
核心是去判断当前时间和开始时间的间隔是否到达了设置的delay值，如果达到了，就执行一次回调。没有则不执行。

函数防抖

让这个函数在执行上一次之后过了你规定的时间再执行的一种方法
核心在于每次都去clear一个延时器，然后每次执行函数的时候，都去clear以前的延时器。只有当你中断输入的时候，才会去执行相应回调。

function throttle(method,context){
  clearTimeout(method.tId)
  method.tId = setTimeout(function(){
    method.call(context) 
   },1000)
}

封装节流和防抖，通过第三参数来切换模式

const throttle = function(fn, delay, isDebounce) {
  let timer
  let lastCall = 0
  return function (...args) {
    if (isDebounce) {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        fn(...args)
      }, delay)
    } else {
      const now = new Date().getTime()
      if (now - lastCall < delay) return
      lastCall = now
      fn(...args)
    }
  }
}

8、浏览器渲染过程

一图胜千言

image

浏览器使用HTTP协议或者HTTPS协议，向服务端请求页面
把请求回来的HTML代码经过解析，构建成DOM树
计算DOM树上的CSS属性
根据CSS属性对元素逐个渲染，得到内存中的位图
中间可能包括对位图进行合成，极大地增加后续绘制的速度
合成后，在绘制到界面上

9、回流重绘是什么？

HTML默认是流式布局的，但CSS和JS会打破这种布局，改变DOM的外观样式以及大小和位置。

reflow（回流）

当浏览器发现某个部分发生了变化从而影响了布局，这个时候就需要倒回去重新渲染
几乎是无法避免的，因为只要用户进行交互操作，就势必会发生页面的一部分的重新渲染，且通常我们也无法预估浏览器到底会reflow哪一部分的代码，因为他们会相互影响。

display:none是回流

减少回流的方式

用transform做形变和位移.
通过绝对位移来脱离当前层叠上下文，形成新的Render Layer。

repaint（重绘）

当我们改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸和位置没有发生改变。

visibility: hidden是重绘

10、图片懒加载怎么实现的？

先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。

var viewheight = document.documentElement.clientHeight   //可视区域高度

function lazyload(){
    var eles = document.querySelectorAll('img[data-original][lazyload]')

    Array.prototype.forEach.call(eles,function(item,index){
        var rect;
        if(item.dataset.original === '') return;
        rect = item.getBoundingClientRect(); //返回元素的大小及其相对于视口的

        if(rect.bottom >= 0 && rect.top < viewheight){
            !function(){
                var img = new Image();
                img.src = item.dataset.url;
                img.onload = function(){
                    item.src = img.src
                }
                item.removeAttribute('data-original');
                item.removeAttribute('lazyload');
            }()
        }
    })
}

11、vue-lazyloader的原理