MUYI · 后端工程师的生产级知识体系

Appearance

HTML/CSS ​

  1. 块级元素和行内元素的概念，并分别列举五个

  2. 常用布局方案

  3. 水平垂直居中一个元素

  4. CSS弹层居中方案。（分固定与不固定高宽情况）

  5. 两个div相接margin，防止重叠的解决方案和原因

  6. 常用的 CSS 选择器，权重，伪类（结合HTML5新特性）

  7. 对于viewport的理解程度，1px实现的几种方法，对于移动端浏览器H5网页宽度生成机制的了解

  8. css3动画(animation & transiton), 和js实现的动画区别

  9. css3实现一个带透视效果的立方体 (考查perspective、transform-style: preserve-3d、transform、坐标系)

JavaScript/DOM ​

  1. 常用字符串操作方法，substr/slice/replace 这类

  2. 常用数组操作方法，pop/push/slice 这类。额外考察 ES5 之后的数组操作方法使用和区别：map/filter/reduce。特别是 reduce 用途和参数

  3. ES6相关：const定义的数组可以使用push方法修改吗。箭头函数和匿名函数的区别是什么。ES6相较于ES5有了哪些改变？

  4. []和{}如何用js判断区分出来

  5. 判断对象是字符串还是日期

  6. 二维数组扁平化&数组去重的优化算法

  7. this指向, bind, call, apply

  8. 金额千位分隔符问题，看解题思路。简单版考察字符串转数组、数组倒序、3 位取余数做法。复杂版提示用正则表达式解题，考察正则表达式熟悉程度和递归思想

  9. JavaScript实现模块的方式（AMD/CommonJS/UMD）

  10. 原生DOM操作：DOM遍历（nodeType/firstChild/previousSibling/nextSibling），inserAfter实现

  11. 事件的监听，捕获冒泡 & 拦截

  12. innerHTML和innerText的区别

  13. currentTarget和target的区别

  14. addClass、removeClass的实现思路，是否知道classList

  15. 正则表达式相关：问号的几个含义，URL、邮箱如何匹配。replace、match、exec、test 这类正则相关 JS 方法

  16. 解释浏览器同源策略，解决跨域问题的方法，各方法所存在的问题

  17. 如何优化页面scroll性能

  18. 影响JS性能的操作有哪些？可顺便展开针对这些问题怎么优化

  19. 通过函数节流（throttle）函数去抖（debounce）考查闭包的理解和使用

其它 ​

  1. HTTP相关：常用状态码，缓存策略，请求头和返回头，POST数据格式，MIME协议，Set-Cookie

  2. websocket相关

  3. 对cookie和session的理解

  4. 安全相关：对XSS和CSRF的理解，举例子说明攻击场景，如何防范

  5. 页面加载优化方案，粗细不限

  6. 简述chrome的渲染过程

  7. reflow是什么？有什么问题？如何避免？

  8. 首屏加载优化需要注意什么？并如何优化？

  9. React相关：react组件生命周期;在哪个阶段发起ajax获取数据。setState是同步生效的还是异步生效，如何让代码在等待状态改变后再执行

  10. webpack热更新 （webpack-dev-server --hot模式和react-hot-loader的区别）

  11. NodeJS 中模块module查找过程

编程基础题 ​

  1. null和undefined的区别（深入问指针、对象、派生；undefined == null；//true）

  2. 有多少种变量申明方式？let和const的区别（深入作用域）

  3. 简单介绍下promise、async/await

  4. 什么是深拷贝，如何做深拷贝

  5. 如何用array来模拟一个栈（如何用array来模拟一个队列）

  6. call apply bind的区别

  7. setTimeout(0)，代码是即时执行的么？为什么?

  8. 两个大整数的，相加，相乘，相除

算法题 ​

  1. 做一个补位函数。把场景考虑的尽量全面，方便应对不同的补位需求。应用场景举例，注意只是一个举例。A同学需要把“origString”字符串用 x 补足到 20 位“xxxxxxxxxxorigString”。

复杂度是O(N)的答案。只能说合格。使用二分法的答案。是优秀。使用位移运算符，有可能是做过这类型题目。需要问清楚为啥要用的原理。

参照：https://www.cnblogs.com/shengxinjing/p/5315549.html

较好的一种O(N)答案，如果把Array.prototype.join缓存到外部变量里，多次使用速度更快

js
var _join = Array.prototype.join
function leftpad(str, len, ch) {
    if (!ch && ch !== 0) ch = ' ';
    var len = len - str.length;
    return _join.call({
        length:len
    },ch)+str;
}