面试总结

去头条面试的一些题目，面试官很好，态度也很好。很想进，水平不够。

.position absolute是相对于谁定位的

如果父元素没有position属性，是相对于body进行位置偏移 如果父元素设置了position属性,无论是fixed absolute relative都会偏移

.两列布局 一列固宽 另一列自适应（尽可能多的方法）

html:
        

        

css:
1.  
    #one {
        width: 200px;
        height: 100px;
        float: left;
        background: green;
    }
    #two {
        width: calc(100% - 200px);
        height: 100px;
        float: left;
        background: red;
    }
2.    #one {
        width: 200px;
        height: 100px;
        float: left;
        background: green;
    }

    #two {
        height: 100px;
        position: absolute;
        left: 200px;
        right: 0;
        background: red;
    }
3.
    body {
        display: flex;
    }

    #one {
        width: 200px;
        height: 100px;
        float: left;
        background: green;
    }

    #two {
        height: 100px;
        flex: 1;
        background: red;
    }
4.
    body {
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-rows: 100px;
    }
      #one {
        background: green;
    }

    #two {
        background: red;
    }
5.   #one {
        width: 200px;
        background: green;
        float: left;
        height: 100px;
    }

    #two {
        margin-left: 200px;
        height: 100px;
        background: red;
    }
  6.#one {
        width: 200px;
        height: 100px;
        background: green;
        float: left;
    }

    #two {
        background: red;
        overflow: hidden;
    }
7.    body {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    #one {
        width: 200px;
        background: green;
        height: 100px;
        display: table-cell;
    }

    #two {
        display: table-cell;
        background: red;
    }

3.meta的作用 性能优化有关
meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！ 主要有name和http-equiv两个属性 content代表相对应name http-equiv的值，内容是为了便于搜索机器人查找信息和分类使用的

     
    
    
    
    
    
    >
    
    
    
    
     
     

4.正则表达式
方法：match replace test 元字符： \s \S \d \D \w \W 量词: n+ n* n? ^n n$ 【】

var a = "on-save-dev";
var b = /-[a-z]/g;
var s = a.replace(b, function(str) {
    return str[1].toUpperCase()
});
console.log(s);

var str = "http://www.baidu.com?param1=1¶m=2"
var b = /(\w+)=(\w+)/g
var arr = str.match(b);
console.log(arr)

5.web 实现长连接的名字
websocket webRTC comet long-polling http streaming
6.浏览器的缓存 http web 三次握手 四次挥手
7.es6 module.exports exports require
es6 是export import
CommonJS 是module.exports=exports require
不同点

1.CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
2.CommonJS 模块是运行时加载，ES6 模块是编译时输出接口

8.new对象的时候做了哪些步骤
9.给你一组url 实现并发请求 并且能按固定顺序返回数值
10 loadsh _get()函数
11.promise对象 awit async
12.[1,2,[1,2,[1,2,3]],[4,5,6]]

function change(arr) {
    var newarr = [];
    var f = function(array) {
        for (var i = 0; i < array.length; i++) {
            if (array[i] instanceof Array) {
                f(array[i])
            } else {
                newarr.push(array[i])
            }
        }
    }
    f(arr);
    return newarr;
}