20190515 前端面试总结

• 自我介绍？介绍一下印象深刻的项目，自己主导开发的项目？
• 都封装过什么样的组件？封装组件时需要注意的点？组件设计原则？
• 浏览器缓存？状态码？post请求附带头信息及其影响
• 箭头函数和普通函数的区别？怎样使用普通函数模拟箭头函数
• 元素水平垂直居中的实现？flex 兼容性处理？transform兼容性处理？
• 如何解决跨域？cors 设置信息？post请求会有什么副作用
• key的作用
• mobx observer 内部实现以及使用到 js 原理？setter 和 getter 能够对数组进行监听么
• 前端异步方案？async怎么实现并发执行？
• 下拉加载更多的实现？去抖函数和节流函数的区别？在一定时间内一定会被触发的是哪个函数
• 为什么需要react-loadable按需加载组件
• 自适应怎么做的？rem vw 的区别？
• css 预处理是什么意思？less 能够解决兼容性问题么
• 项目中遇到的难点？是怎么解决的？
  （中大公司 微医）

浏览器缓存

flex transform等css属性兼容性问题

检查兼容性的网站：https://caniuse.com/#search=flex

自动添加前缀的插件

先用预处理器把less、sass转为css，然后再通过 Autoprefixer 给编译好的 css 加前缀

var autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    loaders: [
        {
            test:   /\.less$/,
            loader: "style-loader!css-loader!postcss-loader!less-loader"
        }
    ]
  },
  postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
}

解决方案

• 使用浏览器私有属性 -webkit- ，-moz- ，-ms-

  • -moz- 代表firefox浏览器私有属性
  • -ms- 代表IE浏览器私有属性
  • -webkit- 代表chrome、safari私有属性
  • -o- 代表opera私有属性

• CSS hack

  • 条件hack
    keywords：lt、gt、lte、！非指定版本

    <!--[if <keywords>? IE <version>?]>
        代码块，可以是html，css，js
    <![endif]-->
    

  • 属性hack

    .test {
      color: #090\9; /* For IE8+ */
      *color: #f00;  /* For IE7- */
      _color: #ff0;  /* For IE6- */
    }
    

  • 选择器hack

    *html *前缀只对IE6生效
    *+html *+前缀只对IE7生效
    @media screen\9{...}只对IE6/7生效
    @media \0screen {body { background: red; }}只对IE8有效
    @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
    @media screen\0 {body { background: green; }} 只对IE8/9/10有效
    @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
    

特殊场景

IE6双边距bug

现象：块属性标签添加了浮动float之后，若在浮动方向上也有margin值，则margin值会加倍。
解决：进行hack处理了，对IE6进行 _margin-left: 5px;

上下margin重合

现象：相邻的 margin-top margin-bottom 会重合
解决：不要同时使用 top 和 bottom

chrome下小于12px的文本显示问题

现象：小于12px的按照12px进行解析
解决：设置 -webkit-text-size-adjust: none;

组件设计原则

• 功能单一
• 接口设计符合规范和大众习惯
• 可配置：比如按钮的颜色、大小、事件处理、位置等都是可以配置的
• 健壮性：对传入的值进行有效的校验

async怎么实现并行执行

async function myFunction() {
  try {
    let foo = await getFoo();
	let bar = await getBar();
	// 上面的 foo 和 bar 是串行的，比较耗时
	let [foo, bar] = await Promise.all([getFoo(), getBar()]);
  } catch (err) {
    console.log(err);
  }
}