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

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

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

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协议与服务器建立连接，包括三次握手的过程。

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;
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

linux 一些命令

linux 一些命令

文章目录 linux 一些命令fdisk 磁盘分区parted 分区文件系统mkfs 格式化文件系统fsck 修复文件系统 mount 挂载swap 交换分区清除linux缓存df du 命令raid 命令基本原理硬raid 和 软raid案例raid 10 故障修复，重启与卸载 lvm逻辑卷技术LVM的使用方式LVM 常见名词解析…
阅读更多...
wavedec2函数及使用

wavedec2函数及使用

在MATLAB中，进行小波分解及其逆运算是处理图像的一种常见方法，尤其适用于图像分析、压缩和去噪等场景。wavedec2函数可以对二维信号（例如图像）进行多级小波分解，而waverec2函数则用于进行相应的逆运算。以下是如何使用…
阅读更多...
【树状数组专题】【蓝桥杯备考训练】：数星星、动态求连续区间和、一个简单的整数问题、一个简单的整数问题2【已更新完成】

【树状数组专题】【蓝桥杯备考训练】：数星星、动态求连续区间和、一个简单的整数问题、一个简单的整数问题2【已更新完成】

目录 1、数星星（《信息学奥赛一本通》 & ural 1028） 思路： 基本思路： 树状数组经典三函数： 1、lowbit()函数 2、query()函数 3、add()函数 最终代码： 2、动态求连续区间和（《信息学奥赛一本…
阅读更多...
笔记本三屏异显方案——更新中，是否能够在FPGA上实现，淘宝购物的价格太贵

笔记本三屏异显方案——更新中，是否能够在FPGA上实现，淘宝购物的价格太贵

三屏是（笔记本电脑屏幕，两个显示器屏幕），异显是采用屏幕的扩展功能，这样能够左边看视频文章，右边control cv代码。 一、 电脑有一个HDMI口的时候，只需要买一个TypeC（雷电接口&#x…
阅读更多...
ruoyi-nbcio-plus基于vue3的flowable任务监听器的升级修改

ruoyi-nbcio-plus基于vue3的flowable任务监听器的升级修改

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio 演示地址：RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a…
阅读更多...
基于Springboot点餐平台网站

基于Springboot点餐平台网站

采用技术 基于Springboot点餐平台网站的设计与实现~ 开发语言：Java 数据库：MySQL 技术：SpringBootMyBatis 工具：IDEA/Ecilpse、Navicat、Maven 页面展示效果 菜品评价管理 订单管理 前台首页 管理员登录 用户管理 菜品分…
阅读更多...
MATLAB小波包分解及逆向操作

MATLAB小波包分解及逆向操作

MATLAB代码 % 载入图像 grayImg imread(lena256.bmp); % 替换为你的图像路径% 选择小波函数和分解级别 waveletFunction db1; level 2;% 执行WPT正向分解 wp wpdec2(double(grayImg), level, waveletFunction);% 从小波包分解中重建图像（逆向运算） r…
阅读更多...
【数字IC/FPGA】手撕代码：模3检测器(判断输入序列能否被3整除)

【数字IC/FPGA】手撕代码：模3检测器(判断输入序列能否被3整除)

今天我们来手撕一个常见的笔试题，使用的方法是三段式Moore状态机。 题目描述： 输入端口是串行的1bit数据，每个时钟周期进来一位新数据后，实时检查当前序列是否能整除3，若能则输出1，否则输出0。 例如&#…
阅读更多...
webpack搭建开发环境

webpack搭建开发环境

webpack搭建开发环境 一.webpack开发模式二.webpack打包模式三.webpack打包模式应用四.Webpack 前端注入环境变量五.Webpack 开发环境调错 source map六. Webpack 设置解析别名路径七.优化-CDN的使用八.多页面打包九.优化-分割公共代码一.webpack开发模式 作用：启动 Web 服务…
阅读更多...
亮数据，可视化数据采集强大利器

亮数据，可视化数据采集强大利器

前言 随着信息技术的飞速发展，我们已经进入了一个以数据为中心的世纪。在这个时代，数据不仅仅是信息的载体，它已经成为了推动社会进步、创新科技、增强决策和驱动经济增长的关键资源。 在这个数据世纪中，掌握数据的能力等同于掌…
阅读更多...
[计算机效率] 文件对比工具：Beyond Compare 4

[计算机效率] 文件对比工具：Beyond Compare 4

3.10 文件对比工具：Beyond Compare 4 Beyond Compare 4是一款功能强大的文件和文件夹比较工具，它能够帮助用户在不同系统或版本之间快速比较和同步文件和文件夹。以下是Beyond Compare 4软件的一些主要特点： 文件和文件夹比较：Be…
阅读更多...
普发Pfeiffer 真空TCP120-TCP380-TCP035-TCP600 使用手侧

普发Pfeiffer 真空TCP120-TCP380-TCP035-TCP600 使用手侧

普发Pfeiffer 真空TCP120-TCP380-TCP035-TCP600 使用手侧
阅读更多...
MultiPath HTTP：北大与华为合作部署FLEETY

MultiPath HTTP：北大与华为合作部署FLEETY

当前的终端基本都能支持蜂窝网络和wifi网络，然而，不同的网络通路都不可避免的会出现信号不好或者其他因素引起的通路性能(吞吐量、时延等)下降。为了能够提升终端业务体验，很多不同的MultiPath方案被提出，其中，包括应用…
阅读更多...
程序运行要求，三角形三边的值来自于本地一个文本文件input.txt，三角形类型的值最终存储于本地文本文件out.txt中。

程序运行要求，三角形三边的值来自于本地一个文本文件input.txt，三角形类型的值最终存储于本地文本文件out.txt中。

本周完成如下2个实验： 面向对象数据持久化编程，使用java编写程序，完成三角形的类型判断，程序模块要求如下： 创建三角形对象triangle，该对象属性有三边a,b,c，该对象有： 方法1&#xf…
阅读更多...
linux 软中断入门

linux 软中断入门

在 linux 中，任务执行的载体有很多，包括线程，中断，软中断，tasklet，定时器等。但是从本质上来划分的话，任务执行的载体只有两个：线程和中断。软中断和 tasklet 的执行可能在中断中&am…
阅读更多...
【无限列车1】SpringCloudAlibaba 与 SpringBoot后端架构的搭建

【无限列车1】SpringCloudAlibaba 与 SpringBoot后端架构的搭建

【无限列车1】SpringCloudAlibaba 与 SpringBoot后端架构的搭建 1、版本说明二、日志相关配置3、AOP 打印日志 1、版本说明 【SpringCloud 版本说明】https://sca.aliyun.com/zh-cn/docs/2022.0.0.0-RC1/overview/version-explain 🖊 RC（Release Candi…
阅读更多...
离散数学--谓词逻辑之复习与前束范式与谓词演算的推理理论

离散数学--谓词逻辑之复习与前束范式与谓词演算的推理理论

引子：在命题演算中，常常要化成规范形式，对于谓词的演算，可以化成与他等价的范式！ 前束范式定义： 一个公式，如果量词均非否定地在全式的开头，它们的作用域延伸到整个公式的末尾&…
阅读更多...
绘制空心环形

绘制空心环形

1.通过几个div拼接绘制空心环形进度条。 通过 -webkit-mask: radial-gradient(transparent 150px, #fff 150px);绘制空心圆 html:<body><div class"circle"><div class"circle-left"></div><div class"circle-left-mask&…
阅读更多...
maven知识加强理解

maven知识加强理解

maven知识 聚合: 父工程通过 modules标签&#xff0c;将子模块聚集起来&#xff0c;好处方便管理&#xff0c;父工程执行maven命令&#xff0c;所有的子模块都会执行 继承: 子模块通过parent标签&#xff0c;可以从父工程继承一些依赖 maven生命周期 三套 第一套:clean清理 第…
阅读更多...
蓝桥杯（更新中）

蓝桥杯（更新中）

递归与递推 递归 1.指数型枚举 解析&#xff1a;从 1 ∼ n 这 n 个整数中随机选取任意多个&#xff0c;输出所有可能的选择方案。 思路&#xff1a;枚举每一位对应的数字选与不选&#xff0c;例如&#xff1a;第一位对应的数字为1&#xff0c;有一种方案是选1&#xff0c;另…
阅读更多...
最新文章

Copyright @ 2022~2023