前端常见问题

一、<!DOCTYPE html>作用

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

二、src与 href 的区别

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

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

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

(二)、作用结果不同

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

html 复制代码
<!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>
javascript 复制代码
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)。这种查找机制形成了一个链式结构,被称为原型链。

六、深浅拷贝

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

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

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

相关推荐
一直学习永不止步1 分钟前
LeetCode题练习与总结:赎金信--383
java·数据结构·算法·leetcode·字符串·哈希表·计数
小刘|32 分钟前
《Java 实现希尔排序:原理剖析与代码详解》
java·算法·排序算法
jjyangyou37 分钟前
物联网核心安全系列——物联网安全需求
物联网·算法·安全·嵌入式·产品经理·硬件·产品设计
van叶~1 小时前
算法妙妙屋-------1.递归的深邃回响:二叉树的奇妙剪枝
c++·算法
简简单单做算法1 小时前
基于Retinex算法的图像去雾matlab仿真
算法·matlab·图像去雾·retinex
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
云卓SKYDROID1 小时前
除草机器人算法以及技术详解!
算法·机器人·科普·高科技·云卓科技·算法技术
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6