字节跳动--面试

自我介绍

bfc

• BFC的触发条件
  1、根元素（）
  2、float值非none
  3、overflow值非visible
  4、display值为inline-block、table-cell、table-caption、flex、inline-flex
  5、position值为absolute、fixed
• BFC的特性
  1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
  2、计算BFC高度时浮动元素也参于计算（重点）
  3、BFC的区域不会与浮动容器发生重叠（重点）
  4、BFC内的容器在垂直方向依次排列
  5、元素的margin-left与其包含块的border-left相接触
  6、BFC是独立容器，容器内部元素不会影响容器外部元素

同步异步
同步，就是调用某个东西是，调用方得等待这个调用返回结果才能继续往后执行。异步，和同步相反 调用方不会理解得到结果，而是在调用发出后调用者可用继续执行后续操作，被调用者通过状体来通知调用者，或者通过回掉函数来处理这个调用

promise
1、接收两个函数作为参数，分别代表fulfilled（成功）和rejected（失败）
2、.then()返回一个新的Promise实例，所以它可以链式调用
3、当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行
4、状态响应函数可以返回新的promise，或其他值，不返回值也可以我们可以认为它返回了一个null；
5、如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行
6、如果返回其他任何值，则会立即执行下一级.then()

判断数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)

array用什么判断

• Object.prototype.toString.call(obj) === “[object Array]”
• arr instanceof Array //true
• Array.isArray(arr)

用promise实现promise.all

function PromiseAll (arr) {
//PromiseAll的返回值为一个promise对象
	return new Promise((resolve, reject) => {
		let resArr = [];
		for(let i = 0; i < arr.length; i++) {
			Promise.resolve(arr[i]()).then(res => {
				resArr.push(res);
				//只有所有的都成功了，才会返回resolve
				if (i == arr.length - 1) {
					return resolve(resArr);
				}
			}, err => {
				return reject(err)
			}).catch(err => {
				console.log(err)
			})
		}
	})
}

遍历对象

• for in
• Object.keys()
• Object.Values()
  css3的动画效果

http缓存

• 协商缓存
  协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，有服务器根据缓存标识决定是否使用缓存的过程
  1.协商缓存生效，返回304，服务器告诉浏览器资源未更新，则再去浏览器缓存中访问资 源
  2.协商缓存失效，返回200和请求结果
  Last-Modified/If-Modified-Since
  Etag/If-None-Match（优先级高）

• 强制缓存
  强制缓存就是直接从浏览器缓存查找该结果，并根据结果的缓存规则来决定是否使用该缓存的过程。
  控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。
  Expires：
  使用客户端的时间和服务端返回的时间做对比，那么如果客户端与服务端的时间因为某些原因（例如时区）发送误差，那么强制缓存则会直接失效。
  Cache-Control：
  public：所有内容都将被缓存（客户端/代理服务器/CDN等）
  private：只有客户端可以缓存，Cache-Control默认值
  no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
  no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
  max-age=xxx：缓存将在xxx秒后失效

element.addEventListener(event, function, useCapture)
useCapture:true(捕获)；false（冒泡）

localStorage、cookie、sessionStorage的区别

二面：
拿出数组里对象的某个属性是数字的，排序输出

var str=[
    {name:"a",age:50},
    {name:"b",age:20},
    {name:"c",age:40},
    {name:"d",age:30},
];
function compare(key){
    return function(value1,value2){
        var val1=value1[key];
        var val2=value2[key];
        return val1-val2;
    }
}
str.sort(compare('age'));
console.log(str);

v-modal的实现原理

css写到上面js写到下面的原因

    <input @input="handleInput" />
    <div>
        实时监听: {{ message }}
    </div>

        data(){
            return {
                message:""
            }
        },
        methods:{
            handleInput(event){
                this.message = event.target.value
            }
        }

css放上面js放下面的原因

把CSS放头部，script放下方的原因
CSS放头部
在加载html生成DOM tree的时候，就可以同时对DOM tree进行渲染。
这样可以防止闪跳，白屏或者布局混乱。

javascript放在后面
javascript可能会改变DOM tree的结构，所以需要一个稳定的DOM tree。
javascript加载后会立即执行，同时会阻塞后面的资源加载。（javascript加载和执行的特点）

http状态码：
200 OK 服务器成功处理了请求（这个是我们见到最多的）
301/302 Moved Permanently（重定向）请求的URL已移走。Response中应该包含一个Location URL, 说明资源现在所处的位置
304 Not Modified（未修改）客户的缓存资源是最新的， 要客户端使用缓存

js怎么解决缓存的问题

给js文件加版本号

ver = n，n代表版本号
给URL加随机数，即欺骗浏览器达到防止缓存的目的。
https://路径?v=’ + parseInt(Math.random()*1000000000)

在浏览器端关闭缓存（自己用）