面试题

一. Angular2 与angular 1对比

1. angular 1全局watch

2. angular1基于requirejs, angular2+是基于commonjs

3. angular1 js, angular 2+ typescript

4. angular2+基本是重写

5. angular ssr webworker webpack配置化

二。react的路由模式

1. BrowserRouter 浏览器自带的router,基于Histroy API

2. HashRouter # 支持，不会因为刷新而找不到响应的路由

3. MemoryRouter 历史记录保存在内存里， 不会写入到地址栏， 不支持前进或后退

4. NativeRouter react native配置的路由

5. StaticRouter, 设置静态路由，服务端渲染

三。react dom diff优缺点

diff 将新旧dom进行比较， 放入更新队列中

1.从根节点开始遍历所有节点；
2.对于不同类型的标签，删除原标签，新建标签；
3.对于类型相同、属性不同的标签，只修改属性；
4.对于同一个父节点下的复数同类型标签（即列表类型），基于key对比、修改。

可以保证性能的下限

可以跨平台 - 服务端渲染等

缺点

首屏会更慢， 还需要计算dom

性能要求高的， 无法极致优化性能

四。重绘与回流， 优化

浏览器的渲染过程：

1. 解析HTML，生成DOM树，解析CSS，生成CSSOM树
2. 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
3. Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
4. Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
5. Display:将像素发送给GPU，展示在页面上

重绘是指visible，color等属性发生变化。 

回流是指大小等属性发生变化， 知道局部或者整体发生重新绘制。

优化的方法有

1. 将变化的元素放入一个块里DocumentFramement， 开始是设置display;none, 最后变化好了设置display: block。 这样可以一次渲染。

function appendDataToElement(appendToElement, data) {

    let li;

    for (let i = 0; i < data.length; i++) {

        li = document.createElement('li');

        li.textContent = 'text';

        appendToElement.appendChild(li);

    }

}

const ul = document.getElementById('list');

ul.style.display = 'none';

appendDataToElement(ul, data);

ul.style.display = 'block';

 

2. 不能使一些节点布局信息过分使用， 不然会导致等待上次结束后才能执行， 造成资源浪费

const width = box.offsetWidth;

function initP() {

    for (let i = 0; i < paragraphs.length; i++) {

        paragraphs[i].style.width = width + 'px';

    }

}

3. 动画效果， 使用绝对定位， 使其脱离文档

4. css3硬件加速

5. 浏览器一般会使用批处理的队列再进行回流，然后有时候一些操作会导致强制刷新：

 offsetTop, offsetLeft, offsetWidth, offsetHeight. scrollTop/Left/Width/Height， clientTop/Left/Width/Height， width,height，应该减少对此类信息的请求

6.使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

五。 setState是同步还是异步

有时候是异步，有时候是同步。异步是指不能马上拿到结果

1.setState只是在合成事件和狗子函数中是异步的，在settimeout和原生事件中是同步的。

2.“”异步“”不是说内是异步代码实现，其实本身执行过程和代码都是同步的， 只是合成事件和狗子函数的调用顺序在更新之前， 导致没法拿到更新后的值， 形成了所谓的异步，当然可以通过第二个参数setState（partialstate, callback）的callback拿到更新后的值。

3. setState的批量更新优化是建立在异步（合成事件， 狗子函数）之上的，在原生事件和setTimeout中不会批量更耐心， 在异步中如果对一个值进行多次更改，会进行覆盖， 如果同时setState多个不同的值， 在更新时会对其进行批量更新。

六。HOC和你的项目中用到了吗, 好处和问题

1. createForm

2. Redux

3. 一些需要代码重用和组件重用的地方， 比如withLoading

4. withRouter,传递router信息

好处是1. 代码优雅，和重用，2 传递props, ref 

七。 promise的基本方法

基本用法new Promise((resolve, reject)=>{})

Promise.protoype.catch

Promise.prototype.try

Promise.prototype.finally

Promise.resolve()

Promise.reject()

Promise.all([...Promise])

Promise.race([....Promise])

八。手写Promise.all

function promiseAll(...promises){

  console.log(promises);

  var count = [];

  return new Promise((resolve, reject)=>{

    promises.forEach(item=>{

      console.log(item);

      item.then(res=>{

        count.push(res);

        if(count.length===promises.length){

          resolve(count)

        }

      })

    })

  });

  

}

const a1 = new Promise((res, rej)=>{

  setTimeout(() => {

    res('jjjj');

  }, 1000);

})

const b1 = new Promise((res, rej)=>{

  setTimeout(() => {

    res('iiii');

  }, 2000);

})

promiseAll(a1, b1).then(res=>{

  console.log(res);

})

 

九： 设计AutoComplete 

其实目的是引出防抖

 

十。 实现防抖

function debounce(fn, delay) {

  let handle;

  return function (e) {

      // 取消之前的延时调用

      clearTimeout(handle);

      handle = setTimeout(() => {

          fn(e);

      }, delay);

  }

}

element.addEventListener('click', debounce(fn, 5000))