您的位置：首页 > 职场人生

20190515 前端面试总结

2019-07-01 10:43 281 查看

自我介绍？介绍一下印象深刻的项目，自己主导开发的项目？
都封装过什么样的组件？封装组件时需要注意的点？组件设计原则？
浏览器缓存？状态码？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

<!--[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);
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航