前端常见问题

devtools/2024/11/14 15:06:10/

一、<!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.ppmy.cn/devtools/100763.html

相关文章

4820道西医综合真题西医真题ACCESS\EXCEL数据库

本题库内容源自某出版物《西医综合真题考点还原与答案解析》&#xff0c;包含4千多道真题。这个数据库包含3个表&#xff0c;一个是分类表&#xff08;SECTION_BEAN&#xff09;&#xff0c;一个是题库主表&#xff08;QUESTION_INFO_BEAN&#xff09;&#xff0c;一个是选项表…

java一键生成数据库说明文档html格式

要验收项目了&#xff0c;要写数据库文档&#xff0c;一大堆表太费劲了&#xff0c;直接生成一个吧&#xff0c;本来想用个别人的轮子&#xff0c;网上看了几个&#xff0c;感觉效果不怎么好&#xff0c;自己动手写一个吧。抽空再把字典表补充进去就OK了 先看效果&#xff1a; …

【R语言实战】——多模型预测及评价

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…

Android笔试面试题AI答之Kotlin补充考点

博客中虽然包含了大量关于Kotlin的面试题&#xff0c;但并未涵盖Kotlin所有可能的面试考点。以下是一些博客中未明确提到的面试考点&#xff1a; Kotlin与Java的互操作性&#xff1a; Kotlin如何与Java代码互操作&#xff1f;Kotlin如何调用Java方法&#xff0c;以及Java如何调…

mysql练习5

数据准备 创建两张表:部门(dept)和员工(emp)&#xff0c;并插入数据&#xff0c;代码如下 create table dept( dept id int primary key auto increment comment部门编号, dept_name char(20)comment部门名称 ); insert into d…

Cyberchef实用功能之-json解析美化和转换

本文将介绍如何使用cyberchef的json操作功能&#xff0c;根据自己的需求处理常见的json问题。 在网络安全日常的运营&#xff0c;护网行动&#xff0c;重保活动的过程中&#xff0c;经常需要查看多种平台的json格式日志&#xff0c;如下&#xff1a; 以json格式存储的防火墙日…

ruoyi-app前端在缓存中添加nick_name和user_id属性值

需求 ruoyi-app原生自带只有avatar、name、roles、permissions&#xff1b;在显示中&#xff0c;我们大多数需要nick_name、user_id&#xff1b;当然获取方式也可以通过name去调用接口查询&#xff0c;但我想偷个懒。 代码 代码已经调好的&#xff0c;复制即用&#xff1b;至…

调用ragflow api实现俩个模型根据知识库的内容来进行对话 简易版

调用ragflow接口实现俩个模型对话 简易版 用到的库流程代码参考文献 用到的库 requests 调用api 发送请求streamlit 做一个简单的页面json 解析接口返回的内容 流程 根据ragflow官方api文档中的内容&#xff0c;我们需要先将api键需要放到请求头中&#xff0c;然后再调用new…