前端常见问题

一、<!DOCTYPE html>作用

<!DOCTYPE>是html文档的第一行,用于声明文档的类型,它会告诉浏览器要用哪一种HTML规范来渲染文档,确保正确渲染页面。

二、src href 的区别

(一)、请求资源类型的不同

在请求src资源时,要先将其指向的资源下载并且应用到文档中

href表示超文本引用,用于建立当前元素和href引用资源的链接

(二)、作用结果不同

src会替换当前元素自身内容:如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script src="demo.js">console.log("hello");</script>
</body></html>
console.log("hello world!");

 结果:

href主要是用于当前元素和引用资源之间建立一种联系,不会替换当前内容(link a)

(三)、浏览器解析方式不同

当浏览器解析到src时,会暂停对其他资源的处理,直到src指向的资源加载、编译、执行完毕,才会继续对其他资源的处理;

当浏览器解析到href时,并不会停止对其他资源的处理。

三、主流浏览器得内核介绍

内核主要作用是什么:对页面进行渲染

  • Chromium/Blink‌:由谷歌开发的内核,是目前最为流行的浏览器内核之一,包括谷歌Chrome、Microsoft Edge、Opera等。Chromium/Blink内核的特点包括渲染速度快、安全性高、省电省流量和良好的Web标准兼容性。

  • Gecko‌:由Mozilla基金会开发的内核,主要用于Firefox浏览器。Gecko内核的特点包括支持Web标准、高速渲染、安全性和可定制性。

  • WebKit‌:由苹果公司开发的内核,最初是为Safari浏览器设计的,也被用于其他浏览器,如UC浏览器、360浏览器等。WebKit的特点包括渲染速度较快、高效命中缓存、能力可扩展和高度兼容性。

  • Trident‌:由Microsoft开发的内核,曾被用于Internet Explorer浏览器,目前已被Edge采用Chromium/Blink内核代替。Trident内核的特点包括兼容性、安全性、引入ActiveX和渲染速度较慢。

  • Presto‌:由Opera Software开发的内核,曾被用于Opera浏览器,目前已被Opera采用Chromium/Blink内核代替。Presto的特点包括渲染速度较快、兼容性好、高度可定制性和安全性好。

四、什么是BFC

‌BFC的全称是Block Formatting Context,即块格式化上下文。‌这是一个CSS中的概念,它决定了如何渲染块级盒子,并且规定了内部盒子如何与BFC外部的盒子及其他元素交互。BFC是一个隔离的独立容器,容器里的元素不会影响到容器外部的元素。通过设置某些属性,如overflow: hidden;,可以创建一个新的BFC,从而改变元素的布局规则,解决父元素高度塌陷等问题,避免高度塌陷问题的发生。BFC的应用包括自适应两栏、三栏的布局,清除内部浮动,以及利用BFC消除margin重叠等‌。

其实就是独立渲染区域

五、原型和原型链

  • 原型‌:在JavaScript中,每个构造函数都有一个prototype属性,这个属性是一个指向原型对象的指针。原型对象包含了可以由该构造函数创建的所有对象的共享属性和方法。当创建一个新对象时,这个新对象会从其构造函数的prototype属性继承属性和方法。这意味着,通过修改原型,可以为所有对象实例添加或修改共享的方法或属性。

  • 原型链‌:当试图访问一个对象的属性时,JavaScript会首先检查这个对象自身是否有这个属性。如果没有找到,那么JavaScript会转向这个对象的原型对象查找该属性。如果原型对象也没有这个属性,会继续查找原型的原型,这个过程会一直持续下去,直到找到属性或者达到原型链的末端(即Object.prototype.__proto__null)。这种查找机制形成了一个链式结构,被称为原型链。

六、深浅拷贝

  • 浅拷贝‌:只是复制了源对象的引用,而不是对象本身的内容。如果源对象包含嵌套的对象或数组,那么这些嵌套的对象或数组的引用也会被复制,但嵌套的对象或数组的内容仍然是共享的。这意味着,如果你修改了浅拷贝后的对象或数组中的嵌套元素,原始对象或数组中的相应元素也会被修改,因为它们实际上指向的是同一个内存地址。浅拷贝适用于基本数据类型(如数字、字符串等)和简单的数据结构,因为它复制的是引用而不是实际的内容。

  • 深拷贝‌:则是递归地复制源对象的所有内容,包括嵌套的对象或数组。深拷贝会创建一个全新的对象或数组,其中的元素与原始对象或数组完全独立,不共享任何内存地址。这意味着,无论你如何修改深拷贝后的对象或数组中的内容,原始对象或数组都不会受到影响。深拷贝适用于需要完全独立副本的场景,特别是当对象或数组包含复杂的数据结构时。

浅拷贝通常用于简单的数据结构复制,如基本数据类型或一层嵌套的对象或数组。而深拷贝则适用于需要完全独立副本的复杂数据结构,如多层嵌套的对象或数组。选择使用哪种拷贝方式取决于具体的需求和数据结构的复杂性‌

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

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

相关文章

女明星玩乙游,为何会推动国乙玩家“世纪大和解”?

“震惊&#xff01;叠姐和光姐竟然世纪大和解了。” 这件在国乙圈匪夷所思、想都不敢想的事&#xff0c;竟然在一位女明星的推动下发生了&#xff0c;也因此诞生了国乙圈的“8.22事件”。 事情的起因是女艺人乃万在社交平台上发布了乙游相关言论&#xff0c;引起了乙游玩家不…

Spring--三级缓存机制

一、什么是三级缓存 就是在Bean生成流程中保存Bean对象三种形态的三个Map集合&#xff0c;如下&#xff1a; // 一级缓存Map 存放完整的Bean&#xff08;流程跑完的&#xff09; private final Map<String, Object> singletonObjects new ConcurrentHashMap(256);// 二…

USB3.2 摘录(九)

系列文章目录 USB3.2 摘录&#xff08;一&#xff09; USB3.2 摘录&#xff08;二&#xff09; USB3.2 摘录&#xff08;三&#xff09; USB3.2 摘录&#xff08;四&#xff09; USB3.2 摘录&#xff08;五&#xff09; USB3.2 摘录&#xff08;六&#xff09; USB3.2 摘录&…

页面设计任务 商品详情页(带评论区)

目录 效果图&#xff1a; 任务描述 源码&#xff1a; 详细讲解&#xff1a; 1.产品信息部分 2.用户评论区域 效果图&#xff1a; 任务描述 页面结构: 页面应包括一个标题部分、一个产品展示区和一个客户评价区。使用图片展示产品&#xff0c;并添加描述。客户评价区展示一…

IP代理池学习记录

免责声明 本文仅供学习和研究目的使用。所提供的信息和技术仅限于合规和合法的使用场景。请读者在应用相关技术时遵守法律法规&#xff0c;尊重他人的数据隐私和网站使用条款。本文作者对因使用本文信息而产生的任何法律责任或损失不承担责任。 1、初识IP代理池 概述&#xff…

如何使用ssm实现基于SSM的社区物业管理系统的设计与实现+vue

TOC ssm223基于SSM的社区物业管理系统的设计与实现vue 绪论 1.1 研究背景 现在大家正处于互联网加的时代&#xff0c;这个时代它就是一个信息内容无比丰富&#xff0c;信息处理与管理变得越加高效的网络化的时代&#xff0c;这个时代让大家的生活不仅变得更加地便利化&…

Redis—缓存机制

Redis 缓存机制 1. 缓存三兄弟1.1 缓存击穿1.2 缓存穿透1.3 缓存雪崩 2. 布隆过滤器3. 缓存和数据库数据一致性3.1 缓存更新策略3.2 缓存不一致处理 4. 热点 key4.1 热点 key 处理4.2 热点 key 重建 5. 缓存预热 Redis&#xff0c;一个轻量级的开源内存数据结构存储系统&#x…

Redis计数器:数字的秘密

文章目录 Redis计数器incr 指令用户计数统计用户统计信息查询缓存一致性 小结 技术派项目源码地址 : Gitee :技术派 - https://gitee.com/itwanger/paicodingGithub :技术派 - https://github.com/itwanger/paicoding 用户的相关统计信息 文章数&#xff0c;文章总阅读数&am…

go设计模式——单例模式

概念 单例是一种创建型设计模式&#xff0c;它确保一个类在整个程序运行期间只有一个实例&#xff0c;并提供一个全局访问点来使用该实例。虽然单例模式在某些情况下非常有用&#xff0c;例如管理全局配置、日志记录或资源共享&#xff0c;但它也带来了与全局变量相似的问题。…

redis面试(二十三)写锁释放

先加了写锁&#xff0c;后面再次加写锁或者读锁 anyLock: { “mode”: “write”, “UUID_01:threadId_01:write”: 2, “UUID_01:threadId_01”: 1 } 写锁的释放lua脚本在这里 RedissonWriteLock.unlockInnerAsync() 比如说现在的参数是这 KEYS[1] anyLock KEYS[2] redi…

SQL手工注入漏洞测试(MongoDB数据库)靶场通关攻略

构造数据回显 });return ({title:1,content:2 成功回显1,2&#xff0c;接下来我们开始尝试查询数据库 });return({title:tojson(db),content:2 得到之后我们就可以继续查询他的表名了 });return({title:tojson(db.getCollectionNames()),content:2 最后我们就可以爆出他表里的数…

宝塔面板配置FTP服务并安装内网穿透实现无公网IP远程连接

文章目录 前言1. Linux安装Cpolar2. 创建FTP公网地址3. 宝塔FTP服务设置4. FTP服务远程连接小结 5. 固定FTP公网地址6. 固定FTP地址连接 前言 本文主要介绍宝塔FTP文件传输服务如何搭配内网穿透工具&#xff0c;实现随时随地远程连接局域网环境搭建的宝塔FTP文件服务并进行文件…

ssrf实现.SSH未创建写shell

一、介绍SSRF漏洞 SSRF (Server-Side Request Forgery,服务器端请求伪造)是一种由攻击者构造请求&#xff0c;由服务端发起请求的安全漏洞。一般情况下&#xff0c;SSRF攻击的目标是外网无法访问的内部系统(正因为请求是由服务端发起的&#xff0c;所以服务端能请求到与自身相…

C语言基础——函数详解

目录 函数的概述 1 函数的概念 2 函数的意义 函数的定义和使用 1 函数的定义 2 函数的调用 2.1 在同一文件中函数定义后函数调用 2.2 在同一文件中函数定义前函数调用 2.3 调用其它文件中定义的函数 2.3.1 在函数调用文件中进行声明 2.3.2 在头文件中进行函数的声明 函…

图片工具箱:一键批量加水印,守护创意,提升效率!

前言 你是否曾在处理海量图片时&#xff0c;被繁琐的步骤和漫长的等待时间折磨得苦不堪言&#xff1f;是否梦想过拥有一款神器&#xff0c;能让你的图片处理工作变得轻松愉快&#xff0c;从此告别加班的烦恼&#xff0c;迎接升职加薪的曙光&#xff1f;那么&#xff0c;让我向…

有限差分学习笔记

有限差分介绍 ​ 在数学中&#xff0c;有限差分法&#xff08;finite-difference methods&#xff0c;简称FDM&#xff09;&#xff0c;是一种微分方程数值方法&#xff0c;是通过有限差分来近似导数&#xff0c;从而寻求微分方程的近似解。 由泰勒展开式的推导 显式方…

Web应用加密数据传输方案

目录 概述 最初的方案 改进后的方案 秘钥的过期时间 概述 介于公司最近发布了一个面向C端用户的Web系统&#xff0c;为防止前端调用后端的API接口时&#xff0c;数据传输的内容轻易的被黑客获取&#xff0c;而设计的一个前后端数据加密传输方案 最初的方案 在最开始&#xf…

2 种方式申请免费 SSL 证书,阿里云 Certbot

如何使用免费的 SSL 证书&#xff0c;有时在项目中需要使用免费的 SSL 证书&#xff0c;Aliyun 提供免费证书&#xff0c;三个月有效期&#xff0c;可以直接在aliyun 申请&#xff0c;搜索 SSL 证书&#xff0c;选择测试证书。 Aliyun 证书需要每三月来来换一次&#xff0c;页…

<数据集>车内视角行人识别数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;6470张 标注数量(xml文件个数)&#xff1a;6470 标注数量(txt文件个数)&#xff1a;6470 标注类别数&#xff1a;1 标注类别名称&#xff1a;[pedestrian] 序号类别名称图片数框数1pedestrian647029587 使用标注…

奔驰S迈巴赫S480升级动态按摩座椅效果怎么样

在迈巴赫 S480 的尊崇之旅中&#xff0c;舒适从未有尽头。现在&#xff0c;为您呈现前排动态按摩座椅的升级&#xff0c;将舒适体验提升至全新境界。 迈巴赫 S480 已然是舒适的代名词&#xff0c;但前排动态按摩座椅的升级&#xff0c;将为您带来前所未有的放松与享受。 当您…