前端研发工程师2019面试记录(1)

如题,找工作中,面试前端研发工程师

面试结果并不是很理想,废话不多说,总结经验是重点

2019年8月21日 上午09:40分的面试邀约
提前到达09:20分到达战场

2张纸 = 个人信息 && 正反两面笔试题

# 个人信息填写略过

# 笔试题: 
# 基本都是js基础问题 没拍照,只记录能记得住的一部分

1. css实现垂直居中的方法

答: 常用的绝对定位
    flex布局
    {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center;/* 垂直居中 */
    }
    还有display设置为table
    {
        display: table-cell;
        vertical-align: middle; /* 垂直居中*/
        text-align: center; /* 水平居中*/
    }


2.css中单位px、em、rem 的区别

答: px像素
    em会继承父级元素的字体大小。
    rem相对于根元素的字体大小
    
    
3.link和@import的区别

答: 两者都是外部引入CSS的方式
    @import是CSS提供的语法规则，只有导入样式表的作用
    link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS，rel连接属性等
    
    加载页面时，link引入的CSS被同时加载
    @import引入的CSS将在页面加载完毕后加载
    
    
4.什么是回流什么是重绘,有什么区别

答: 当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。
    当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的,则就叫称为重绘
区别: 回流必将引起重绘，而重绘不一定会引起回流
      

5.js深拷贝和浅拷贝,他们的区别,实现一个深拷贝

答: 浅拷贝：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存;
    深拷贝：复制并创建一个一摸一样的对象，不共享内存，修改新对象，旧对象保持不变;
实现深拷贝:
    (1)递归
    (2)JSON.stringify结合JSON.parse

6.实现一个左边固定200px右边自适应的布局,html和css

答: 
# html
<div class="wrap">
    <aside></aside>
    <div class="content"></div>
</div>

# css
.wrap{
    width: 100%;
    height: 100px;
    display: flex;
    aside{
        width: 200px;
    }
    .content{
        flex: 1;
    }
}


7.js实现数组去重

答: (1)新建一个数组，遍历去要重的数组，当值不在新数组的时候（indexOf为-1）就加入该新数组中
    (2)给传入的数组排序，排序后相同的值会相邻，然后遍历排序后数组时，新数组只加入不与前一值重复的值
    (3)ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
    
    
8.常见的http状态码,代表什么

答: 500 内部服务器错误
    404 文件未找到
    403 禁止访问
    200 请求成功
    
    
9.跨域和跨域的解决方案

答: 非同源造成跨域,同源策略就是用来限制从一个源加载的文档或脚本与来自另一个源的资源进行交互
    window.name方法
    JSONP方法(JSONP的原理其实就是利用引入script不限制源的特点)
    ...


10.数组正向排序 arr=[12,3,4,8,10,1,2]

答:
function sortArr (arr) {
    var newArr = arr.map(val => parseInt(val)).sort((a, b) => a-b);
    newArr.sort((a, b) => a-b);
    return newArr.map(val => `${val}`);
}


11.当跨域时,js ajax 请求出现options请求,能去掉吗

答: 全局配置crossDomain:false,在ajax请求是加上crossDomain:true,让其请求是跨域请求.


# 记忆里应该还有几道题但是想不起来了,印象比较深的都记录了下来
# 笔试结束

交卷后等待下一关

因为这次面试比较仓促 所以面试过程及其尴尬 下面是回忆问题

1.css中margin叠加的问题

答: 概念:当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。 
    (1)当一个元素出现在另一个元素上面时，第一个元素的底边外边距与第二个元素的顶边外边距发生叠加
    (2)当一个元素在另一个元素中时，它们的顶边距也会发生叠加
    (3)假设有一个空元素，它有边界，但是没有边框或填充。在这种情况下，顶边界与底边界就碰到了一起，它们会发生叠加
    (4)如果这个边界碰到另一个元素的边界，它还会发生叠加

(1)的代码示例

# html
<div class="wrap">
    <div class="a"></div>
    <div class="b"></div>
</div>

# css
.wrap{
    width: 100%;
    height: 800px;
    .a{
        width: 50px;
        height: 50px;
        background-color: red;
        margin-bottom: 20px;
    }
    .b{
        width: 50px;
        height: 50px;
        background-color: yellow;
        margin-top: 50px;
    }
}

(2)的代码示例

# html
<div class="wrap">
    <div class="a">
        <div class="b"></div>
    </div>
</div>

# css
.wrap{
    width: 100%;
    height: 800px;
    .a{
        width: 50px;
        height: 50px;
        background-color: red;
        margin-top: 20px;
    }
    .b{
        width: 50px;
        height: 50px;
        background-color: yellow;
        margin-top: 50px;
    }
}

(3)的代码示例

# html
<div class="wrap">
    <div class="a"></div>
    <div class="b"></div>
</div>

# css
.wrap{
    width: 100%;
    height: 800px;
    .a{
        background-color: red;
        margin-top: 50px;
        margin-bottom: 50px;
    }
    .b{
        width: 50px;
        height: 50px;
        background-color: yellow;
    }
}

(4)的代码示例

# html
<div class="wrap">
    <div class="a"></div>
    <div class="b"></div>
</div>

# css
.wrap{
    width: 100%;
    height: 800px;
    .a{
        background-color: red;
        margin-top: 50px;
        margin-bottom: 50px;
    }
    .b{
        width: 50px;
        height: 50px;
        background-color: yellow;
        margin-top: 20px;
    }
}


2.ajax对于后端返回的数据状态码做统一的判断处理

答: 封装promise,不细写了


3.扁平化数组（多层嵌套） 例: arr =[1, 2, 3, [4, 5]];

答: (1) 遍历数组每一项，若值为数组则递归遍历，否则concat。
        function flatten(arr) {  
            return arr.reduce((result, item)=> {
                return result.concat(Array.isArray(item) ? flatten(item) : item);
            }, []);
        }
        
    (2) 调用数组的toString方法，将数组变为字符串然后再用split分割还原为数组
        function flatten(arr) {
            return arr.toString().split(',').map(function(item) {
                return Number(item);
            })
        } 
        
    (3) 递归的遍历每一项，若为数组则继续遍历，否则concat
        function flatten(arr) {
            var res = [];
            arr.map(item => {
                if(Array.isArray(item)) {
                    res = res.concat(flatten(item));
                } else {
                    res.push(item);
                }
            });
            return res;
        }
        
    (4) es6的扩展运算符能将二维数组变为一维
        [].concat(...[1, 2, 3, [4, 5]]);  // [1, 2, 3, 4, 5]


4.ajax不能跨域，是发送的请求被浏览器拦截了？还是回复的响应被浏览器拦截了？

答: Chrome而言会先发一个options请求去询问服务器是否允许跨域，如果允许则继续发真正的请求，不允许的话就抛出跨域错误
    服务器端可能会收到options请求，浏览器对这个请求会有缓存，比如上一次跨域的时候options请求得到的是不允许，那么下一次跨域的时候不一定再发送新的options请求了，二是直接抛跨域错误了，这种情况下就什么请求都收不到了。说白了就是并不是每次跨域请求都先发送options请的。也有的时候是不发生options请求，直接跨域请求，但是根据返回的头里面是否设置了允许跨域再来决定是否抛出跨域错误的。 这方面不同的浏览器处理方式都不一样，比较能统一的描述
    (本题有待商榷)


5.webpack相关的优化做过哪些

答: 
    (1) 优化打包速度
        1).提取不变文件 
            1.1 不变文件cdn 打包
            1.2 提取不变库，减少打包文件（针对于没有cdn源的npm包）
        2).多进程loader编译
        3).缓存loader编译的文件
        4).多进程缓存文件压缩
    (2) 优化用户体验
        1).使用require.ensure, import 进行模块的懒加载
        2).使用gzip缓存js，css文件
        3).使用MiniCssExtractPlugin进行css文件提取
        

6.后台管理系统的权限设计模型思路

答: 个人思路 祝你好运~


# 因为总的面试过程并不是很愉快,很多问题点都并不是很清晰,所以面试就到这里就结束了

# 希望大家都可以认真对待每一次面试吧 以此为戒!