daodaoapp / interview Goto Github PK

css

1. css3新特性有哪些？
2. 页面布局方式有哪些？
3. 用过flex吗？都有哪些属性？
4. 清除浮动有哪些方法，说说原理？
5. 如何解决外边距合并的问题，说说原理？
6. 盒模型是怎么样的？
7. 如何实现垂直居中？
8. 常用的选择器有哪些？权重如何？
9. position 定位
10. padding %代表什么意思
11. margin重叠，问题与5类似
12. 使用css画三角形，实心三角形，空心三角形

移动端

1. 解释物理像素，css像素，dpr这几个概念（蚂蚁金服）
2. rem的工作原理
3. 你们移动端是通过什么布局的？

其他

1. 你做过哪些网站优化的工作？（百度...）
2. 你对网站seo做过哪些优化工作？ （百度）
3. 服务端渲染拼接模板和客户端渲染有什么不同？（喜马拉雅）
4. 浏览器渲染机制是怎样的，什么是重排，重绘？（喜马拉雅）
5. 遇到过哪些浏览器兼容性问题？
6. 说说项目中遇到过哪些映像深刻的问题，是如何解决的？

react

1. react的新特性有哪些， 新版本的生命周期是怎样的，都有哪些作用？（蚂蚁金服，百度，喜马拉雅）
2. 实现图片懒加载，以及使用react.lazy如何实现图片懒加载（蚂蚁金服）
3. react项目中都做过哪些优化工作？（百度，蚂蚁金服，喜马拉雅）
4. 用过reselect吗？（喜马拉雅）
5. 说说redux的工作原理（百度，蚂蚁金服，喜马拉雅）
6. redux完成数据更新之后，是如何通知react更新视图的（百度）
7. 说一下diff算法，为什么说它的算法复杂度较之前优化了很多（百度）
8. 说一下react-router的工作原理，react-router4动态路由你是如何配置的？在react-router3上如何实现动态路由的配置呢？ （喜马拉雅）
9. redux-thunk做了些什么？
10. 你们的项目结构是怎么样的，如何实现逻辑和视图的解耦？
11. react区分class与函数式组件，在class实例化之前
12. react-router link 与 a区别
13. setState为什么是异步,(setState 叫做伪异步，
14. react事件机制
15. react,Key具体起到了什么作用，如果不加key，diff算法如何改变
16. react 中的Fiber

redux

1. redux状态树管理
2. redux state为什么是只读的
3. redux 三个核心概念
4. redux 中间件

1. 过去的工作中你有什么印象深刻的解决问题的过程
2. 正则表达式的性能怎么样，底层是如何实现的了解吗
3. js的错误类型有哪些
4. 如果你是浏览器，当用户在你这里输入URL开始你会做些什么事情，把你知道的细节尽可能的说一下
   dns解析：你怎么获取URL里面的域名呢
   header里面外链了一个CSS你怎么处理
   header里面外链了一个js你会怎么处理，这个js你会在什么时候执行它
   js改变了DOM会重新渲染吗
   为什么你会用树的结构出生成DOM、cssom而不用其他的结构呢比如链表
5. https相比较http做了什么，达到了什么目的？
   https中的非对称加密是什么时候
   对称加密是什么时候
6. less,scss,postCss,css module各自有些什么作用
   css module解决命名冲突的原理是什么呢
   项目中要使用css module要怎么做呢
7. 使用document.createElement创建的元素在没有渲染到页面之前，它和react、vue的虚拟DOM是一样的吗？
8. 要分析收集一个页面的性能问题，你会通过哪些指标来分析
   微信小程序它用户体验比普通的h5要好，它内部做了什么工作达到这个目的呢？
9. 实现一个动画你有什么方案，尽可能发散思维（比如：gif,没有声音的视频）？
   css实现动画和js实现动画哪个性能要好一些
   在一个大计算量的场景下实现一个进度条，用JS好还是CSS好呢，为什么？
   js是单线程，它是如何实现异步的呢？
   线程和进程的区别？
10. 浏览器处理一个大的文件可能会出现卡顿，你觉得是什么地方导致卡顿？
    你有什么方案来处理这个问题呢？服务端可以帮你使用分页，如果是浏览器这边呢，怎么处理
11. 用比较白话的方式跟我解释一下jsonp的工作方式
12. react-hooks为什么不能在条件语句中使用？
    react遍历hooks你觉得有什么性能问题吗？
13. react路由的实现原理？
14. 你觉bizcharts有什么优点、缺点？

1. 实现深拷贝
   JSON.stringify有什么方法只转换部分属性（如：{a: 1, b: 2} -> '{"a": 1}')
2. 实现curry化
3. bind, call, apply区别
4. class constructor中调用super的作用
5. react做过什么优化
6. 高阶组件实现方式，它的作用是什么
7. 比较一下react-hooks版本和之前版本
8. 说说react-diff
9. 说说react-fiber
10. 设计组件你基于什么原则
11. https和http的区别，说说加密过程
12. 如何优化网站性能
13. 你webpack做过什么优化工作
    splitChunks如何配置
    如何优化构建速度
14. 实现布局：移动端垂直方向上，A,B两个div占满全屏，高度都自适应
15. 你是如何做前端项目（我现在的项目）的设计，在这个项目中有什么成长

一轮：

1. 大整数加法

2. 实现一个类Chain

   const chain = new Chain(); 
   chain.eat().sleep(5).work().sleep(6).eat();

3. 实现bind

4. 实现JSON.stringify

5. 讲一讲webpack的一些关键概念

6. 说说你对typescript的理解

7. 说说redux管理状态

8. react 生命周期

二轮：

1. 说说你项目中的比较有亮点的地方
2. 实现一个strim方法
3. 实现数组去重方法
4. for循环定义setTimeout输出问题，及解决方案
5. fn1 = x => x; fn2 = x => {x}; fn3 = x => ({ x }); fn1(2);fn2(2);fn3(3)输出什么？
6. 实现一个sum(1)(2, 3)(4)输出10；const result = sum(1)(2, 3)(4); console.log(result)输出10， result.value()输出10；
7. 类方法全局调用问题
8. http缓存;说说http有哪些版本
9. 长列表卡顿是因为什么？实现虚拟滚动
10. css position取值；如何脱离文档流；transform会脱离文档流吗？
11. 你了解哪些新的前端领域的技术；说说对微前端的理解
12. redux工作流，combineReducer实现
13. 网络安全问题

一面：

1. webpack路由去中心化
   require.context
2. 未知宽高实现垂直居中

/*1*/
.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
/*2*/
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*3*/
.wrap {
  display: table;
  text-align: center;
}
.content {
  display: table-cell;
  vertical-align: middle;
}

3. 动画性能优化方案
   在使用css3 transtion做动画效果时，优先选择transform(opacity, rotate, scale, translate)，尽量不要使用height，width，margin和padding
   创建单独的图层

4. 基于fetch，封装一个带有超时和重试功能的请求

   ajax({url, timeout, tryTimes})
   fetch(url).then

5.项目中比较有挑战性的地方

IHerb共两轮面试，一轮为技术面，由直接技术主管负责。第二轮为HR面，于技术面试之后两小时后进行。【但是在结束技术面时已经明确得到了会有HR面的消息】其中，技术面试较为开放，考察多为英语、交流、思维及设计能力，还兼有比较基础的算法题。因为疫情原因，采用线上面是。从面试官进入会议室开始，所有交流均是中英混用（面试官会突然切换成英文或者中文进行提问），不清楚是外企面试流程如此，还是面试官性格如此。

1. 英：简单的介绍一下你自己。
2. 英：介绍一下你最得意的一个项目或者你印象最深的一个技术难点
3. 英：你为什么想要跳槽？
4. 中：你是如何设计React项目中的复用组件？
   • 你如何设计组件的State?
   • 你如何设计Select组件？如何设计使用Context？它和Props的区别在哪里
5. 中：React Hooks使用过吗，他的优缺点是什么？
   • 函数式编程相关的问题，具体挤不太清楚
   • useEffect相关的问题，具体挤不太清楚
6. 中：OAuth2 和 openId验证相关问题
   • 注： 该部分均为开放性设计性问题，大多基于你如何设计，如何处理XX问题展开探讨。该部分大约交流约一小时左右，因为聊得比较随性，具体问题记不太清楚。
   • 注： 可能因为简历上写了曾经对接过谷歌平台验证以及微信小程序验证，由此引入的话题。
   • Refresh Token和Access Token，OpenId和Access Token的区别，以及如何处理RefreshToken失效的问题。
7. 中：RXJS相关问题
8. 中&代码题：将小青蛙放到荷叶上。
   • 注：全部考察Flex布局，一共28道题目，还贴心的给了所有Flex属性参考。
9. 中&代码题：树
   • 遍历树。
   • 用一个数组输出从根-叶的所有路径。
10. 中：你还有什么想问我的吗？

js

1. es6有哪些新特性？

2. let 和var的区别？

• let 有局部作用域
• var 只有函数作用域, 其他情况下会变量提升, 相当于全局变量

3. 箭头函数和普通function的区别，什么时候不能用箭头函数？

• 普通函数创造了一个作用域, 在这个作用域中有自己的this
• 箭头函数使用父作用域的 this, 不会改变this

4. promise有哪些状态，有哪些方法, 它的执行机制是怎样的？（百度，喜马拉雅）

• 状态
  pending, fullfilled , rejected
• 实例方法
  .then
  .catch
  .finally
• 类方法
  .all
  .race

5. 实现一下promise构造函数，还有then，finally方法（百度，喜马拉雅）

6. 说说你对async/await的认识 （百度）

   • 异步代码有3种写法
     • 回调函数式
     • 链式promise
     • 看起来像同步的await方式- 实际上是promise的语法糖, 一定返回一个promise对象
   • 必须用try catch来抓错误

7. map和forEach的区别 （蚂蚁金服）

   • forEach对原数组每个元素进行操作, 但不返回
   • map返回一个新数组数组

8. map和for的区别

   • for 可以break中止
   • 语义不同, map用来做变换, 生成的结果是一个数组

9. 你了解哪些模块化的方案？（百度）

   • function封装
   • class封装
   • obj
   • nodejs module.export
   • webpack把所有资源都作为模块引用

10. 深拷贝和浅拷贝是怎样的，实现一个深拷贝的方法（多家公司问到）

    • 浅拷贝, 内存中只有一个原对象, 只是多了一个引用
    • 深拷贝, 内存中创造一个新对象, 新对象的内部结构和数值跟被复制的对象相同

    function deepClone(obj){
       if(obj === null || typeof obj !== 'object'){
           return  obj
       }
       
       if(obj instanceof Array){
           let copy = []
           for(let i=0;i<obj.length;i++){
               copy.push(deepClone(obj[i))
           }
           return copy
       }
       
       if(obj instanceof Date){
           let copy = new Date(obj.getTime())
           return copy
       }
       
       let copy = {}
       for(let key in obj){
           if(Object.hasOwnProperty.call(obj,key)){
               if(copy = obj[key]){
                   return copy
               }
               copy[key] = deepClone(obj[key])
           }    
       }
       return copy
       
    }
    
    

11. 如何实现一个私有变量（蚂蚁金服）

12. 有两个异步事件,规定事件a结束后做一件事，两个事件都结束后做一件事情，有一个限制每个事件的最长时间控制为300ms，否则做另一件事情。es5实现（蚂蚁金服）

13. 实现一个节流函数//防抖函数（蚂蚁金服）

function debonce(fn, interval) {
  let timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, interval);
  };
}


function throttle(fn, interval) {
  let canRun = true;
  return function () {
    if (canRun) {
      canRun = false;
      fn.call(this, arguments);
      setTimeout(() => {
        canRun = true;
      }, interval);
    }
  };
}

14. 手动实现一个document.getElementById（蚂蚁金服）

15. 谈谈for of (蚂蚁金服）

    • 对可迭代对象进行遍历, 拿到的不是索引, 而是对象的值
    • 无法拿到索引
    • 不能遍历plain obj

16. 如何判断一个对象是数组，如何判断一个数字类型?

    • typeof
    • instanceof
    • Object.prototype.toString.call()

17. 下面的的输出是什么，b是全局变量还是局部变量？(携程）

function() {
 var a = b = 5;
}
console.log(b);

• 报错, 函数作用域, 局部变量

18. 原生ajax是怎样的过程？

function ajax(settings) {
  const { url, method, success, fail } = settings;
  const xhr = new XMLHttpRequest();
  xhr.open(url, method);
  xhr.onreadystatechange = function (e) {
    if (e.readState === 4) {
      if ((e.status >= 200 && e.status < 300) || e.status === '304') {
        success(e.response);
      } else {
        fail(e.status);
      }
    }
  };
  xhr.send();
}

19. 插入dom有哪些方法？

    • innerHtml
    • createDomFragment
    • elem = document.createdE
    • document.write

20. 常用的浏览器对象有哪些？

    • BOM
    • userAgent
    • location

21. 说说cookie, locastorage, sessionstorage

    • cookie
      • 奇怪的数据结构
      • 有失效期
      • server控制
      • 每次默认都会带上
    • local 永久有效
    • session 关闭窗口则失效

22. js继承，（四种继承方式，掌握其中两三个即可

    • es6 extends
    • es5
      • Son.prototype = new Father()
      • Son.contructor = Son
    • es5

var extend = function (Child,Parent){
//声明一个空的类

var F = function(){};
F.prototype = Parent.prototype;
// 子类的原型是F的一个实例
Child.prototype = new F();
Child.prototype.constructor = Child;
}
```

23. 构造函数super是什么，如果去掉，会有什么影响
24. null与undefined区别
25. ==与===区别
26. promise与async区别
27. require与import区别
28. [0]==0 结果是什么 （true
    []==![] 结果是什么 （true
29. arguments是数组吗？不是的化如何转变成数组
30. setTimeout与setInterval 区别
31. 每隔1s，输出1，2，3，4，5，6 （使用promise写法

  function createPromise(interval = 1000) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve();
      }, interval);
    });
  }
  
   for (let i = 1; i <= 6; i++) {
    createPromise(i * 1000).then(() => {
      log(i);
    });
  }

33. 手写bind方法// 手写call方法
34. this指向问题&&变量提升问题，下列代码结果返回

var a = 1;
function b() {
  a = 10;
  return;
  function a() {}
}
b();
console.log(a); // 1

function a() {
  this.func = "func";
  console.log("this", this);
}
var b = {
  test: new a()
};
b.test; // this a { func: 'func' }

35. generator，proxy,

36. 响应式对象

37. event loop

    • macroTask 宿主环境(浏览器)实现
      • setTimeout
      • onClick
      • 普通语句
    • microTask js引擎实现
      • promise.then()
    • 可以理解为每个macroTask里面都有一个microTask的队列
    • 所以当前的macroTask里面队列的micro都执行完后, 才执行下一个macro

38. 使用数组reduce实现数组map方法 （字节跳动

 function myMap(arr, func) {
    return arr.reduce((prev, cur, index) => {
      prev.push(func(cur, index));
      return prev;
    }, []);
  }

39. 数组常用方法
40. 重绘与回流