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

news2025/1/18 4:31:33

一、继承有哪些方式?以及优缺点

        继承的方式包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承和组合式继承

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-ControlExpires字段来控制缓存策略,使浏览器直接从本地缓存获取资源,不发送请求到服务器

*(2)协商缓存:

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

2.CDN缓存:

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

3.Service Worker缓存:

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

4.内存缓存:

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

5.HTTP缓存控制:

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

6.数据库缓存:

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

三、url输入到渲染全过程

1.URL解析

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

2.DNS解析

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

3.建立TCP连接

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

4.发送HTTP请求

        浏览器向服务器发送HTTP请求,请求资源文件(如HTML、CSS、JavaScript、图片等)。

5.服务器处理请求

        服务器接收到请求后,根据请求的资源类型和路径进行处理,可能需要读取数据库、执行后端代码等操作。

6.返回HTTP响应

        ·服务器将处理结果封装成HTTP响应返回给浏览器,响应包括状态码、响应头和响应体。

7.浏览器接收响应:

        浏览器接收到服务器返回的响应后,根据响应头中的信息进行处理,包括判断是否命中缓存、解析响应体等。

8.解析HTML

        浏览器解析HTML文件,构建DOM树。

9.加载资源:

        浏览器根据HTML中的链接和脚本标签,加载对应的CSS、JavaScript等资源文件。

10.构建渲染树

        浏览器将DOM树和CSS样式表结合起来,构建渲染树。

11.布局和绘制

        浏览器根据渲染树进行布局(计算元素的位置和大小)和绘制(绘制像素到屏幕上)。

12.页面渲染完成

        当所有资源加载完成、布局和绘制完成后,页面渲染完成,用户可以看到页面内容。

四、【算法】 二叉树中序遍历

1.题目:

给定一个二叉树的根节点 root ,返回 它的 中序 遍历 。

/**
 * Definition for a binary tree node.
 * struct TreeNode {
 *     int val;
 *     struct TreeNode *left;
 *     struct TreeNode *right;
 * };
 */
/**
 * Note: The returned array must be malloced, assume caller calls free().
 */
int* inorderTraversal(struct TreeNode* root, int* returnSize) {
    
}

2.解题:

        

        中序遍历的思路是先遍历左子树,然后访问根节点,最后遍历右子树。因此,我们可以通过递归的方式实现中序遍历:递归遍历左子树,访问当前节点,再递归遍历右子树。

        在实现函数时,我们可以先判断根节点是否为空,若为空则返回空数组;然后创建一个足够大的数组来存储遍历结果;接着定义一个辅助函数来进行递归中序遍历,并在每次访问节点时将节点的值存入数组;最后返回存储遍历结果的数组,并更新返回大小

/**
 * Definition for a binary tree node.
 * struct TreeNode {
 *     int val;
 *     struct TreeNode *left;
 *     struct TreeNode *right;
 * };
 */
/**
 * Note: The returned array must be malloced, assume caller calls free().
 */
 void inorder(struct TreeNode* root, int* result, int* index) {
    if (root == NULL) {
        return;
    }
    
    inorder(root->left, result, index);
    result[(*index)++] = root->val;
    inorder(root->right, result, index);
}

int* inorderTraversal(struct TreeNode* root, int* returnSize) {
    if (root == NULL) {
        *returnSize = 0;
        return NULL;
    }
    
    int* result = (int*)malloc(sizeof(int) * 1000); // 假设最多有1000个节点
    int index = 0;
    
    inorder(root, result, &index);
    
    *returnSize = index;
    return result;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1560030.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

整数删除,蓝桥杯训练题

题目描述: 给定一个长度为 N 的整数数列:A1,A2,…,AN。 你要重复以下操作 K 次: 每次选择数列中最小的整数(如果最小值不止一个,选择最靠前的),将其删除,并把与它相邻的整数加上被删除的数值。 …

精读 Generating Mammography Reports from Multi-view Mammograms with BERT

精读(非常推荐) Generating Mammography Reports from Multi-view Mammograms with BERT(上) 这里的作者有个叫 Ilya 的吓坏我了 1. Abstract Writing mammography reports can be errorprone and time-consuming for radiolog…

使用STM32 MCU模拟实现PPS+TOD授时信号

简介 PPSTOD是授时信号的一种,用来传递准确的时间信息。 PPS,Pulse Per Second,是每秒一次的脉冲信号,其上升沿表示整秒的时刻。TOD,Time of Day,是时间信息。是跟随在每个PPS信号后的由串口发出的一句报…

学浪如何录屏学浪解除录屏限制

买过学浪课程的都知道,学浪PC客户端会限制你录屏,可是我们在学习的过程中需要对某个画面进行截图保存,于是为了解决这个问题,我开发了小浪助手.exe,目的就是为了买学浪课程的人可以随时随地的解除录屏限制 工具我已经…

Linux是怎么发送一个网络包的?

目录 摘要 1 从 send 开始 2 传输层 3 网络层 4 网络接口层 4.1 邻居子系统 4.2 网络设备子系统 4.3 软中断发送剩余的 skb 4.4 硬中断又触发软中断 总结 摘要 一个网络包的发送,始于应用层,经层层协议栈的封装,终于网卡。今天来循…

Java_21 完成一半题目

完成一半题目 有 N 位扣友参加了微软与力扣举办了「以扣会友」线下活动。主办方提供了 2*N 道题目,整型数组 questions 中每个数字对应了每道题目所涉及的知识点类型。 若每位扣友选择不同的一题,请返回被选的 N 道题目至少包含多少种知识点类型。 示例…

Acrobat Pro DC 2023 for Mac PDF编辑管理软件

Acrobat Pro DC 2023 for Mac是一款功能强大的PDF编辑和管理软件,旨在帮助用户轻松处理PDF文件。它提供了丰富的工具和功能,使用户可以创建、编辑、转换和注释PDF文件,以及填写和签署PDF表单。 软件下载:Acrobat Pro DC 2023 for …

机器学习全攻略:概念、流程、分类与行业应用案例集锦

目录 1.引言 2.从零开始认识机器学习:基本概念与重要术语 3.五步走:掌握机器学习项目执行的完整流程 3.1.问题定义与数据收集 3.2.数据预处理与特征工程 3.3.模型选择与训练 3.4.模型评估与优化 3.5.模型部署与监控 4.深入了解各类机器学习方法…

Monkey 和 TextMonkey ---- 论文阅读

文章目录 Monkey贡献方法增强输入分辨率多级描述生成多任务训练 实验局限结论 TextMonkey贡献方法移位窗口注意(Shifted Window Attention)图像重采样器(Image Resampler)Token Resampler位置相关任务(Position-Relate…

云计算探索-如何在服务器上配置RAID(附模拟器)

一,引言 RAID(Redundant Array of Independent Disks)是一种将多个物理硬盘组合成一个逻辑单元的技术,旨在提升数据存取速度、增大存储容量以及提高数据可靠性。在服务器环境中配置RAID尤其重要,它不仅能够应对高并发访…

实景三维技术:开启自然资源管理的新篇章

随着科技的不断进步,实景三维技术已经在多个领域得到了广泛的应用。而在自然资源管理领域,实景三维技术更是发挥着越来越重要的作用。本文将介绍实景三维在自然资源管理领域的应用,探讨其带来的优势和变革。一、什么是实景三维技术&#xff1…

MHA高可用-解决MySQL主从复制的单点问题

目录 一、MHA的介绍 1.什么是 MHA 2.MHA 的组成 2.1 MHA Node(数据节点) 2.2 MHA Manager(管理节点) 3.MHA 的特点 4. MHA工作原理总结如下: 二、搭建 MySQL MHA 实验环境 …

文献阅读:使用 CellChat 推理和分析细胞-细胞通信

文献介绍 「文献题目」 Inference and analysis of cell-cell communication using CellChat 「研究团队」 聂青(加利福尼亚大学欧文分校) 「发表时间」 2021-02-17 「发表期刊」 Nature Communications 「影响因子」 16.6 「DOI」 10.1038/s41467-0…

DevSecOps安全工具链介绍

目录 一、概述 二、安全工具链在平台中的定位 2.1 概述 2.2 分层定位 2.2.1 不同阶段的安全工具 2.2.2 安全工具金字塔 2.3 安全流水线集成概览 2.3.1 概述 2.3.2 标准流水线集成安全工具链概览图 三、安全工具链分类 3.1 概述 3.2 威胁建模类 3.2.1 威胁建模的概念…

47 vue 常见的几种模型视图不同步的问题

前言 这里主要是来看一下 关于 vue 中的一些场景下面 可能会出现 模型和视图 不同步更新的情况 然后 这种情况主要是 vue 中的对象 属性没有响应式的 setter, getter 然后 我们这里就来看一下 大多数的情况下的一个场景, 和一些处理方式 当然 处理方式主要是基于 Vue.set, …

53 v-bind 和 v-model 的实现和区别

前言 这个主要的来源是 偶尔的情况下 出现的问题 就比如是 el-select 中选择组件之后, 视图不回显, 然后 model 不更新等等 这个 其实就是 vue 中 视图 -> 模型 的数据同步, 我们通常意义上的处理一般是通过 模型 -> 数据 的数据同步, 比如 我们代码里面更新了 model.…

正多边形拓扑与泛函

(原创:Daode3056) 也许,关于“拓扑”,“泛函”几本书上的内容与实例都是大同小异,总是那么点内容,数学要开拓一些新领域与新内容才能满足不断发展的社会与工业各种需要。本文就以人工智能生成对…

鸿蒙OS开发实例:【ArkTS 实现MQTT协议】

介绍 MQTT是物联网中的一种协议,在HarmonyOS API9平台,解决方案以C库移植为实现方案。 遥遥领先的平台,使用MQTT怎能不遥遥领先呢! 新年快乐,本篇将带领你手把手实现HarmonyOS ArkTS语言的MQTT协议。 准备 阅读…

阿里云通用算力型u1云服务器配置性能评测及价格参考

阿里云服务器u1是通用算力型云服务器,CPU采用2.5 GHz主频的Intel(R) Xeon(R) Platinum处理器,ECS通用算力型u1云服务器不适用于游戏和高频交易等需要极致性能的应用场景及对业务性能一致性有强诉求的应用场景(比如业务HA场景主备机需要性能一致)&#xf…

如何使用极狐GitLab 自定义 Pages 根域名

本文作者:徐晓伟 GitLab 是一个全球知名的一体化 DevOps 平台,很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版,专门为中国程序员服务。可以一键式部署极狐GitLab。 本文主要讲述了极狐GitLab Pages …