字节跳动前端面经

一面

webpack 按需加载

通过import()异步引入

按需加载

二面

CommonJS 和 ES6 Module的区别

CommonJS 是被加载时运行，ESModule是编译时运行。
CommonJS 输出的是值的浅拷贝，ESModule输出值的引用
CommonJS 加载的是整个模块，ESModule可以单独加载其中的某个接口。
CommonJS this指向当前模块，ESModule this指向undefined。

三面

封装一个带超时处理的fetch请求

虽然大体知道要用Promise.race()来处理，但因为之前没用过fetch，所以脑袋突然麻痹，只能支支吾吾写一些片段。

考点：Promise.race()

Promise.race(iterable) 方法返回一个 Promise 实例，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。

引申：Promise.all()

Promise.all(iterable) 方法返回一个 Promise 实例， 此实例在 iterable 参数内所有的 promise 都完成(resolve)或参数不含 promise 时回调完成(resolve)；如果参数有一个promise失败(reject)，此实例回调失败(reject)。

实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
class NetUtil extends Component{
    static baseUrl = 'https://api.xxx.com/'
    static token = ''

    static fetch_request = function(url, method, params = ''){
        let header = {
            'Accpet': 'application/json',
            'Content-Type': 'application/json;charset=UTF-8',
            'accesstoken': NetUtil.token
        }

        static fetch_request = function(){
            let promise = null
            // 定义主要请求promise
            promise = new Promise((resovle, reject)=>{
                fetch(NetUtil.baseUrl+url, {method:method, header:header, params:params})
                .then(responds => responds.json())
                .then(res => resolve(res))
            })

            return NetUtil.warp_fetch(promise)
        }

        static warp_fetch(fetch_promise, timeout = 10000){
            let timeout_fn = null
            // 定义超时promise
            let timeout_promise = new Promise((resolve, reject) => {
                timeout_fn = function(){
                    reject('超时')
                }
            })

            // 计时
            setTimeout(timeout_fn,timeout)
            // 竞赛
            let wrap_promise = Promise.race([fetch_promise, timeout_promise])

            return wrap_promise
        }
    }

}

export default NetUtil

引申： 实现Promise.race()

1
2
3
4
5
Promise._race = (promises) => new Promise((resolve, reject)=>{
    promises.forEach(promise => {
        promise.then(resolve,reject)
    })
})

引申： 实现promise.all()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Promise._all() = (promises) => new Promise((resolve,reject) => {
    let count = 0;
    let values = []

    promises.forEach((promise, index) => {
        Promise.resolve(promise).then((data)=>{
            values[index] = data
            if(++count === promises.length){
                resolve(values)
            }
        },(err)=>{
            reject(err)
            return
        })
    })
})

谈谈Vue diff算法的优势

  1. 同层比较
  2. 两端比较

如何解决1px细线问题

移动端高清适配方案（解决图片模糊问题、1px细线问题）