常见的面试题

[LiuL0703]

CSS

左边固定，右边自适应

<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>

1. position + margin-left

.box{ display: relative }
.left{ position: absolute; width:100px }
.right{ margin-left:100px }

2. flex

.box{display:flex;}
.left{width:100px; }
.right { flex:1;}

三栏布局【中间自适应，两边固定】

1. flex

<div class="container">
       <div class="left"></div>
       <div class="center"></div>
       <div class="right"></div>
 </div>

   .container { display: flex }
   .container>div { height: 200px }
   .left { width: 300px }
   .center { flex: 1 }
   .right { width: 300px }

2. float

    <div class="left"></div>
       <div class="right"></div>
       <div class="center"></div>
   </div>

.container>div{
    height: 200px;
}
.left { 
    float: left;
    width: 300px;
}
.right {
   float: right;
   width: 300px;
}
.center {
    overflow: hidden;
}

水平垂直居中

<div></div>

1. absolute+负margin【知道元素宽高】

div { width:x;
        height: y;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-x/2px;
        margin-top:-y/2px;
}

2. absolute + margin auto【知道元素宽高】

div {
    width:x;
    height: y;
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

3. absolute + calc【知道元素宽高】

div {
    width:x;
    height: y;
    position: absolute;;
    top: calc(50% - x/2);
    left: calc(50% - y/2);
}

4. absolute + transform

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

5. flex

<div class="box">
    <div></div>
</div>

.box {
    display: flex;
    justify-content: center;
    align-items: center;
}

css中类叠加相同属性的取值

<div class="red blue">okokok</div>
<div class="blue red">okokok</div>

.blue { color: blue }
.red { color: red }

优先级是由类在css文件中定义的顺序决定
不管class中类名顺序如何改变都会展示css中靠后的样式

JavaScript

Prmoise 实现一个红绿灯

function green(){
    console.log('green');
}
function yellow(){
    console.log('yellow');
}
function red(){
    console.log('red');
}

function light(fn,delay){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
            fn();
            resolve();
        },delay);
    })
}

const start = function(){
    Promise.resolve()
      .then(()=>light(green,3000))
      .then(()=>light(yellow,2000))
      .then(()=>light(red,1000))
      .then(()=>start())
}

start()

利用async和promise实现一个sleep

function sleep(delay){
    return new Promise(resolve=>{
        setTimeout(resolve,delay);
    })
}

const fn = async _ =>{
    let pre = new Date()
    console.log(pre);
    await sleep(2000);
    let after = new Date();
    console.log(after - pre);
}

console.log('a');

async function async1 () {
    console.log('b');
    await async2();
    console.log('c');
}
async function async2(){
    console.log('d');
}

async1();

setTimeout(()=>{
    console.log('e');
})

new Promise((resolve)=>{
    console.log('f');
    resolve();
}).then(()=>{
    console.log('g');
})

console.log('h');

// a b d f h c g e 

[LiuL0703]

CSS

• BFC是什么，怎么创建一个BFC，可以用来解决什么问题
• position属性有哪些值，分别是相对于什么定位的
• rem,em的区别是什么，怎样选取标准值
• 盒模型
• 左边固定右边自适应
• 两边固定中间自适应
• 水平垂直居中
• 移动端的1px问题

JavaScript

• Promise的理解
• 利用Promise实现一个sleep*
• 利用Promise实现一个红绿灯*
• async await和Promise的区别
• EvenLoop
• this
• 为什么会跨域？什么是同源策略？怎么实现跨域
• ==和===的区别
• 数据类型有哪些？怎样判断？
• 怎样判断是数组
• 什么是类数组？怎样转化成数组？
• JS的深拷贝
• 数组去重，数组扁平化*
• 节流和防抖的区别，写一个防抖*
• call和apply及bind的区别
• 偏函数和柯里化
• 前端模块化的理解

React

• React的生命周期
• setState的异步同步
• HOC的理解
• shouldComponentUpdate的理解
• Virtual DOM怎么实现
• redux
• redux的中间件

NetWork

• 一次完整的HTTP请求是怎样的

• 浏览器输入一个url到展现出页面发生了什么

• HTTP状态码

• 301和302有什么区别

• 浏览器怎样控制缓存

• HTTP请求头中的referer和origin有什么区别

  HTTP Header中的Referer表示首部包含了当前请求页面的来源页面地址(url)，表示当前页面是通过此来源页面里的链接进入的，服务端一般使用Referer识别访问来源，可用于统计分析，优化缓存，防止盗链防止恶意请求等。Origin:用于标识请求来自哪个站点，仅指示服务器名称，不包含路径信息，跨域时携带。

• HTTP和HTTPS的区别

• XSS CRSF

• HTTP2.0

• WebSocket原理

Algorithm

• 把一个数转化为二进制数*
• 二分法*
• 二叉树的深度*
• 判断是不是平衡二叉树*
• 快排*
• 归并*
• 链表右移K位*

Other

• 性能优化的方法
• 怎样组织代码，怎么设计API
• 职业规划