字节面经-1

Posted 2021-03-05 zhoujingye

1. 讲讲child1,child2的变化，为什么？
<div>
div class=‘child1‘
div class=‘child2‘
div class=‘child3‘
</div>
.child2 {
transform: translateY(200px)
}

transform提升元素的垂直地位？
并排两个元素，第二个元素margin设为负值时，后面元素会覆盖前面，当给前面元素添加transform属性时，第一个元素就不会被覆盖，相当于添加了position:relative属性，相对于正常位置进行定位，定位的元素任占据文档空间。

2.实现一个三角形
用canvas画

3.typeof [] 和 typeof {} 结果是?为什么？
object
typeof{} 返回object
typeof[] 返回object
typeof不能判断null和array,返回都是object（null是一个空的对象引用）,因为JS中所有数据类型其实都是对象，typeof能判断对象,返回的也是object对象

4.怎么区分数组和对象
① instanceof Array
② 将该变量转化为代表其类型的String
Object.prototype.toString.call([]) [object Array]
Object.prototype.toString.call({}) [object Object]
③ Array.isArray(arr/obj) true/false
④ constructor属性判断
arr.constructor Array()
obj.constructor Ojbect()

5.讲讲输出了什么，为什么？ 复习原型链
bbb,aaa
Object.prototype.a = ‘aaa‘
Function.prototype.a = ‘bbb‘
function fn(){}
var child = new fn()
console.log(fn.a)
console.log(child.a)

6.说说输出了什么，为什么？
2431

setTimeout(function(){ //异步任务最后执行
console.log(1)
},0)
new Promise((resolve,reject) => { //初始化Promise状态为pending 它是同步的
console.log(2) //执行第一步操作
resolve()
}).then(function(){ //只有当异步任务回调完成后才执行then？
console.log(3)
})
console.log(4)

除了promise还有什么异步任务？
绑定监听，绑定的回调函数不执行，触发时才执行

7.为什么js加载用src,css加载用href?
一般加载css用href，放在头部；js用src，放在body下方
href表示超文本引用，用来建立当前元素和文档间的链接；css用href引用，浏览器会识别该文档的css并行下载，不会停止对当前文档的加载
src表示资源的引用，是页面不可缺少的一部分资源，src指向的内容会嵌入到文档中标签的位置，当用src引用js时，浏览器解析到该元素时会停止对文档的渲染，直到资源加载完毕

8.为什么第一次打开页面会慢，之后会快？
浏览器有缓存机制，可以从network观察资源的加载情况
第一次加载时：所有资源都要从服务器加载一遍
第二次加载时：因为浏览器有缓存,css js等资源都直接从缓存中获取
浏览器缓存有2种方式：
①.mate标签
-content-type 设置文档内容类型，字符集
-expires 设置网页到期期限
-pragma cache模式，是否从缓存中访问网页内容
-refresh 等待一定时间自动刷新或跳转到其他url
②.header头
浏览器会通过Response header信息来确认是否缓存，怎么缓存

去服务器获取资源时候存在两种缓存策略，分别为：
1. 强制缓存
浏览器加载资源时先判断头信息是否包含：Cache-control和Expires属性，Expires是http1.0，Cache-control是http 1.1,cache-control优先级更高；
Expires设置的是绝对时间，是个日期，响应时看expires字段，再次请求时查看缓存时间过了没有，如果没有过则从缓存拿出来，过了就重新请求；
Cache-control的值包含：
- max-age=xxx 将在多少秒后失效，相对时间
- public 所有内容将被缓存（客户端、代理服务器都可缓存）
- private 内容只缓存到私有缓存中（仅客户端可以）
- no-cache 必须先喝服务器确认返回的响应是否被更改，之后才能使用该响应满足后续请求，如果存在合适的验证令牌ETag,no-cache会发起往返通心验证缓存的响应，如果资源为被更改，可以避免下载
- no-store：所有内容都不会被缓存或 Internet 临时文件中
- must-revalidation/proxy-revalidation：如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证

2.协商缓存 last-modified和Etag
当判断浏览器不是强缓存，就会向服务器发送请求判断是否为协商缓存，如果是，服务器返回304 Not Modified,浏览器从缓存中加载
Last-Modified和If-Modified-Since字段：
- 浏览器初次向服务器发送请求，服务器返回资源并在response header加上last-modified字段，表示资源最后修改的时间
- 浏览器再次请求这个资源时，请求头会加上If-Modified-Since字段，如果两个字段一样，说明没被修改，返回304，浏览器从缓存中获取资源；如果字段不一样，则资源被修改过，服务器返回资源

Etag和If-None-Match字段：
如果服务器上资源变化，但是最后修改时间没更新
- 浏览器第一次想服务器请求，服务器返回资源并在response header加上ETag,表示资源本身，资源有变化，则ETag变化
- 浏览器再次向服务器请求这个资源时，请求头携带If-None-Match字段。若这两个字段相同，则代表资源没有变化，服务器返回304Not Modified，浏览器从缓存中加载。若两个字段不同，证明资源有变动，服务器正常返回资源

还知道其他缓存吗?
dns - 域名服务器
域名服务器会缓存域名

9.有用过node.js吗？

10.实现一个快排+优化（不用递归）
见数据结构总结

面经题目来源：牛客网 https://www.nowcoder.com/discuss/378967
自己答题