面试2

HTTP

客户端/服务器模型

客户端主动发送要求。
被动地等待来自用户端的要求，处理请求并传回响应
客户端等待，然后处理响应。

性能优化

雪碧图 http缓存虚拟dom webpack

三次握手

为什么要三次握手? 三次握手: A:我能连你了吗? B: 可以连我,你连吧 A:那我连你了开始发送数据

原因:因为要保证A/B 都可以收发信息 ,数据才能在AB之间传输

A:我能连你了吗? B: 可以说明A可以发信息,B可以接受信息

B: 可以连我,你连吧 A:那我连你了说明B可以发送信息,A可以接受信息

HTML5

html5中新增加的标签,技术(api)(包括promise,localStorage,canvas等),统称为html5.

CSS

CSS选择器

.类选择器，#id选择器,input[type=text] [data-x] [target=_blank] 属性选择器
直接子代选择器> 后代选择器空格 ，代表两个都选
伪类选择器： input:focus 选择获得焦点的 input 元素。 a:hover p:first-child p:last-child p:nth-child(1) p:nth-child(even) p:nth-child(odd) p:before p:after

input:enabled 选择每个启用的元素。 input:disabled 选择每个禁用的元素 input:checked 选择每个被选中的 元素。

CSS2：高度与宽度

inline的高度是行高，而不是font-size
所有inline和inline-block元素之间,不管有多少回车和空格或者tab,都只显示一个空格，解决方法：1float:left，然后clearfix清除浮动，2display:flex

超出一行文本省略：

div{
      border:1px solid red;
      /*以下三行*/
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
复制代码

阻止父子上下margin合并的方法：1.父亲padding0.1或者儿子border0.1挡住，可以防止合并。2父亲overflow:hidden;
文档流：1.内联元素从左到右依次排列，如果空间不够，就换一行从左到右依次排列2.块级元素另起一行，从上到下占满整行。
脱离文档流的情况父元素div高度变小 float position:absolute position:fixed 注意: position:relative没有脱离文档流，只是相对于之前的位置定位，原来的地方还占据位置。
宽高固定居中套路： position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;
内联元素的padding 和margin只会影响宽度,但是不会影响高度，内联元素的高度只受line-height影响。

CSS4 icon：SVG

SVG：SVG其实是一段代码，浏览器可以解析这段代码，将它变成图形优点：可以渐变,不会失真,可以动

flex布局（css6）

我理解flex从两个方面去理解：

元素布局主轴和交叉轴，弹性元素永远沿主轴排列

/*容器上：*/
flex-direction/* 弹性元素按主轴排列的方向*/
flex-wrap/*nowrap | wrap | wrap-reverse，主轴排列不下，是否换行 。默认是nowrap不折行。不会溢出。元素的弹性伸缩*/
flex-flow/*上面两个的缩写*/

justify-content/* 主轴对齐方式，五个属性*/
align-items/* 单行交叉轴的元素对齐方式。默认stretch（元素未在交叉轴上设置尺寸，将把交叉轴自动填满，有flex-start，end，center，baseline几个属性）*/
align-content/*多行交叉轴的对齐方式。flex-wrap: wrap的时候。stretch（这几行在垂直方向上占满࿰
        let result = 异步操作()
 // 下面给出承诺，面对不同的结果，我会 执行 不同的解决方案
 if (result === 'success') 
     resolve('成功数据')
 else 
     reject('失败数据')
 })
}

// 异步操作，模拟概率事件
function 异步操作() {
    return Math.random() > 0.5 ? 'success' : 'fail'
}

// 你在dosomething

dosomething()
    // 异步操作成功了，那么我们打印成功的数据
    .then(res => console.log(res))
    //  异步操作失败了，那么我们打印失败的数据
    .catch(res => console.log(res))
复制代码

Sync:同步的意思 Async：异步的意思

MVC与模块化

传统模块化方法：

使用window

//module1.js
!function(){
    var person = window.person = {
        name:"frank",
    }
    //局部变量person和全局变量person用的是同一个地址
}.call()
复制代码

虽然不同变量,但是是同样的地址

//module2.js
!function(){
    var person = person;//即var person = window.person;
    console.log(person);
}.call();
复制代码

使用闭包

 //module1.js
!function(){
    var person = {
        name:"mataotao",
        age:18,
    };
    window.mataotaoGrowUp = function(){
        person.age+=1;
        return person.age;
    };
}.call();
复制代码

//module2.js
!function(){
    var newAge = window.mataotaoGrowUp();
    console.log(newAge);//19
}.call();
复制代码

用闭包的好处:

用来 隐藏数据细节 (不告诉你多少岁但是你可以让他涨一岁,隐藏了age 的细节和name)
可以用来 做访问控制 (只能访问到age,无法访问到name)

转载于:https://juejin.im/post/5c0f40fb5188255301746135

面试2