llqfront / dev-interview Goto Github PK
View Code? Open in Web Editor NEWDevelopment Interview Questions
License: MIT License
Development Interview Questions
License: MIT License
1、基础数组类型,复合数据类型
2、直接传递一组件
3、可以通过函数接受Html一个片段
4、props.children
5、{...obj}
6、callback 子传父
[大前端][MVX][React]: props接受任意参,那具体使用场景都有哪些?
[大前端][Javascript][Es6]: es6
[大前端][前端工程化][Webpack]: webpack
[大前端][前端模块化][Seajs]: esajs
1、基础数组类型,复合数据类型
2、直接传递一组件
3、可以通过函数接受Html一个片段
4、callback子传父
5、{...obj}
区别:
解决props一代传一代问题,context可以跨组件数据通信
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 客户端会通过If-None-Match头将先前服务器端返回的Etag发送给服务器,服务器会对比这个客户端发过来的Etag是否与服务器的相同,若相同,就将If-None-Match的值设为false,返回状态304,客户端继续使用本地缓存,不解析服务器端发回来的数据。若不相同就将If-None-Match的值设为true,返回状态为200,客户端重新机械服务器端返回的数据;
Last-Modified 客户端还会通过If-Modified-Since头将先前服务器端发过来的最后修改时间戳发送给服务器,服务器端通过这个时间戳判断客户端的页面是否是最新的,如果不是最新的,则返回最新的内容,如果是最新的,则返回304,客户端继续使用本地缓存。
//直接赋值
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'})
})
<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;
}
}
}
【1】requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,如果系统绘制率是 60Hz,那么回调函数就会16.7ms再 被执行一次,如果绘制频率是75Hz,那么这个间隔时间就变成了 1000/75=13.3ms。换句话说就是,requestAnimationFrame的执行步伐跟着系统的绘制频率走。它能保证回调函数在屏幕每一次的绘制间隔中只被执行一次,这样就不会引起丢帧现象,也不会导致动画出现卡顿的问题。
【2】在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的CPU、GPU和内存使用量
【3】requestAnimationFrame是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销
PS:这个一帧的执行频率是多久?答案是:与屏幕的刷新频率同步。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.