面试总结

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

.position absolute是相对于谁定位的

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

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

html:
        <div id="one"></div>
        <div id="two"></div>
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的值，内容是为了便于搜索机器人查找信息和分类使用的

    <meta charset="UTF-8"> <!--声明文档使用的字符串编码-->
    <meta name="keywords" content="wzm"><!--网页的主要关键字是什么-->
    <meta name="description" content="不超过150个字符"><!--网页的主要内容是什么-->
    <meta name="robots" content="none"><!--定义搜索引擎爬虫的索引方式-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--移动端的窗口-->
    <meta name="author" content="Lxxyx,841380530@qq.com"><!--作者-->
    <meta name="revisit-after" content="7 days" >><!--搜索引擎爬虫的重放时间-->
    <meta name="renderer" content="webkit"><!--双核浏览器的引擎渲染方式-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 浏览器采取何种版本渲染当前页面 -->
    <meta http-equiv="cache-control" content="no-cache"><!--请求和相应的缓存机制--><!-- 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。-->
    <meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" /><!--用于设定网页的到期时间，过期后网页必须到服务器上重新传输。-->
    <meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> <!-- 跳转页面 -->
    <meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> <!--cookie期限-->

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&param=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;
}