面试题5

聊了
75 阅读9分钟

浏览器输入url到页面展示出来的全过程

基本流程：

1.用户再浏览器中输入url地址
2.浏览器解析域名得到服务器ip地址
浏览器会首先从缓存中找到是否存在域名，如果存在就直接取出对应得ip地址，如果没有就开启一个DNS域名解析器。
DNS域名解析器会首先访问顶级域名服务器，将对应得ip发给客户端；然后访问根域名解析器，将对应的ip发给客户端；然后访问根域名解析器，将对应的ip发给客户端；
最后访问本地域名服务器，得到最终的ip地址。

3、TCP三次握手建立客户端和服务器的连接

因为HTTP是基于TCP的可靠传输，所以在发送http数据报之前，需要先进行TCP的三次握手建立连接。三次握手过程如下：

第一次握手：客户端--->服务端 ack=1,seq=x（x随机生成）

第二次握手：服务端--->客户端 ACK=1,ack=x+1,seq=y（y随机生成）

第三次握手：客户端--->服务端 ACK=1,ack=y+1,seq=x+1

完成第三次握手时，实际上客户端已经与服务器建立了连接，所以第三次握手的报文已经可以携带数据了。 4、客户端发送HTTP请求获取服务器端的静态资源

5、服务器发送HTTP响应报文给客户端，客户端获取到页面静态资源

6、TCP四次挥手关闭客户端和服务器的连接

数据传输完毕后，TCP会进行四次挥手断开连接，释放资源。四次挥手过程如下：

第一次挥手：客户端--->服务器 FIN=1,ack=1,seq=u 客户端状态变为FIN_WAIT_1

第二次挥手：服务器--->客户端 ACK=1,ack=u+1,seq=v 服务器状态变为CLOSE_WAIT，TCP进入半关闭状态

第三次挥手：服务器--->客户端 FIN=1,ACK=1,ack=u+1,seq=w 服务器状态变为LAST_ACK

第四次挥手：客户端--->服务器 ACK=1,ack=w+1,seq=u+1 客户端状态变为TIME_WAIT，此时TCP未释放，需要等待计时器计时完成后，客户端状态变为CLOSED

7、浏览器解析文档资源并渲染页面

浏览器解析文档资源并渲染页面流程：

（1）解析html资源，构建DOM Tree

（2）解析css资源，构建CSS Rule Tree

（3）JS通过DOM API和CSS OM API来操作DOM Tree和CSS Tree

（4）解析完成后综合DOM Tree和CSS Tree会生成Render Tree，计算每个元素的位置，这个过程就是回流（layout or reflow）

（5）调用操作系统Native GUI的绘制

（6）页面绘制完成

涉及到的其他知识点： 1、Render Tree的生成

DOM Tree和CSS Tree结合会生成Render Tree，是由可视化元素按照其顺序生成的树形结构，非可视化元素是不会出现到渲染树中的。

非可视化元素：head、display：none；（注意：visibility：hidden的元素会出现在渲染树中）

2、回流和重绘

回流（reflow，也叫重排、布局）：某部分的变化影响了布局，浏览器需要重新渲染。（如元素大小、位置的改变）

重绘（repaint）：元素的某一部分发生改变，尺寸、位置没有改变。（字体颜色、背景颜色的改变）

引起回流的几个主要原因：

（1）网页初始化

（2）JS操作DOM树（增加、删除元素等）

（3）某些元素的尺寸改变

（4）CSS属性的改变

浏览器的“dirty”系统：

为了避免页面细小的改变就引起回流和重绘，“dirty”系统会将这些改变操作积攒一批再进行操作，这又叫异步reflow或者增量异步reflow。有些特殊情况不会这么做：resize窗口、改变了页面默认的字体等，这些操作会直接触发回流。

编写代码时如何减少回流和重绘：

（1）修改样式不要逐条修改，定义CSS样式的class，直接修改元素的className

（2）不要将DOM节点的属性值放在循环中当成循环的变量

（3）为动画的HTML元素使用fixed或absolute的position属性，修改它们的CSS就不会触发reflow

（4）把DOM离线后修改，设置display：none或者clone元素到内存中，修改完成再显示回页面

（5）不要使用table布局，一个微小的改变就可能引起整个table的重新布局

3、性能优化

（1）提升HTML的加载速度

  • 页面精简，删除不必要的内容，将内嵌的JS和CSS移至外部文件，使用压缩工具等

  • 减少文件数量，合并文件，减少请求次数

  • 减少域名查询，外部引入的资源尽量少使用不同的域名

  • 使用缓存，重用数据

  • 优化页面元素的加载顺序

  • 使用合法的标签

  • 根据浏览器类型选择合适的策略

（2）编写合理的CSS

  • DOM的深度尽量浅

  • 使用合法的CSS属性

  • 不要为ID选择器指定类名或标签名

  • 避免使用后代选择器，尽量使用子选择器

  • 避免使用通配符

（3）关于JS标签

js标签的加载和执行特点：载入后立即执行，执行时会阻塞页面后续内容

  • 将所有的js标签放在页面底部，保证脚本执行前已完成DOM渲染

  • 尽可能合并脚本

  • 减少内联js的使用

  • 注意多个js标签的引入顺序

  • 使用defer属性，该属性可以使脚本在文档完全呈现以后再执行

  • 使用async属性，可以使当前脚本不必等待其他脚本的执行，也不必阻塞文档的呈现

能说下promise实现异步原理？

// 声明状态
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class MyPromise {
    constructor(executor) {
        // executor执行器，进入会立即执行
        executor(this.resolve, this.reject)
    }
    // 初始状态
    state = PENDING;
    // 存储异步回调
    fulfilledCallBack = null;
    rejectedCallBack = null;

    // 成功之后的值
    value = null;
    // 失败的原因
    reason = null;

    // 成功回调
    resolve = (value) => {
        console.log('execute resolve function');
        if(this.state === PENDING) {
            this.state = FULFILLED;
            this.value = value;
            // 是否有回调可执行
            this.fulfilledCallBack && this.fulfilledCallBack(value);
        }
    }
    // 拒绝回调
    reject = (reason) => {
        if(this.state === PENDING) {
            this.state = REJECTED;
            this.reason = reason;
            this.rejectedCallBack && this.rejectedCallBack(reason);
        }
    }
    then(onFulfilled, onRejected) {
        if(this.state === FULFILLED) {
            onFulfilled(this.value);
        }else if(this.state === REJECTED) {
            onRejected(this.reason);
        }else if(this.state === PENDING) {
            // 存储回调
            this.fulfilledCallBack = onFulfilled;
            this.rejectedCallBack = onRejected;
        }
    }
}

new Promise((resolve, reject) => {resolve();...})
.then(successCB, failedCB)

所以constructor会需要接收一个函数，参数就是resolve和reject回调。

我们来测试下效果：

new MyPromise((resolve, reject) => {
    console.log('in promise', new Date().getTime());
    setTimeout(() => {
        resolve('3s 之后执行结果');
    }, 3000)
}).then(res => console.log(res, new Date().getTime()));

根据打印结果，我进一步理解到 Promise 是在 异步方法（这里是settimeout模拟的） 执行完之后才调用的resolve方法，这不就是我们在ES6之前常用的回调吗？

多次执行then方法

我们知道Promise后面可以跟多个then方法，为此，我们需要把多个then回调用 队列（先进先出） 的思想存储起来，当resolve回调触发之后，依次从 队列 里面取出回调并执行。

注意javascript里面并没有队列这种数据结构，我们可以通过数组的方法模拟实现。

// 状态
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class MyPromise {
    constructor(executor) {
        // executor执行器，进入会立即执行
        executor(this.resolve, this.reject)
    }
    // 初始状态
    state = PENDING;
    // 存储异步回调
    fulfilledCallBacks = [];
    rejectedCallBacks = [];

    // 成功之后的值
    value = null;
    // 失败的原因
    reason = null;

    // 成功回调
    resolve = (value) => {
        if(this.state === PENDING) {
            this.state = FULFILLED;
            this.value = value;
            // 是否有回调可执行
            while(this.fulfilledCallBacks.length) this.fulfilledCallBacks.shift()(value);
        }
    }
    // 拒绝回调
    reject = (reason) => {
        if(this.state === PENDING) {
            this.state = REJECTED;
            this.reason = reason;
            while(this.rejectedCallBacks.length) this.rejectedCallBacks.shift()(reason); 
        }
    }
    then(onFulfilled, onRejected) {
        console.log("this.state", this.state);
        if(this.state === FULFILLED) {
            onFulfilled(this.value);
        }else if(this.state === REJECTED) {
            onRejected(this.reason);
        }else if(this.state === PENDING) {
            // 存储回调
            this.fulfilledCallBacks.push(onFulfilled);
            this.rejectedCallBacks.push(onRejected);
        }
    }
}


const promise = new MyPromise((resolve, reject) => {
    console.log("in promise", new Date().getTime());
    setTimeout(() => {
        resolve(2);
    }, 3000);
})
promise.then(res => {
    console.log('first', res);
})
promise.then(res => {
    console.log('second', res);
});
promise.then(res => {
    console.log('third', res);
});

链式调用

  • then 方法要链式调用那么就需要返回一个 Promise 对象
  • then 方法里面 return 一个返回值作为下一个 then 方法的参数，如果是 return 一个 Promise 对象，那么就需要判断它的状态

我们在原来的基础上进行修改

// 状态
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

class MyPromise {
    constructor(executor) {
        // executor执行器，进入会立即执行
        executor(this.resolve, this.reject);
    }
    // 初始状态
    state = PENDING;
    // 存储异步回调
    fulfilledCallBacks = [];
    rejectedCallBacks = [];

    // 成功之后的值
    value = null;
    // 失败的原因
    reason = null;

    // 成功回调
    resolve = value => {
        if (this.state === PENDING) {
            this.state = FULFILLED;
            this.value = value;
            // 是否有回调可执行
            while (this.fulfilledCallBacks.length) {
                this.fulfilledCallBacks.shift()(value);
            }
        }
    };
    // 拒绝回调
    reject = reason => {
        if (this.state === PENDING) {
            this.state = REJECTED;
            this.reason = reason;
            while (this.rejectedCallBacks.length) this.rejectedCallBacks.shift()(reason);
        }
    };
    then(onFulfilled, onRejected) {
        const promise2 = new MyPromise((resolve, reject) => {
            // 成功
            const resolveMicrotask = () => {
                // 避免循环调用
                // 这里有个问题，promise2这里其实是拿不到的，因为promise2还没有完成初始化
                // 这里需要用创建一个微任务，在微任务里面调用到的就是初始化完成的promise2。
                // 我们用 queueMicrotask 创建微任务
                queueMicrotask(() => {
                    // then执行阶段错误捕获
                    try {
                        const x = onFulfilled(this.value);
                        this.resolvePromise(x, promise2, resolve, reject);
                    } catch (err) {
                        reject(err);
                    }
                });
            };
            // 失败
            const rejectMicrotask = () => {
                queueMicrotask(() => {
                    try {
                        const x = onRejected(this.reason);
                        this.resolvePromise(x, promise2, resolve, reject);
                    } catch (err) {
                        reject(err);
                    }
                });
            };

            if (this.state === FULFILLED) resolveMicrotask();
            else if (this.state === REJECTED) rejectMicrotask();
            else if (this.state === PENDING) {
                // 存储回调
                this.fulfilledCallBacks.push(resolveMicrotask);
                this.rejectedCallBacks.push(rejectMicrotask);
            }
        });
        return promise2;
    }
    resolvePromise(x, self, resolve, reject) {
        // 不能返回自身（循环调用）
        if (x === self) {
            return reject(new TypeError("The promise and the return value are the same"));
        }
        // 如果返回一个Promise对象，调用其then方法
        if (x instanceof MyPromise) {
            x.then(resolve, reject);
        } else {
            // 直接返回X
            resolve(x);
        }
    }
}


const promise = new MyPromise((resolve, reject) => {
    // 目前这里只处理同步的问题
    setTimeout(() => {
        resolve(2);
    }, 1000);
});

promise
    .then(value => {
        console.log(1);
        console.log("resolve", value);
        return value * 2;
    })
    .then(value => {
        console.log(2);
        console.log("resolve", value);
        return ++value;
    })
    .then(value => {
        console.log(3);
        console.log("resolve", value);
        // return value;
    });

链式调用的核心就是每次then都返回一个promise, 将then里的回调包装成promise,，依次执行resolve方法。

Promise A+ 规范

Promise 有多种规范，除了 Promise A、promise A+ 还有 Promise/B，Promise/D。

目前我们使用的 Promise 是基于 Promise A+ 规范实现的，感兴趣的移步 Promise A+ 规范了解一下。

检验一份手写 Promise 靠不靠谱，通过 Promise A+ 规范是基本要求，这里我们可以借助 promises-aplus-tests 来检测我们的代码是否符合规范。

  1. 安装一下 npm install promises-aplus-tests -D
  2. 手写代码中加入 deferred

MyPromise {
  ......
}

MyPromise.deferred = function () {
  var result = {};
  result.promise = new MyPromise(function (resolve, reject) {
    result.resolve = resolve;
    result.reject = reject;
  });

  return result;
}
module.exports = MyPromise;


{
 "name": "promise",
 "version": "1.0.0",
 "description": "my promise",
 "main": "MyPromise.js",
 "scripts": {
   "test": "promises-aplus-tests MyPromise"
 },
 "author": "ITEM",
 "license": "ISC",
 "devDependencies": {
   "promises-aplus-tests": "^2.1.2"
 }
}

image.png

avatar
文章
阅读
粉丝