【前端面试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-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.mzph.cn/news/784035.shtml

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

相关文章

如何制作伸缩侧边栏?

目录 一、html-body 二、CSS 三、JS 四、完整代码 五、效果展示 一、html-body 侧边栏的伸缩需要用户触发事件&#xff0c;这里使用button为例&#xff0c;用户点击按钮实现侧边栏的打开和关闭。 <body><!-- 按钮&#xff0c;可以用文字、图片等作为事件源&am…

【JavaScript编程】前端如何实现局部打印(精确打印)

在前端开发中实现精确打印控制&#xff08;局部打印&#xff09;&#xff0c;可以通过以下几种方式&#xff1a; 一、使用window.print()和id选择器 将需要打印的内容包裹在一个容器内&#xff0c;比如一个<div>标签&#xff0c;并为该容器设置一个ID。 <div id&quo…

三个js算法

① 冒泡排序   作为最简单的排序算法之一&#xff0c;冒泡排序给我的感觉就像Abandon在单词书里出现的感觉一样&#xff0c;每次都在第一页第一位&#xff0c;所以最熟悉。冒泡排序还有一种优化算法&#xff0c;就是立一个flag&#xff0c;当在一趟序列遍历中元素没有发生交换…

027-033前缀和

027-033前缀和 核心思想:前缀和-->快速得到某段连续区间的结果 方法:初始化dp数组 前缀和哈希表 dp[i][j] dp[i-1][j]dp[i][j-1]arr[i][j]-dp[i-1][j-1]; 求dp[i][j] dp[x2][y2] - dp[x1-1][y2] - dp[x2][y1-1] dp[x1-1][y1-1] (x1,y1)>(x2,y2) DP34 【模板】一维前…

十三.youyiku分析案例(数分)

目录 youyiku分析案例(数分) 大框操作 1.销售情况随着时间的变化 2.不同产品的销量 柱状图(bar)改颜色排序 seaborn库(柱) --排序 3.每个城市的人喜欢的购物方式 4-不同年龄段的购物方式 添加标签段及值 --创建新表 对标签分别计算 绘图分析 youyiku分析案例(数分…

OpemMP 同步结构

为了说明同步&#xff0c;我们先来看如下多线程加法的问题&#xff0c;假设x初值为0&#xff1a; THREAD 1: THREAD 2: High level code increment(x) {x x 1&#xff1b;} increment(x) {x x 1;} Assembly LOAD A, (x address) ADD A, 1 STORE A, (x address) LOAD…

session反序列化漏洞2——ctfshow web263

题目链接 https://ctf.show/challenges#web263-723 解题思路 进去先是一个登录框 目录扫描一下发现存在源码泄露 查看源码 index.php error_reporting(0);session_start();//超过5次禁止登陆if(isset($_SESSION[limit])){$_SESSION[limti]>5?die("登陆失败次数超…

Centos7.9 无法启动 提示Entering emergency mode

前言 由于更换内存条&#xff0c;导致电脑运行时蓝屏直接断电导致启动不了 正文 输入命令当出现done时再重启就解决了 xfs_repair -v -L /dev/dm-0

智过网:中级安全工程师一年能挣多少钱?工资高吗?

中级安全工程师的年收入是广大从业者非常关心的问题。毕竟&#xff0c;了解自己所处行业的薪资水平&#xff0c;不仅有助于规划个人职业发展&#xff0c;还能为日常生活中的决策提供重要参考。那么&#xff0c;中级安全工程师一年究竟能挣多少钱呢&#xff1f;工资又是否算高呢…

[leetcode] 100. 相同的树

给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 示例 1&#xff1a; 输入&#xff1a;p [1,2,3], q [1,2,3] 输出&#xff1a;true示例 2&a…

YOLOV5训练自己的数据集教程(万字整理,实现0-1)

文章目录 一、YOLOV5下载地址 二、版本及配置说明 三、初步测试 四、制作自己的数据集及转txt格式 1、数据集要求 2、下载labelme 3、安装依赖库 4、labelme操作 五、.json转txt、.xml转txt 六、修改配置文件 1、coco128.yaml->ddjc_parameter.yaml 2、yolov5x.…

设计模式(10):享元模式

一.核心&#xff1a; 享元模式以共享的方式高效地支持大量细粒度对象的重用。享元对象能做到共享的关键是区分了内部状态和外部状态。 内部状态&#xff1a; 可以共享&#xff0c;不会随环境变化而改变。外部状态&#xff1a; 不可以共享&#xff0c;会随环境变化而改变。 二…

第1章.提示词:开启AI智慧之门的钥匙

什么是提示词&#xff1f; 提示词&#xff0c;是引导语言模型的指令&#xff0c;让用户能够驾驭模型的输出&#xff0c;确保生成的文本符合需求。 ChatGPT&#xff0c;这位文字界的艺术大师&#xff0c;以transformer架构为基石&#xff0c;能轻松驾驭海量数据&#xff0c;编织…

嵌入式第一部分-第一集:ARM那些你得知道的事

ARM&#xff1a;Advanced RISC Machine&#xff0c;先进精简指令集机器 ARM公司只做设计&#xff0c;不生产。 国内IC生产厂商&#xff1a;华为海思、全志、瑞芯微、MTK&#xff08;联发科&#xff09; 扩展&#xff1a;ARM的商业模式了解。 使用三星S5PV210开发板进行视频的讲…

大数据 - Hadoop系列《五》- HDFS文件块大小及小文件问题

系列文章&#xff1a; 大数据- Hadoop入门-CSDN博客 大数据 - Hadoop系列《二》- Hadoop组成-CSDN博客 大数据 - Hadoop系列《三》- HDFS&#xff08;分布式文件系统&#xff09;概述_大量小文件的存储使用什么分布式文件系统-CSDN博客 大数据 - Hadoop系列《三》- MapRedu…

LeetCode算法——数组/字符串篇

对刷过的算法进行总结&#xff0c;所用解法都是最符合我个人逻辑的&#xff0c;以后再刷的话就看这篇帖子了 # 代码随想录——数组理论基础 首先要知道数组在内存中的存储方式&#xff0c;这样才能真正理解数组相关的面试题 数组是存放在连续内存空间上的相同类型数据的集合 …

IntelliJ IDEA 2023 for Mac 好用的Java开发工具

IntelliJ IDEA 2023是一款由JetBrains开发的强大的集成开发环境&#xff08;IDE&#xff09;软件&#xff0c;适用于多个编程语言。它旨在提高开发人员的生产力和代码质量&#xff0c;具有以下多种特色功能&#xff1a; 软件下载&#xff1a;IntelliJ IDEA 2023 v2023.3.6中文激…

2d导入人物素材进行分割后设置图层

1、设置分辨率大小 2、相机调整大小&#xff0c;要符合场景 3、选择2D sprite 编辑器 或者 点击这个也行 4、分割图像 5、设置过滤模式 6、图层设置

CAJViewer8.1下载地址及安装教程

CAJViewer是中国学术期刊&#xff08;CAJ&#xff09;全文数据库的专用阅读软件。CAJViewer是中国知识资源总库&#xff08;CNKI&#xff09;开发的一款软件&#xff0c;旨在方便用户在线阅读和下载CAJ数据库中的学术论文、期刊和会议论文等文献资源。 CAJViewer具有直观的界面…

vue render 函数详解 (配参数详解)

vue render 函数详解 (配参数详解) 在 Vue 3 中&#xff0c;render 函数被用来代替 Vue 2 中的模板语法。 它接收一个 h 函数&#xff08;或者是 createElement 函数的别名&#xff09;&#xff0c;并且返回一个虚拟 DOM。 render 函数的语法结构如下&#xff1a; render(h) …