【前端面试3+1】06继承方式及优缺点、缓存策略、url输入到渲染全过程

最新推荐文章于 2024-09-13 10:46:15 发布

2401_84434331

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量652

点赞数 11

文章标签：前端面试缓存

本文链接：https://blog.csdn.net/2401_84434331/article/details/138237916

版权

1.原型链继承：

实现方式：将子类的原型指向父类的实例来实现继承。
优点：简单易懂，代码量少。
缺点：存在引用类型共享的问题。
function Parent() {
    this.name = 'Parent';
}

Parent.prototype.sayHello = function() {
    console.log('Hello from Parent');
}

function Child() {
    this.age = 10;
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child = new Child();
2.构造函数继承：

实现方式：在子类构造函数中调用父类构造函数，通过apply或call方法继承父类属性。
优点：避免了引用类型共享的问题。
缺点：无法继承父类原型链上的方法
function Parent(name) {
    this.name = name;
}

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

var child = new Child('Child', 10);
3.组合继承：

实现方式：结合原型链继承和构造函数继承的方式。
优点：兼具原型链继承和构造函数继承的优点。
缺点：调用了两次父类构造函数，存在父类属性重复的问题。
function Parent(name) {
    this.name = name;
}

Parent.prototype.sayHello = function() {
    console.log('Hello from Parent');
}

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child = new Child('Child', 10);
4.原型式继承：

实现方式：通过一个空函数作为中介，将一个对象作为另一个对象的原型。
优点：简单易用。
缺点：存在引用类型共享的问题。
var parent = {
    name: 'Parent',
    sayHello: function() {
        console.log('Hello from Parent');
    }
};

var child = Object.create(parent);
child.age = 10;
5.寄生式继承：

实现方式：在原型式继承的基础上，在函数内部增强对象，返回新对象。
优点：可以对对象进行增强。
缺点：存在引用类型共享的问题。
function createChild(parent) {
    var child = Object.create(parent);
    child.age = 10;
    return child;
}

var parent = {
    name: 'Parent',
    sayHello: function() {
        console.log('Hello from Parent');
    }
};

var child = createChild(parent);
6.组合式继承：

实现方式：组合使用构造函数继承和寄生式继承。
优点：避免了父类构造函数被调用两次的问题。
缺点：相对复杂。
function Parent(name) {
    this.name = name;
}

Parent.prototype.sayHello = function() {
    console.log('Hello from Parent');
}

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

var child = new Child('Child', 10);

二、缓存策略有哪些？

1.浏览器缓存

*（1**）**强缓存：

通过设置响应头中的Cache-Control和Expires字段来控制缓存策略，使浏览器直接从本地缓存获取资源，不发送请求到服务器。

*（2）协商缓存：

通过设置响应头中的Last-Modified和ETag字段来控制缓存策略，当资源过期时，浏览器发送请求到服务器验证资源是否有更新，如果未更新则返回304状态码，浏览器使用本地缓存。

**2.**CDN缓存：

CDN（内容分发网络）可以缓存静态资源，加速资源加载速度。CDN节点会根据资源的URL来判断是否命中缓存，如果命中则直接返回缓存的资源，减少请求到源服务器的次数。

3.Service Worker缓存：

·Service Worker是浏览器中的一种脚本，可以拦截和处理网络请求。开发者可以通过Service Worker来实现自定义的缓存策略，例如将请求结果缓存到IndexedDB或Cache Storage中，实现离线访问和更灵活的缓存控制。

4.内存缓存：

在前端开发中，可以使用内存缓存来存储一些临时数据，例如在页面间传递数据或存储一些频繁使用的数据，以提高访问速度。

5.HTTP缓存控制：

通过设置HTTP响应头中的Cache-Control、Expires、Pragma、ETag、Last-Modified等字段，可以控制浏览器和代理服务器的缓存行为，从而优化资源加载速度。

6.数据库缓存：

对于需要频繁读取的数据，可以将其缓存到本地数据库（如IndexedDB、WebSQL等）中，减少对服务器的请求，提高数据加载速度。

三、url输入到渲染全过程

1.URL解析：

当用户在浏览器地址栏输入URL时，浏览器会对URL进行解析，包括解析协议、域名、端口号、路径等信息。

2.DNS解析：

浏览器需要将域名解析为对应的IP地址，以便向服务器发送请求。如果在本地缓存中找不到对应的IP地址，浏览器会向DNS服务器发送请求进行解析。

3.建立TCP连接：

浏览器通过TCP协议与服务器建立连接，包括三次握手的过程。