字节面试题(day6)

[robbiemie]

1. 除了 localStorage 还有哪些缓存

• cookie
  • 如果不设置有效期，生命周期是会话级别的，如果设置有效期，那么数据会保留在磁盘上，有效期过后，就会清空
  • cookie 每次都会被请求带上，发送给服务端
  • 大小 4kb
• localStorage
  • 所有同源的标签页共享之间数据
  • 重启浏览器之后，重新进入页面还是会存在，生命周期是永久的
  • 更新可以通过 storage 事件监听
  • 大小 5mb
• sessionStorage
  • 仅限于当前标签页中使用
  • 刷新页面后，数据仍然保留；重启浏览器之后，数据清空
  • 更新可以通过 storage 事件监听
  • 大小 5mb
• indexDB
• webSQL

2. Servicework

Serviceworker 是一个在指定资源路径下的事件驱动 worker 线程。主要的目的
就是要控制页面，拦截并修改访问和资源请求。

serviceworker 不能访问 DOM，他有自己独立的上下文环境 seft，它运行在其他线程中，因此，不能阻塞主进程的执行。

• isntalling
• isntalled
• activating
• activated

其他使用场景

• 离线缓存
• 后台数据同步
• 响应来自其它源的资源请求
• 运行计算量大的操作，比如地理位置信息等

3. 都有哪些场景会触发跨域问题

• 由 xhr 或者 fetch 发起的跨站请求
• web font 使用跨站字体
• 在 canvas 中使用 drawImage 方法

4. 如何计算请求耗时

• navigation
• redirect
• domainLookUp
• connect
• request
• response
• domLoading
• domInterative
• domContentLoadedEvent
• domComplete

requestTime = window.performance.timing.responseEnd - window.performance.timing.requestStart

[robbiemie]

/**
 * 头条
 */
var length = 10;
function fn() {
console.log(this.length)
};
var obj = {
length: 5,
method: function (fn) {
    fn();
    arguments[0]();
    fn.call(obj, 12);
}
};
obj.method(fn, 1);

[robbiemie]

// ; 能不能实现 Primise.allSettled，解决这个文档，无论是正常请求还是异常请求都能被 resolve 返回；

Promise.prototype.allSettled = function (...args) {
    let arr = []
    const promise =  new Promise(resolve => {
        args.forEach((promise,index) => {
            promise.then(res => {
                arr[index] = ({
                    code: 0,
                    data: res
                })
            }).catch(error=> {
                arr[index] = ({
                    code: -1,
                    error
                })
            }).finally(_ => {
                if(arr.length === args.length) {
                    resolve(arr)
                }
            })
        })
    })
    return promise
}

[robbiemie]

const template = "My name is ${name}, I`m from ${city}"

function print(template, obj) {
    /**
     * $0: match 匹配的字段
     * $1: 捕获的结果
     */
    return template.replace(/\${(\w+)}/g, ($0, $1) => {
        console.log($0, $1)
        return obj[$1]
    })
}

const result = print(template, {
    name: 'haha',
    city: 'BeiJing'
})

console.log(result) // My name is hah, I`m from BeiJing

[robbiemie]

// 头条
// sum(1, 2, 3).sumOf(); //6
// sum(2, 3)(2).sumOf(); //7
// sum(1)(2)(3)(4).sumOf(); //10
// sum(2)(4, 1)(2).sumOf(); //9

function sum() {
    let args = Array.from(arguments)
    const fn = function () {
        args = args.concat(Array.from(arguments))
        return fn
    }
    fn.sumOf = () => {
        // 求和函数
        return args.reduce((prev,cur) => {
            return prev + cur
        })
    }

    return fn
}

console.log(sum(1,2,3).sumOf())
console.log(sum(2,3)(2).sumOf())
console.log(sum(1)(2)(3)(4).sumOf())
console.log(sum(2)(4,1)(2).sumOf())

[janceChun]

/**
 * 头条
 */
var length = 10;
function fn() {
console.log(this.length)
};
var obj = {
length: 5,
method: function (fn) {
    fn();
    arguments[0]();
    fn.call(obj, 12);
}
};
obj.method(fn, 1);

输出 10 2 5.

1. 函数在全局作用域中被调用时，this指向全局对象
2. arguments对象调用函数时，this指向arguments对象
3. call方法将this指向了obj对象

参考原理： 执行上下文栈