Giter Club home page Giter Club logo

dev-interview's People

Contributors

llqfront avatar

Watchers

avatar

dev-interview's Issues

大前端面试题整理

[大前端][MVX][React]: props接受任意参，那具体使用场景都有哪些？
[大前端][Javascript][Es6]: es6
[大前端][前端工程化][Webpack]: webpack
[大前端][前端模块化][Seajs]: esajs

[大前端][HTTP][浏览器]: 介绍一下强缓存和弱缓存

强缓存 Cache-Control/Expires

Cache-Control 相对时间出现于 HTTP / 1.1
Expires 绝对时间出现于 HTTP / 1.0
Cache-Control 优先级高于 Expires
Cache-Control取值规则：
　　public：所有内容都将被缓存（客户端和代理服务器都可缓存）
　　private：所有内容只有客户端可以缓存，Cache-Control的默认取值
　　no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
　　no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存　　
　　max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

弱缓存（协商缓存） ETag/Last-Modified

ETag 资源文件的唯一标识
Last-Modified 资源文件在服务器最后被修改的时间
ETag 优先级高于 Last-Modified
ETag 客户端会通过If-None-Match头将先前服务器端返回的Etag发送给服务器，服务器会对比这个客户端发过来的Etag是否与服务器的相同，若相同，就将If-None-Match的值设为false，返回状态304，客户端继续使用本地缓存，不解析服务器端发回来的数据。若不相同就将If-None-Match的值设为true，返回状态为200，客户端重新机械服务器端返回的数据；
Last-Modified 客户端还会通过If-Modified-Since头将先前服务器端发过来的最后修改时间戳发送给服务器，服务器端通过这个时间戳判断客户端的页面是否是最新的，如果不是最新的，则返回最新的内容，如果是最新的，则返回304，客户端继续使用本地缓存。

来源

[大前端][MVX][React]: state 修改的三种方式 

//直接赋值
1、this.setState({
    'a':'3'
})
//改变自身的值
2、this.setState((state,props)=>({
    a:state.a+1
}))
//对象合并形式
3、this.setState({
    obj:{
        ...this.state.obj,
        'a':'3'
    },
    obj:Object.assign({},this.state.obj,{'a':'3'})
})

[大前端][HTML+CSS][布局]: 布局方式，水平垂直居中的代码 

<div className="mxbox">
    <div className="mbox1">
        position:absolute<br/>
        left top<br/>
        right bottom 0<br/>
        margin auto<br/>
    </div>
</div>
<div className="mxbox">
    <div className="mbox2">
        position:absolute<br/>
        left top 50%<br/>
        asdfasdfa<br/>
        margin:-一半<br/>
    </div>
</div>
<div className="mxbox">
    <div className="mbox3">
        absolute<br/>
        left:50%;<br/>
        top:50%;<br/>
        transform:<br/>
        translate(-50%,-50%)<br/>
    </div>
</div>
<div className="mxbox">
    <div className="mbox4">
        flex<br/>
        margin:auto<br/>
        asdfasdfa<br/>
        asdfasdfa<br/>
    </div>
</div>
<div className="mxbox mobxnnnn">
    <div className="mbox5">
        父
        align-items:center;
        justify-content:center;
        子
        width:120px;
        background: red;
    </div>
</div>
.mxbox {
    width:500px;
    height:500px;
    border:1px solid red;
    display:flex;
    position: relative;
    margin:0 auto;
    div {
        font-size:14px;
    }
    .mbox1{
        color:#fff;
        width:120px;
        background: red;
        position: absolute;
        left:0;
        top:0;
        right:0;
        bottom:0;
        margin:auto;
    }
    .mbox2{
        color:#fff;
        width:120px;
        margin:auto;
        background: red;
        position: absolute;
        left:50%;
        top:50%;
        margin:0 -60px;
    }
    .mbox3{
        color:#fff;
        width:120px;
        margin:auto;
        background: red;
        position: absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }
    .mbox4{
        color:#fff;
        width:120px;
        margin:auto;
        background: red;
    }
    &.mobxnnnn{
        align-items:center;
        justify-content:center;
        .mbox5 {
            width:120px;
            background: red;
        }
    }
}

[大前端][性能优化][HTML5新特性]: requestAnimationframe

requestAnimationFrame特点

【1】requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，如果系统绘制率是 60Hz，那么回调函数就会16.7ms再 被执行一次，如果绘制频率是75Hz，那么这个间隔时间就变成了 1000/75=13.3ms。换句话说就是，requestAnimationFrame的执行步伐跟着系统的绘制频率走。它能保证回调函数在屏幕每一次的绘制间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

【2】在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量

【3】requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销

PS:这个一帧的执行频率是多久？答案是：与屏幕的刷新频率同步。

来源信息整理
来源信息整理2
来源信息整理3

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.